Design System for 99designs
Building a Design System for one of the largest design marketplaces.
CHALLENGE
How can we help product teams improve their efficiency and collaboration, create shared ways of working, and design products right from the start with consistency, ease, and accessibility in mind?
OUTCOME
I created a single source of truth that dramatically improved the consistency, efficiency, collaboration, accessibility and scalability of the product, positively impacting designers, developers and user experience.
MY ROLE
To avoid inconsistency and speed up the design and development process, I created a unified library of UI elements and components that different teams could readily use.
01 OBJECTIVE or, why was the Design System needed?
To ensure consistency
UI library of styles, colours and components was created to achieve consistent visual appeal.
To streamline development
The aim was to improve collaboration with developers, save time creating assets that already exist, deal with inconsistencies, and underutilise code reuse.
To ‘future proof’
There was a need to create a system that was scalable, usable, and accessible to shorten the onboarding process for new team members and make the product easily adjustable for future technologies.
02 INVENTORY AUDIT, WHY?
Conducting an inventory audit ensures that the design system is built with a clear understanding of the current landscape, what is reusable, what is redundant, and what needs improving, leading to more effective and efficient design practices.
03 CONSISTENCY
One button to rule them all :)
By creating component properties, I created a UI library that can be easily customized without losing consistency.
04 TOKENISATION
Primitives
By creating tokens, I made a design system easier to adapt to different brands or user preferences.
Semantic Tokens (Light/Dark Mode)
I created variable collections and different modes to design a light/dark interface, which is often used to improve user experience, accessibility, and even performance. This feature is valuable in modern digital products.
04 RESPONSIVE DESIGN
Offering seamless experience on any device.
Variables helped create different breakpoints, making the website responsible and compatible with various screen sizes.
05 DOCUMENTATION
Single source of truth for all team members.
What is the value of incorporating documentation into a design system? What did I achieve?
Incorporating documentation into a design system made the entire product development process smoother, more predictable, and easier to manage, achieving consistent user experience, improving collaboration, efficiency, scalability, quality control and accessibility.
06 OUTCOMES
Significant improvement in efficiency & user experience.
-42%
Development time reduction up to 42%
-25%
Up to 25% decrease in development costs.
-40%
40% reduction in time spent on communication and coordination between development and design teams.
+20%
Increase in user experience by up to 20% due to improved consistency of the UI.
-50%
Product release time reduced by 1/2.
