OVERVIEW
Due to contractual obligations, specific project details have been anonymised. However, this case study showcases the skills employed to establish and maintain a robust design system.
This project involved both web and mobile applications, demanding a consistent experience. I spearheaded the creation of a comprehensive design system from scratch, ensuring efficient design and development workflows while maintaining a unified identity.
01/ INTRODUCTION
Why was a design system required?
The client's product suite was growing rapidly, with multiple teams working on various features and functionalities. This led to a gradual drift in visual design and user experience across different parts of the application. This inconsistency hindered the overall experience.
02/ RESEARCH
How a design system would benefit the client
We analyzed existing design systems of Uber, IBM, Atlassian, and many more. Drawing inspiration from their established approaches using hybrid Atomic Design principles, a well-defined information architecture was made which formed the backbone of the system, ensuring clear organization of all the requirements for the system.
03/ PROCESS
The guiding philosophies to our design system
We analyzed existing design systems of Uber, IBM, Atlassian, and many more. Drawing inspiration from their established approaches using hybrid Atomic Design principles, a well-defined information architecture was made which formed the backbone of the system, ensuring clear organization of all the requirements for the system.
04/
A 4-class approach to tokenisation
To ensure efficient token identification and usage, we implemented a 4-class naming convention. Slightly deviating from the standard convention, this system categorizes tokens by type, property, component, and state. Alias tokens reference base tokens, promoting consistency and reusability. This approach offers several advantages:
Improved clarity, due to descriptive names.
Simplified white label updates, at all levels including the component level.
05/
Building the foundations for the system
To ensure efficient token identification and usage, we implemented a 4-class naming convention. Slightly deviating from the standard convention, this system categorizes tokens by type, property, component, and state. Alias tokens reference base tokens, promoting consistency and reusability. This approach offers several advantages:
06/
From the base to the components
To ensure efficient token identification and usage, we implemented a 4-class naming convention. Slightly deviating from the standard convention, this system categorizes tokens by type, property, component, and state. Alias tokens reference base tokens, promoting consistency and reusability. This approach offers several advantages:
07/ DOCUMENTATION
A collaborative document to keep track of the system
Prioritizing usability, our documentation created collaboratively by designers and developers features a clear version naming scheme (inspired by Spotify) for tracking updates. Alias tokens (core design values) are documented with usage details, and component-specific tokens link directly to them, ensuring a clear hierarchy. This empowers efficient design system adoption by both designers and developers.
08/ METRICS
Quantifying the impact of the design system
The implemented design system has demonstrably improved design and development workflows. While these metrics showcase the quantitative benefits of the design system, the qualitative impact is equally significant. The consistent and unified user experience across projects contributes to a stronger brand identity and a more positive user experience.
09/ CHALLENGES
Just the two of us, building a design system wasn't easy
Building a design system within an agency presented unique obstacles. Unlike an in-house product, we weren't building for ourselves, neither were we experts in building systems, hence a keen understanding of client needs and tight adherence to project timelines were essential. The initial investment of time required for a robust design system often conflicted with the fast-paced nature of agency work. Juggling the system's development alongside the client product presented a significant challenge.
