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