CLAL – Insurance Cards Redesign

Unifying hierarchy & improving scanability in the home screen

Overview

As part of Clal’s brand refresh, the mobile app required updated components that aligned with the new visual language and mobile design principles.
One of the most significant challenges was the structure of the insurance cards on the home screen—especially for users with multiple active policies.

Because these cards are among the most prominent elements in the app, and often include important policy information and key actions the business wants to surface, their hierarchy and presentation directly impact both user experience and product effectiveness.
Refining their structure was essential to improving clarity, scanability, and overall engagement.

The Problem

When users held multiple active policies, the insurance cards were stacked vertically, creating a long, cluttered layout.
This structure made it difficult to understand which cards belonged to the same category and pushed essential information farther down the screen.

In addition, the actions within each card lacked a clear hierarchy, making it harder for users to identify primary versus secondary actions.
As a result, both the visual structure and the functional prioritization were misaligned with user needs and the new brand direction.

Current state – vertical stacking of multiple cards →

Insight

The issue wasn’t the content inside the cards — that information is required and cannot be reduced.
The real problem was the lack of hierarchy and the way multiple cards of the same category were arranged.

Insurance cards containing related policies (such as several trips or multiple vehicles) should behave as a unified group, not appear as separate, vertically stacked items.
Without proper grouping and hierarchy, the screen felt heavy, repetitive, and difficult to scan.

problematic grid layout

SOLUTION 1

Exploring a scroll-based alternative to reduce vertical clutter.

As an alternative to the vertical stacking, I explored a horizontal scroll layout.
To make the scroll discoverable, the next card needed to slightly peek from the side. While this solved the discoverability issue, it introduced new problems.

Because the next card had to be visible, the layout became misaligned, and the grid no longer sat evenly against both screen margins. This created an unstable, uneven look that didn’t align well with the rest of the home-screen components.

In addition, the cards existed in different states, which resulted in inconsistent heights.
To maintain a unified grid, the cards were either forced to appear too empty or constrained to equal heights that didn’t match their content — both of which led to incorrect UX behavior.

Overall, the horizontal scroll created a layout that felt visually unbalanced and wasn’t suitable for the updated design.

Establish a structured, intuitive hierarchy

Add a proper section title above the cards

Use the brand element meaningfully

Solve grouping without breaking the grid

UX inspiration - using bubbles as functional tabs →

Give the bubbles a clear functional role

Step 2

Bubbles as Tabs- Turning a visual brand element into a functional navigation pattern.

In the initial design, the brand bubbles were used as section headers.
Bubbles are an important part of Clal’s updated visual language, but in this context they sat between a heading and a button — creating uncertainty about whether they were interactive.

During my research, I found an example that demonstrated a clearer direction:
bubbles used as functional tabs.

This approach allowed us to

Step 3

Final Solution- Designing a clear, structured card system that supports multiple policy states.

The final solution combines the bubble-tab navigation with a clean, stable card design.
Each policy category is grouped under a tab, and the card adapts to the user’s real travel timeline- before, during, and after the trip.
This creates a clear hierarchy, keeps the layout aligned, and presents the right information at the right moment.

Before Trip — Collapsed State

A compact view showing essential details and the primary action.

During Trip — Expanded State

A detailed, action-rich view containing all the information needed while the policy is active.

After Trip — Post-Trip State

A simplified version surfacing only the actions still relevant after the trip ends.

01

Clear hierarchy through titles and tabs

02

Stable, aligned layout across all states

03

Cards adapt to the user’s real journey

04

Consistent with the updated brand language

05

Reduces clutter and improves scanability

Step 3

Final Solution- Designing a clear, structured card system that supports multiple policy states.

Before Trip — Collapsed State

A compact view showing essential details and the primary action.

During Trip — Expanded State

A detailed, action-rich view containing all the information needed while the policy is active.

After Trip — Post-Trip State

A simplified version surfacing only the actions still relevant after the trip ends.

01

Clear hierarchy through titles and tabs

02

Stable, aligned layout across all states

03

Cards adapt to the user’s real journey

04

Consistent with the updated brand language

05

Reduces clutter and improves scanability

A brief overview of my role in shaping Clal’s new mobile experience:

01

Brand to Digital

Translating Clal’s new brand into a clear digital language, defining how the refreshed identity should behave in a mobile environment.

02

Web to Mobile

Identifying where Web components fell short on mobile and redesigning fields, buttons, and layouts into mobile-ready, intuitive patterns.

03

Visual Ownership

Representing Clal’s design direction, partnering with Design I, and ensuring every decision aligned with the broader digital transformation.

A brief overview of my role in shaping Clal’s new mobile experience:

03. Visual Ownership

Representing Clal’s design direction, partnering with Design I, and ensuring every decision aligned with the broader digital transformation.

02. Web to Mobile

Identifying where Web components fell short on mobile and redesigning fields, buttons, and layouts into mobile-ready, intuitive patterns.

01. Brand to Digital

Translating Clal’s new brand into a clear digital language, defining how the refreshed identity should behave in a mobile environment.

It’s all about a dialogue

Insurance Cards Hierarchy

Redesigning how multiple policies are presented on the home screen to improve clarity, hierarchy, and scannability.

The Problem

When users had multiple policies of the same type, the cards appeared stacked vertically.
This created visual clutter and pushed key content below the fold.

The Insight

The amount of information couldn’t be reduced — but the way it was presented had to change.
Cards of the same category shouldn’t appear in a long vertical list; grouping them creates a clearer hierarchy and makes the home screen easier to scan.

Current Cards Layout