Back Liat Zini Product Designer Email LinkedIn I design clear, polished digital experiences for complex products, workflows, and design systems. My strength is turning messy flows, scattered content, and detailed requirements into structured interfaces that feel simple, useful, and visually refined. I care about clarity, collaboration, and creating design that works well, not just looks good. The way I work It would probably say: I ask before I design I start by understanding the real need, the context, and the people behind the product, before jumping into screens. I question the solution Even when a direction is already defined, I like to ask whether it is the clearest and most useful way to solve the problem. I organize the mess I enjoy turning scattered content and complex flows into screens that feel logical, structured, and easy to use. I design for clarity A screen can be beautiful, but it also needs to be readable, understandable, and practical. It would probably say: Outside the screen, I’m a people person, a proud moshav girl, and someone who believes good collaboration, and a little humor, make the process much better.

Liat Zini Product Designer I design clear digital products for complex workflows from mobile apps and responsive websites to design systems. I focus on structure, usability, and visual polish, turning scattered content into interfaces that feel simple, useful, and human. About Me Linkedin Insurance Cards A mobile UX redesign that reorganizes multiple insurance cards into a clearer, scalable home-screen structure. Design System A digital design system translating Clal’s refreshed brand into reusable UI foundations for web and mobile. Dynamic Pages A modular component library helping content teams build flexible, consistent, brand-aligned pages at scale. ForkCheck A mobile and desktop system that replaces paper based forklift rentals with a structured digital workflow.

ForkCheck A digital rental management system replacing paper forms with a structured mobile and desktop workflow. Role Product Designer Platform Mobile App, Desktop Dashboard Focus Rental Flow, Return Documentation, Fleet Management 01 Overview ForkCheck is a product concept for managing forklift rentals in a small rental business that still relies on paper forms, WhatsApp photos, and manual tracking. The system connects field documentation, rental status, return inspections, and office management into one structured workflow across mobile and desktop. 02 The Problem The current rental process relied on handwritten forms, WhatsApp photos, and manual updates. Important details like engine hours, fuel level, damages, and return status could easily get lost or stay disconnected from billing and follow-up. This created operational gaps: missed charges, unclear vehicle history, and no single source of truth for the office team. This is the dashboard ForkCheck was designed to replace. 03 The Solution I designed a digital workflow that separates field actions from office management: mobile forms for rental and return documentation, and a desktop dashboard for tracking fleet status, history, invoices, and follow-up tasks. 04 Process Key UX decisions The main UX challenge was deciding how to split the workflow between field workers and the office team. I focused on keeping mobile actions short and task-based, while using the desktop dashboard for tracking, history, documents, and operational overview. 1. One flow for rental, one flow for return I split the product between two work contexts: mobile for field documentation, and desktop for office management. This keeps photos, signatures, fuel level, and condition checks quick in the field, while fleet overview, history, documents, and billing support stay easier to manage from desktop. Rent flow Return flow 2. Mobile for documentation, desktop for management I split the product between two work contexts: mobile for field documentation, and desktop for office management. Photos, signatures, fuel level, and condition checks happen during handover, while fleet overview, history, documents, and billing-related information are easier to manage from desktop. 3. Action-first entry point The home screen starts with the worker’s immediate task: rent or return. After choosing an action, the user selects the relevant forklift and continues into a focused form that includes only the fields needed for that workflow. 05 Design System To keep the product clear and consistent, I created a lightweight design system for the mobile app and desktop dashboard, including colors, typography, buttons, fields, cards, and status indicators. Visual Direction ForkCheck was designed for an existing Israeli forklift rental business with an existing logo and website. I used the current brand as a visual starting point, then adapted it for a digital product interface. Existing company website Color System The color palette was designed to feel practical, calm, and easy to scan, using green as the main action color and neutral tones to support long forms and dashboard views. Typography The typography was kept simple and functional, with clear hierarchy between page titles, section labels, form fields, and dashboard data. Buttons & Actions The button system supports clear task hierarchy, with primary actions for rental and return flows and secondary actions for supporting steps. Status Component The status component helps make each forklift’s condition and availability clear at a glance, so the office team can quickly understand what needs attention. Form Components The form components were designed for quick field use, with clear labels, large touch areas, photo upload sections, and signature fields for rental and return documentation. 06 Mobile App Field Worker Interface The mobile flow was designed for workers in the field, focusing on two main actions: starting a rental and completing a return. Each flow uses short, task-based steps to document the forklift’s condition, hours, fuel level, photos, and signature. View prototype Fleet Rent- Choose Forklift Rent- Client Details Rent- Forklift Details Waiting for signature Confirmation Return- Choose Forklift Return- Forklift Details Active rental page Fleet Rent- Choose Forklift Rent- Client Details Rent- Forklift Details Waiting for signature Confirmation Return- Choose Forklift Return- Forklift Details Active rental page Fleet Rent- Choose Forklift Rent- Client Details Rent- Forklift Details Waiting for signature Confirmation Return- Choose Forklift Return- Forklift Details Active rental page Fleet Rent- Choose Forklift Rent- Client Details Rent- Forklift Details Waiting for signature Confirmation Return- Choose Forklift Return- Forklift Details Active rental page 07 Desktop Dashboard Office Management The desktop dashboard turns field data into a clear office management view, showing fleet status, open faults, pending invoices, and rental activity in one place. From Figma to AI-assisted prototype After designing the desktop dashboard in Figma, I used Claude Code to explore how the experience could work as an interactive prototype. This helped me test ideas for internal forklift pages, including rental history, maintenance, documents, and key operational actions. By connecting field documentation with office management, ForkCheck turns a manual rental process into a clearer, more reliable operational workflow. More Works View All Insurance Cards Dynamic Pages Design System

