top of page
Serene Gradient
designsytem.png

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

Portfolio mockup (1).jpg

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.

element-buttons.png
element-menu.png
element-table.png
element-typography.png
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.

preview-dn-ds.jpg
preview-dn-ds.jpg
ds-heroimage.jpg
Portfolio mockup (2).jpg

Reflections and Learnings 

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

  1. 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.

  2. 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.

  3. Collaboration is essential: Regular communication and feedback loops with both designers and developers were vital to the success of the project.

  4. 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

Portfolio mockup (4).jpg

"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

bottom of page