90%
Component Reuse
95%
Accessibility Compliance
40%
Faster Handoffs
Overview
Role:
Lead Designer, System Architect
Duration:
1 Month
Tools Used:
Figma, Slack, Jira, Google Chrome Developer Tools
Background
As ZEIL’s team grew rapidly, the original design system built mainly for mobile by me as one of the designers started showing cracks. It became clear that the system wasn’t scaling well or supporting the expanding product range, especially since it lacked robust management and didn’t adequately cover web platforms. To fix this, I led a focused redesign project to rebuild and extend the design system, using Material 3 components and a hybrid approach. This overhaul aimed to unify ZEIL’s design language across mobile and web, standardizing core elements like colors, typography, elevation, and iconography. Beyond just visual consistency, the goal was to make collaboration smoother and speed up iteration across design files, ultimately boosting the professionalism and polish of our products.
Objective
The primary objectives of redesigning the design system for ZEIL were to streamline designs and simplify the process for designers and developers. This included:
Simplify collaboration and iteration across design files so designers and developers can work faster and more seamlessly together
Establish a cohesive, scalable framework that saves developers time and effort during implementation
Build flexibility into the system so it can grow with ZEIL’s future product needs and team expansion
Process
The whole redesign sprint took about a week and a half, balancing speed with depth and quality. Here’s how it unfolded
Week 1
Kicked off by gathering candid feedback from designers and developers, diving into their daily workflow challenges and pain points
Prioritized cleanup and consolidation based on common frustrations and impact
Conducted a thorough design audit across all existing mobile and web assets to uncover inconsistencies, legacy components, and duplication
Catalogued every key element, colours, typography styles, icon sets, buttons, and layout patterns from every file
Laid down Material Design principles as a guiding framework, setting clear font guidelines that accounted for desktop and mobile nuances
Week 2
Developed the core building blocks, colours, typography, icons, and shapes, anchored in the new system
Customized Material Design elements deeply to align with ZEIL’s branding while preserving its scalability and accessibility
Migrated the best high-fidelity components from the old system into the new one, ensuring quality and consistency
Mirrored this approach across mobile platforms, guaranteeing a unified experience across device types
Throughout the sprint, I maintained close, meaningful collaboration with the developers. We held regular meetings to emphasize the importance of having a strong design system and aligned our decisions with the Flutter framework for smooth technical integration. These discussions directly shaped the work plan, ensuring that design and development progressed in tandem.
Problem Statement
ZEIL’s initial mobile-focused design system did not scale with the team’s growth or product expansion. This resulted in design inconsistencies, inefficient collaboration, and friction for designers, developers, and marketing. We faced increased onboarding time, difficulties in scaling to web, and frequent misalignment during design-to-dev handoff. A modern, unified, and scalable design system was crucial to resolve these pain points and enable seamless growth.
Business Challenges
Wasted time and inefficiencies due to inconsistent designs and poor designer-to-developer handoff.
Risk of over-engineering the design system, making it too rigid and slowing down startup agility.
Difficulty balancing the need for consistency with allowing enough creative freedom for innovation.
Our Product Users
Primary
Designers: The main daily users of the design system, responsible for creating, iterating, and maintaining UI/UX assets within the established guidelines.
Developers: Direct recipients during designer-to-developer handoff, implementing components, following standards, and ensuring product consistency across web and mobile.
Secondary
Product Managers: Rely on the design system for project oversight, rapid prototyping, and ensuring alignment with business and user goals.
Marketing & Brand Teams: Leverage the system to maintain brand consistency across collateral and communications.
New Hires/Onboarding: Benefit from clear documentation and standardized practices, leading to faster and more effective onboarding.
Discovering The Problem
Discovering The Problem
Throughout the design system overhaul at ZEIL, I prioritized open, ongoing collaboration with both designers and developers. Regular conversations, workshops, and retrospectives were essential in uncovering real pain points and ensuring the new system would truly meet the needs of its daily users.
By engaging closely with designers, I learned about their challenges around maintaining visual consistency and speeding up iteration. Developers provided critical technical insights on implementation hurdles and inefficiencies in existing handoff processes. This bi-directional feedback shaped our approach, fostering a solution rooted in practical realities rather than theoretical ideals.
"We kept rebuilding the same components from scratch, which just slowed us down and made things messy."
In addition to developers and designers, I conducted focused discussions with product managers, marketing, and onboarding team members to better understand their experience with design workflow and system gaps. These conversations revealed unique frustrations and areas where a unified design system could make their jobs easier.
Discovering The Problem
Primary User Pain Points
Designers
Multiple, inconsistent versions of the same components cause confusion and extra work.
Time wasted searching for correct assets or recreating components due to lack of a centralized system.
Presence of legacy and outdated designs creates uncertainty about current standards.
Inefficient and error-prone designer-to-developer handoff leads to frequent revisions.
Developers
Often forced to build components from scratch because reusable elements are missing or unclear.
Misalignment between design specs and implemented code creates bugs and slows delivery.
Documentation scattered across tools and out of date makes finding reliable design references difficult.
Lack of a single source of truth and version control complicates reuse across platforms.
Discovering The Problem
Secondary User Pain Points
Product Managers
Difficulty tracking design progress and ensuring consistency across teams.
Challenges aligning design outputs with product and business goals due to fragmented workflows.
Marketing & Brand Teams
Trouble maintaining consistent brand presentation without a unified design framework.
Hard to access up-to-date assets quickly for campaigns and communications.
New Hires / Onboarding
Steep learning curve caused by inconsistent or incomplete documentation.
Slower ramp-up time due to unclear or scattered design system guidelines.
Design Audit
Following the detailed identification of pain points from primary and secondary users, we performed a comprehensive design audit to objectively assess the existing state of ZEIL’s design assets and systems across platforms.
The audit catalogued every UI component, color palette, typography style, icon, and layout pattern present in both mobile and desktop products.
It revealed widespread inconsistencies and duplication, including multiple versions of the same components floating across files, outdated legacy designs still in use, and scattered documentation with conflicting guidelines.
The audit also uncovered gaps in design coverage, particularly in standardized components and cross-platform alignment, which led to inefficiencies and communication breakdowns during development.
Through this audit, we gained a clear picture of what needed consolidation, retirement, or redesign, providing an essential foundation for the system rebuild.
This objective snapshot reinforced and validated the pain points voiced by the teams and helped prioritize the scope and focus of the design system overhaul.
Defining the Solution
Armed with insights from user pain points and the audit, we defined a clear, targeted solution for ZEIL:
1
Create a unified design system serving as a single source of truth for all teams.
2
Build on the Material 3 UI framework customized for ZEIL’s brand and cross-platform needs.
3
Structure the system to use consistent component names and tokens across desktop and mobile with platform-specific behavior adaptations.
4
Provide clear, developer-focused documentation and foster ongoing collaboration to enable smooth handoffs and scalability.
Our Design Systems
ZEIL Core
Unified palette, typography, icon system, spacing, and motion tokens for all products. This is not only used by the UX team, but also by marketing for assets and landing page designs.
Typography
We kept it simple, clear names for everything like Title, Body, Link, Button. Headings flex a bit for mobile but your content always looks and reads the same. Easy on the eyes on any screen size.
Iconography
We chose Lucide icons, which were clean, recognizable, and friendly for devs, especially on Flutter. Every screen, same visual story.
Colors
From subtle hover to satisfying press, every shade was crafted and checked until it passed serious accessibility tests WCAG AA and AAA or bust. No more guessing if a link is clickable or legible.
ZEIL Desktop and Mobile Design Systems
Building on ZEIL Core, we developed distinct but parallel Desktop and Mobile Design Systems, ensuring a unified brand experience while delivering behaviors and interfaces optimized for each platform
ZEIL Desktop Design System
Foundation: Inherits all tokens (colors, typography, icons, spacing) and core principles from ZEIL Core.
Component & Page Structure: Follows consistent naming used throughout ZEIL; developers and designers always know exactly which asset they're working with.
Desktop Patterns:
Modals: Rendered as classic centered pop-up dialogs with overlay and keyboard accessibility.
Navigation: Multi-column layouts, hover-activated menus, detailed tooltips, rich table interactions.
Interaction Optimization: Designed for mouse/keyboard input, including focus states and shortcut support
ZEIL Mobile Design System
Foundation: Shares all Core tokens but adapts scale and spacing for mobile readability and ergonomics.
Component & Page Structure: Mirrors the Desktop system in component/page names for consistency and code/resource sharing.
Mobile Patterns:
Modals: Implemented as bottom sheets or full-screen overlays sliding up, reflecting native mobile conventions.
Navigation: Bottom navigation bars, swipeable menus, simplified top-level navigation.
Interaction Optimization: Larger touch targets, gesture support, minimal hover/focus states.
Building the Library
Atomic & Modular Approach
Tokens → Atoms (colors, icons, text sizes) → Molecules (buttons, inputs) → Organisms (cards, toolbars).
Impact
Rolling out the ZEIL design system was all about making adoption as smooth and practical as possible. Clear, centralized documentation and an accessible component library allowed designers, developers, and stakeholders to dive in right away with confidence.
Impact
Key Learnings
Design Systems Matter!
They don’t just help designers. Everyone works faster, bugs drop, stress goes down. Specs are clear, QA is a breeze, and devs actually enjoy the handoff.
It Helps Everyone
One system means less confusion and way fewer “Wait, which button?” moments for product folks, devs, and QA. Things just work better together.
One Change, Everywhere
Updating a component or style just once automatically updates it everywhere it’s used, no more hunting down duplicates or fixing inconsistencies. This reduces design and dev time, speeds up iterations, and keeps the product cohesive.
Related Projects