Dynamic Pages A flexible component system for Clal’s content managed pages. I designed a responsive component library that helps Clal’s content teams build dynamic pages faster, while keeping the experience consistent, branded, and easy to maintain. Project Context Clal’s content and marketing teams needed a more flexible way to build dynamic pages inside the CMS, without creating a new custom layout for every page. Role UX/UI Designer Platform Responsive Web Focus Reusable Components, CMS Flexibility, Responsive Design 01 Starting Point The real problem was not only visual inconsistency, it was workflow. Before the component library, dynamic pages were built with inconsistent layouts and limited reusable sections. Each page required design attention, which made it harder for content teams to create new pages quickly and keep the website visually consistent. Examples from the previous system Before: limited components, too much manual decision-making Although components already existed, they were not structured as a flexible system. Editors still had to rely on manual layout decisions, making the workflow harder to scale and maintain. 02 Research & Insights The goal was not only to apply Clal’s refreshed brand language, but to improve how dynamic pages were built and maintained. After reviewing existing pages and working closely with the content team, I identified three recurring needs. Three recurring needs Brand implementation Translate the new brand language into reusable digital components. Component structure Create clearer content hierarchy and more predictable layouts. Design rules Define consistent rules for spacing, typography, and behavior. 03 System Approach I translated recurring content patterns into reusable components with clear rules, responsive behavior, and editor-controlled variations — allowing the content team to build flexible pages independently while maintaining brand consistency. Responsive behavior across breakpoints Each component was designed across four key breakpoints , 1920, 1440, 774, and 360, to keep the layout consistent on every screen size. 04 Component Library These insights became the foundation for a modular component library — built around the content team’s real needs: flexible sections, editable content, controlled visual variations, and responsive layouts that could support different page types independently. Reusable structure · Editor flexibility · Responsive behavior · Brand consistency Contact Form Strip A reusable lead generation component for placing contact forms inside different page types, while keeping the structure clear, familiar, and easy to complete. Editor controls: Editable title · Editable field labels and helper text · White, cream, or light blue background Expandable Info Card A reusable card component for content-heavy items with multiple links. It was designed to let editors add richer content without creating uneven card heights or breaking the rhythm of the page. Before - Uneven link lists Cards with different numbers of links created uneven heights and made the layout harder to scan. After - Expandable links The card shows a limited number of links by default, with an expandable state for additional links. Editor controls: Editable title · Optional image · Optional body text · Up to 6 links · Expandable link state · Green, yellow, light blue, or cream card color · Grid or horizontal scroll layout FAQ Section A reusable accordion component for long-form informational content. It helps editors organize questions and answers in a clear, scannable structure while keeping the interaction consistent across the site. Editor controls: Editable title and optional subtitle · Editable questions and answers · One-item-open behavior · White or cream background Icon Strip A supporting content section for short messages, benefits, or service highlights. It gives editors a simple way to add visual rhythm to long pages while keeping icons and silhouettes visually consistent. Editor controls: Icon or silhouette upload · Fixed 80×80 visual frame · Horizontal or vertical layout · Content alignment · Background color selection Video Carousel A reusable media component for presenting multiple videos inside one structured section. It allows editors to add rich media to content pages without designing a custom video layout for every use case. Editor controls: Editable title and optional subtitle · Thumbnail upload · Main video and preview state · Side navigation · White, light blue, or cream background Basic Info Card A reusable card component for presenting services, articles, or related information in a clean, scannable way, while helping editors build structured content areas that stay balanced across screen sizes. Editor controls: Editable title and body text · Optional image · Optional link · Editable link label and URL · Cream, light blue, yellow, or green card color · Grid or horizontal scroll layout Text Banner A branded content strip designed to highlight key messages, create a visual pause within long pages, and give editors a flexible way to present marketing content without a custom layout. Editor controls: Editable title · Optional subtitle · Typography style · Right or center alignment · White, cream, light blue, or dark blue background · Optional background image Hero Banner A flexible opening component for marketing and content pages, designed to support different hero variations while keeping hierarchy, rhythm, and CTA structure consistent. Editor controls: Headline style selection · Image or Lottie upload · Dark blue, light blue, or cream background · No CTA, primary CTA, or primary + secondary CTA · Bullet list or numbered list 05 Outcome The component library gave Clal’s content team a clearer and more scalable way to build dynamic pages independently. Instead of treating each page as a custom design task, the team now had reusable building blocks with defined content options, visual rules, and responsive behavior. View live page More Works View All ForkCheck Insurance Cards Design System

