Design System

I designed and implemented a system to improve the efficiency and scalability of an existing UI. This system reduced redundancy and ensured visual consistency across different pages and platforms.

Client:

Service NSW

Figma

Tools:

Website - B2B Notification Portal

Product:

Role:

UX Product Design

Year:

2023

DISCOVER

The Problem

The UI development faced delays and increased in complexity as the project evolved due to a fragmented design approach. The absence of organised components, inconsistent UI patterns, and the duplication of design efforts had resulted in a tedious, error-prone process, ultimately affecting the productivity of designers and engineers. Ultimately, this led to miscommunication and discrepancies in the final product.

I initiated a comprehensive research task to construct a design system to address this. My methods included:

Comparative analysis of established design systems
Team interviews to understand pain points
Audit of existing UI components and patterns

Tools used: Figma for UI auditing, Miro for collaborative research boards

Comparative Analysis

To address the escalating complexity and inefficiency in our UI development process, I initiated a comprehensive research task aimed at constructing a design system. This research involved the comparative analysis of several existing, well-established design systems, including those from Google, Apple, Atlassian, and Shopify.

DEFINE/IDEATE

Problem statement

Based on my research, I formulated the core problem statement:

"How can I streamline the UI development process to enhance efficiency, communication, and consistency between designers and engineers?"

Absence of organized components
Inconsistent UI patterns
Duplication of design efforts
Miscommunication between designers and developers

Challenges:

Create a single source of truth for components, patterns, and styles

Improve scalability for future iterations
Enhance consistency across the platform
Streamline the design-to-development handoff process

Benefits:

DEVELOP

Scalable Prototype

With our goals in mind, I led the architecture and construction of a Figma component library design system. I followed atomic design principles to ensure scalability, using nested components and component properties to simplify variants.

Key elements of the design system included:

In-page annotations for documenting components
Branding guidelines (colors, typography, logos)
Spacing guidelines
Layout grids
Larger components for quick production builds

Tools used: Figma for component library creation

Throughout the development process, I conducted regular check-ins with both designers and developers to gather feedback and iterate on the system. This collaborative approach helped ensure buy-in from all stakeholders and addressed potential issues early on.

Reflections and Learnings

Creating this design system was a challenging but rewarding experience. Some key takeaways include:

Balancing progress with inclusivity: It was crucial to develop processes and system guardrails that allowed us to move forward while ensuring designers felt involved in visual decisions.
Scalability is key: As our product grew, we needed to ensure the design system could evolve with it. This required forward-thinking and flexibility in our component architecture.
Collaboration is essential: Regular communication and feedback loops with both designers and developers were vital to the success of the project.
Documentation matters: Clear, comprehensive documentation of components and usage guidelines proved invaluable for team adoption and onboarding new members.

This project allowed me to leverage and enhance my skills in:

UX research and analysis
Design system architecture
Component-based design
Cross-functional collaboration
Project management

Tools mastered: Figma, Miro, Jira

"How can I streamline the UI development process to enhance efficiency, communication, and consistency between designers and engineers?"

DELIVER

Impact

The implementation of our design system had a significant impact on our team's workflow and output:

Reduced coding time
Improved design-to-development handoff
Streamlined testing processes
Enhanced design consistency across the platform