Design System
Create and document a product design system with guidelines and frameworks for designers and developers to reference.
Expertise
Project lead, UX Designer
Tools
Figma, Confluence, Storybook
Deliverables
Component library, Documentation
Overview
A design system comprises reusable components and patterns. Clear standards guide these components, enabling their assembly to construct various applications. Maintaining a well-maintained component library is crucial as it saves valuable time for upcoming projects.
Having a Design System proves essential as it bridges the gap between designers and developers who work on multiple products. Often, they recreate or duplicate work done by other teams, wasting time and money.
Design Systems aims to solve:
For Business and Product
-
Save time and money while bringing solutions faster to the market.
For Designer
-
Reduce design debt.
-
Enable consistent design and branding across products.
-
Focus on enhancing the experience and improving user experience.
For Developer
-
Standardise front-end development across different projects with a reusable set of components.
-
Save time by building new apps efficiently.
-
Reduce maintenance overhead.
-
Facilitate easier onboarding for new team members.
-
Focus on implementation.
The Problem
When I joined NextGen, it underwent rapid growth. As a designer, I frequently encountered people with different ideas about design decisions without established principles.
Both designers and developers grew frustrated with creating duplicate components, slowing their progress. Users struggled to grasp multiple UI patterns, which worsened as the product expanded.
Due to the need for more budgets or resources for a dedicated design system team, we incrementally developed new components and styles.
Although initially met with dismissal and skepticism, we persisted in creating a design system. After multiple meetings, the business finally gave us the green light.
My Role
Over six months, this project evolved by involving other designers and developers within NextGen.
I initiated and led the creation of ADL, the ApplyOnline Design System, and collaborated with a team of four, including two developers and one designer. Conducting extensive research, I sought to understand how other companies approach solving similar problems and how we could incorporate those learnings into our team. Larger companies with complex and well-documented design systems inspired and guided my team and me.
Playing a hands-on role, I spearheaded the design system direction, produced many components, and presented the interface documentation to various stakeholders.
Our design principles
We established ten design principles. These principles guide us toward our desired objectives.
01.
Keep Users in Mind
Design with the user journeys, context and their abilities in mind.
02.
Define The Problem First
Understand the problem first before we jump into designing solutions.
03.
Collaborate
Invite people from different roles to co-design. Incorporate regular feedback loop from our users.
04.
Be Consistent
Make sure there is one way to do something and not three different ways to do the same thing.
05.
Be Agile
Iterative and incremental. Think-Make-Check. Build-Measure-Learn.
06.
Easy To Use
Design products that feel easy and intuitive.
07.
Keep It Simple
Keep our designs simple. Do not overwhelm users with excess information.
08.
Visual Clarity
The user interface should be easy to scan. The visual hierarchy should make sense to the user.
09.
Strive For Speed
Fast to load. Quick to use. The rapid progress of application from entry to submission.
10.
Choice Of Language
Use terminology we are sure our users would understand.
The Process
I began by auditing all components, patterns, and features our products currently utilize. This involved splitting and categorizing the list into Foundations, Components, and Patterns.
-
Foundations
These are the fundamental building blocks of all components and layouts.
-
Components
They represent the interactive building blocks of our design system.
-
Patterns
These are reusable combinations of components that frequently appear across our products.
Research
During my research, I delved into articles, studied design guidelines from Google, IBM, and Atlassian, and connected with other designers who had faced similar challenges. This research aimed to explore visual language and identify core components across products.
Inventory
To better understand the current state of our existing design ecosystem, we began by conducting a UI Inventory of every UI element in our application. My team members and I captured screenshots of each UI element in the product. This inventory process enabled us to identify all discrepancies and inconsistencies in our product, highlighting the necessity for a design system.
Inventory of every UI element in our application
Design Exploration
We decided to focus first on the foundational elements of our design system, such as Typography, Colours, Spacing etc., and then move on to more complex elements. We created components from scratch since we switched from Axure to Figma.
-
For Responsiveness, we utilised Figma's auto-layout feature to make our components responsive.
-
We ensured that all states, including hover, focus, filled out, error, and disabled states, were covered in our design.
-
The variants feature in Figma made it easier to maintain, browse, and swap components.
-
Accessibility standards were integrated into each component, adhering to WCAG AA guidelines.
Review & Documentation
We prioritised the foundational elements of our design system first, such as Typography, Colors, Spacing, etc., before tackling more complex elements. We built components from scratch after transitioning from Axure to Figma.
Documentation in Confluence
Component Library
After approval of the Figma components, we transfer them to a Figma Components file, which serves as a shared library of assets that our team can utilise by dragging and dropping while working on their designs.
ADL - Figma component library
Design Tokens
I acknowledged the significance of design tokens as a potent tool for preserving consistency and coherence across our products. Utilising design tokens, I guaranteed that every design element adhered to the established visual language and design principles, irrespective of the platform or technology used for implementation.
The benefits of incorporating design tokens into the Design System were numerous:
-
Design tokens functioned as a single source of truth for design attributes.
-
Utilising design tokens streamlined the process of making changes to design elements.
-
Design tokens maintained scalability as our organisation and product offerings expanded.
-
Design tokens promoted improved cooperation between designers and developers.
By harnessing design tokens, the Design System stayed agile, adaptable, and prepared to meet the ever-evolving needs of our users and the design landscape.
Storybook
We chose to construct our new repository from the ground up using Storybook, a tool that enables the creation of code-based components usable across different platforms and devices.
With Storybook, I could test and showcase each component in isolation, ensuring consistency and efficiency. The interactive showcase facilitated the exploration of various component variations, while automatic documentation simplified understanding and collaboration.
The integration of Storybook significantly streamlined the design and development process, culminating in a cohesive and user-friendly Design System.
Outcome
A total of 30 components were launched and continue to grow. This project taught me several things. It allowed me to study some of the best design systems currently in use, refine my Figma skills, and collaborate with and learn from my development team. Initially, there was some hesitation in creating a design system, but it paid off as it allowed the designers to create mockups in a fraction of the time.
Developing ADL enabled us to:
-
Standardise components
-
Enforce design standards
-
Reduce time spent on design and development iterations
-
Enhance user experience quality
-
Create a foundation for building accessible and usable products
Some of our team’s next steps include:
-
Recognising that Design Systems are like living organisms expected to grow with more complex components
-
Incorporating subtle, unobtrusive animations to enhance the user experience
-
Raising awareness across the teams
-
Promoting adoption and contribution to the documentation
-
Customising user experiences based on unique user preferences and needs
As I continue to refine and expand the system, I am excited about its positive impact on future projects and the enhanced user experiences it will deliver.