Insurance Cards Redesigning Clal’s mobile insurance-card structure to improve hierarchy, scanning, and scalability. Project Context Clal’s mobile app redesign was created in collaboration with an external design studio. As the in-house UX/UI designer, I was involved throughout the process, guiding product and visual decisions, designing specific app areas, and helping align the experience with Clal’s digital needs. This case study focuses on one specific problem I identified and solved independently: improving the insurance-card structure on the home screen. Role In-house UX/UI Designer Platform Mobile App Focus Card Hierarchy, Navigation, Scalability 01 Overview This case study focuses on the insurance-card area of Clal’s mobile app home screen. The goal was to create a clearer, more scalable structure for users with multiple active policies, while keeping the experience aligned with Clal’s refreshed digital language. 02 The Problem Users with multiple active policies saw repeated card layouts on the home screen, creating a long and visually heavy experience. This made it harder to scan, compare, and understand insurance status at a glance especially when several cards belonged to the same policy category. 02 The Problem When users had multiple active policies of the same type — for example, several trips or multiple vehicles — the cards appeared one after another in a long vertical stack. This made the home screen feel heavy and repetitive. Related policies were not clearly grouped, and content further down the screen was pushed out of view. The challenge was to reduce clutter and create a clearer hierarchy, without removing information users still needed to access. Current state - repeated cards 03 Insight The main insight was that the issue was not the amount of information, but the way it was grouped. Users needed a clearer structure that would reduce repetition, keep related cards together, and make the home screen easier to scan. The solution wasn’t to remove content, but to create a clearer grouping structure. 04 First Exploration Exploring horizontal scroll as a way to reduce vertical clutter I first explored a horizontal-scroll pattern, allowing users to swipe between cards from the same category. While it reduced vertical length, it introduced a new usability issue: weaker visibility, less stable hierarchy, and lower discoverability of additional cards. Why it didn’t work? 01 Broken grid alignment 02 Inconsistent card heights 03 Less stable layout 05 Design Direction Turning visual brand elements into functional navigation The final direction was to turn repeated insurance cards into a functional navigation pattern. Instead of showing every card as a separate block, related cards were grouped together, allowing users to move between policy states while keeping the home screen shorter, clearer, and easier to scan. Reference- familiar tab behavior A familiar tab pattern helped validate the direction: rounded elements can support clear, tappable navigation when their role is explicit. 06 Final Solution A grouped card structure with clear tab navigation The final solution introduced grouped card sections with internal navigation. This allowed users to view related insurance items within the same category, while keeping the home screen visually lighter and easier to understand. Before Trip During Trip After Trip One stable structure, multiple adaptive states. 07 Outcome The new card structure reduced visual repetition on the home screen and made it easier for users to understand their insurance status at a glance. It created a more scalable pattern for future policy types while keeping the app experience cleaner and more consistent. More Works View All Design System ForkCheck Dynamic page

From Print to Product Clal Design System Translating Clal’s refreshed brand language into a scalable digital design system for web and mobile app experiences. Project Context As part of Clal’s digital work, I helped translate the refreshed brand language into practical UI foundations for both web and mobile app experiences. The goal was to create a consistent system that could support colors, spacing, elevation, buttons, and form components across different digital products. Role UX/UI Designer Platform Web & Mobile App Focus Design System, Brand Translation, UI Foundations 01 Colors The color system was created to translate Clal’s refreshed brand language into digital use, balancing the new visual identity with accessibility, hierarchy, and practical UI needs across web and mobile app screens. Primary colors +20 #3D6CED +30 #293768 Secondary colors +10 #B0FFAE -20 -40 -70 +10 #D2E1FF -20 -40 -60 #FFF2EB -30 -60 #F8FFD2 -30 -60 02 Spacing System The spacing system was built around consistent layout rules, helping screens feel organized, readable, and aligned across different content types and breakpoints. Spacing Scale Spacing in Use 03 Elevation System The elevation system defined how cards, popups, and layered surfaces should behave, creating a consistent sense of depth without making the interface feel heavy. Surface-based hierarchy (Web) Depth-based hierarchy (App) 04 Buttons The button system defines clear action hierarchy across web and mobile app interfaces, with consistent styles for primary, secondary, disabled, and contextual actions. Input Types Field States Web App Default Focus Error 05 Form & Input System The button system defines clear action hierarchy across web and mobile app interfaces, with consistent styles for primary, secondary, disabled, and contextual actions. 06 Outcome The design system created a clearer foundation for Clal’s digital products, making UI decisions more consistent across web and mobile app experiences. It helped connect the refreshed brand language with practical product components that could be reused across different screens and flows. More Works View All ForkCheck Insurance Cards Dynamic pages