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?
We kicked off the project with a candid get-to-know-you-and-your-brand process. Our goal was to hear from each stakeholder to understand as much as we can about the brand, their individual perspective, needs, likes, goals and expectations of the future.
After this interaction we got more details about the competitors, the target audience and the feel the brand needs to convey.
01/ 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.
01/
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.
01/
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.
01/
How to update the design system in the future
A crucial aspect of our design system was establishing a clear and documented process for future updates. We understood that as the needs of our projects evolve, new components, colors, or other design elements might be necessary. To maintain a clean and efficient system, we created a future-proofing strategy similar to the approach used by companies like Spotify and RazorPay.
01/ 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.
01/ 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.
