Design System

Created a Figma design system and UI for a new brand, ensuring consistency and efficiency.

Project Overview

Industry. E-commerce | Marketplace | Automotive

Objective. Create a scalable, cohesive, and accessible design system based on the brand guidelines that would streamline design and development efforts while maintaining brand consistency across various digital products.

Role & Responsibilities.

  • Conducting research on industry best practices and competitor design systems.
  • Defining a set of core design principles.
  • Creating a component library and guidelines.
  • Ensuring accessibility and usability compliance.

Impact.

  • Faster design-to-development handoff due to reusable components.
  • Improved collaboration between designers and developers.
  • A more consistent and accessible user experience across all products.
  • Scalability, allowing the brand to expand without design inconsistencies.

Challenge

The design system needed to align with the general brand guidelines provided by the marketing team while adhering to eBay Playbook.

The existing product required rebranding within constraints of time, scope, and feasibility.

A lack of a unified design language resulted in inconsistent user experiences.

Research & Strategy

Competitive analysis: Studied leading design systems like Material Design and eBay Playbook.

User research: Gathered insights from stakeholders and developers to understand pain points.

Accessibility audits: Ensured WCAG compliance from the outset.

Stakeholder interviews: Aligned the system with business goals and brand identity.

Defining Design Principles

Consistency: Standardised UI components and interactions.

Scalability: Designed components to accommodate future growth.

Accessibility: Ensured usability for diverse users.

Efficiency: Optimised workflow for designers and developers.

Building the Component Library

Typography: A hierarchical text system for readability and brand consistency.

Colour Palette: A primary, secondary colour scheme with accessibility in mind.

Buttons & Forms: Standardised input fields, buttons, and form elements for uniform interactions.

Grid System & Layouts: A flexible, responsive grid system to ensure consistency across screen sizes.

Atomic design. Complex components built from smaller and simpler ones.

Ensuring Accessibility

Colour Contrast Optimisation: Used contrast checkers to ensure all text and UI elements met WCAG AA/AAA standards, improving readability for visually impaired users.

Alternative Text for Images: Provided descriptive text alternatives for all images and non-text content to support screen reader users.

Keyboard Navigation & Focus States: Designed clear and visible focus states for all interactive elements, enabling seamless navigation without a mouse.

Accessible Form Elements: Optimised form inputs with clear labels, proper field grouping, and meaningful error messages to assist users with cognitive or visual impairments.

Lessons learned

Early stakeholder involvement ensured alignment with business needs.

Continuous iteration kept the system relevant and evolving.

Maintaining the design system is the biggest challange over time and requires continues efforts to keep it up to date.