Create a design system for an existing digital product to establish a cohesive visual language and a set of design rules. The system will serve as a framework for designers and developers, ensuring consistency, scalability, and efficiency across the product’s interface.
Design System for MetService
August 2024
Constraints
3 weeks
University project
Role
Analysis
UI Design
Prototyping
Tools
Figma
The Challenge
The Outcome
I created part of a cohesive design system for MetService, detailing their values, design rationale and usage, and example components.
I chose to examine and recreate their use of icons, typography, colour, buttons, search functions, and notifications.
Key Learnings
How important design systems are for connecting designers, developers, and cross-functional teams, ensuring consistency and collaboration.
They are complex and require thoughtful rationale behind design decisions and clear documentation on how and when to use specific components.
A successful design system must be adaptable. They function as a living document that evolves over time to accommodate new insights and user needs.
Process
I began by researching and evaluating popular design systems from Apple, Uber, and Google. This helped me gather an understanding on:
1. What should be included
Give visual examples, establish a shared language.
2. How systems are structured
Organised by foundations, styles, components, etc.
3. The level of detail needed
Include clear rationale and guidelines for when and how to use components/design decisions.
Apple
Uber
Challenges
Initially, I assumed the design system would be mostly visual with minimal text. But after analysing other systems and delving deeper into the project, I realised that usage guidelines are just as important as visuals. Including detailed rationale ensures the system is actually useful and maintains consistency when it is implemented.
While analysing MetService's interface, I noticed some inconsistencies:
To address this,
1. The typography felt unstructured, making it difficult to establish a clear hierarchy.
I worked to identify a solid typographic hierarchy through tracing screenshots. Though with more time, I’d refine this further.
2. The icons differed between mobile and web viewpoints, with variations in stroke weight and grid alignment.
I worked on refining the icon variations to maintain consistency while honouring variations optimised for different viewpoints, and implemented a grid system to follow when creating icons.
Mobile Icons
Desktop Icons
What I'd Do Differently
If I had more time, I would refine several aspects of the design system to improve clarity, usability, and efficiency:
Use the inspect element for typographic analysis
Instead of manually identifying typography through screenshots and letter tracing, I could have leveraged browser dev tools to inspect font sizes, weights, and spacing more accurately.
Refine the typographic hierarchy
While I established a structure, I recognise that further refinement is needed to distinctly define when and how specific typographic hierarchies should be applied.
Improve icon usage guidelines
I would clearly describe icons in terms of their usage and style, making it easier for designers and developers to implement them correctly.
Test the prototype
Since this project focused mainly on UI and prototyping, no testing of the prototype was done. If I had more time, I’d run usability tests to see how well the design system supports real-world application.
Final Thoughts
This project gave me a deeper appreciation for the role of design systems in bridging the gap between designers and developers. While it wasn’t UX heavy, it reinforced the value of structure, consistency, and adaptability in design.