LIAT
ZINI
Clal - Mobile App Design
UI Lead representing Clal in a Web-to-Mobile transition project, defining the visual direction, components, and mobile patterns in collaboration with Design I.
01
Brand to Digital
Translating Clal’s refreshed brand into a clear digital system and shaping how it behaves in a mobile environment.
02
Web → Mobile
Transforming Web components into mobile-ready patterns that work naturally on small screens.
03
Visual Ownership
Owning Clal’s visual direction, partnering with Design It, and ensuring every decision supported the broader digital transformation.
My Role & Project Context - Refined Version
Following Clal’s 2024 brand refresh, the goal for 2025 was to bring the new identity into all digital touchpoints.
One of the key products in this effort was the Clal Mobile App.
As Clal’s UI representative, I partnered with Design It to define how the new brand should translate into a mobile-first experience.
With experience designing several digital products under the refreshed brand, I helped interpret the brand foundations into mobile behavior, identify gaps in existing Web components, and redesign them for a modern, native mobile system.
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 →
problematic grid layout
Step 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.
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
01
Give the bubbles a clear functional role
02
Establish a structured, intuitive hierarchy
03
Add a proper section title above the cards
03
Use the brand element meaningfully
03
Solve grouping without breaking the grid
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.
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
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