Design System

Building a scalable and accessible system for consistency across platforms.

Role

Senior Product Designer

Industry

DS - Product Design

Client

Zonal

Stage 1. Project Overview

The goal was to create a responsive design system that ensured a consistent, scalable, and accessible user experience across both web and mobile platforms. By establishing a shared foundation, the system reduced design and development time while supporting brand identity and usability.

Highlights

30% reduction in design and development time
200+ reusable UI components created
100% WCAG AAA compliance
85% adoption across digital products

Stage 2. Challenges

Needed to support both B2B and B2C platforms with different requirements
Strict accessibility standards were mandatory across all products
System had to scale for future growth and evolving features
Responsiveness was essential for consistent experiences across devices
Required strong alignment between design and engineering teams

Stage 3. Approach

The system was built using Atomic Design methodology, breaking interfaces into reusable atoms, molecules, and organisms that could be assembled into full page templates.

Core Components

Colours: Flexible palette with AAA-compliant contrast ratios
Typography: Modular scale for responsive sizing across platforms
Iconography: Scalable, clean line icons optimised for small and large screens
Buttons and Inputs: Accessible states, large touch targets, consistent hierarchy
Navigation and Forms: Adaptive layouts for mobile and web consistency
Molecules and Organisms: Tooltips, modals, dashboards, and content templates

Stage 1. Project Overview

Highlights

30% reduction in design and development time
200+ reusable UI components created
100% WCAG AAA compliance
85% adoption across digital products

Stage 2. Challenges

Needed to support both B2B and B2C platforms with different requirements
Strict accessibility standards were mandatory across all products
System had to scale for future growth and evolving features
Responsiveness was essential for consistent experiences across devices
Required strong alignment between design and engineering teams

Stage 3. Approach

The system was built using Atomic Design methodology, breaking interfaces into reusable atoms, molecules, and organisms that could be assembled into full page templates.

Core Components

Colours: Flexible palette with AAA-compliant contrast ratios
Typography: Modular scale for responsive sizing across platforms
Iconography: Scalable, clean line icons optimised for small and large screens
Buttons and Inputs: Accessible states, large touch targets, consistent hierarchy
Navigation and Forms: Adaptive layouts for mobile and web consistency
Molecules and Organisms: Tooltips, modals, dashboards, and content templates

Stage 4. Final Implementation

Each page was assembled using the system’s templates and components, ensuring brand consistency, accessible colour and type, and predictable interaction patterns. The design system established a foundation that supported both current needs and future growth.

Stage 5. Outcomes and Learnings

Increased design and development efficiency by 30%
Reduced inconsistencies across products and platforms
Improved accessibility and inclusivity across all components
Strengthened collaboration between design and development teams

Key Learnings

Creating a design system required balancing scalability, accessibility, and flexibility. It highlighted the importance of building for future adaptability, user feedback, and platform-specific constraints.

Future Proofing

The system provides a strong foundation for expansion, including advanced accessibility features, new components, and adaptation to emerging platforms.

Key Learnings

Future Proofing

The system provides a strong foundation for expansion, including advanced accessibility features, new components, and adaptation to emerging platforms.