Map Labs
Compass Design System and Style Guide
The user experience showed signs of inconsistency, making interactions less intuitive at times. Without a unified system, users encountered varying patterns and limited feedback, which affected clarity and ease of use. To better support users with a more consistent and predictable interface, we decided to rebuild our design system and style guide, focusing on cohesiveness, effectiveness, and the ability for it to evolve.
Before diving in, here is a…
Logistical overview:
-
Project type:
Full time
-
Project length:
4 Months (January-April 2024)
-
Role:
Product Designer
-
The team:
Me, 1 PM, & 2 Engineers
-
Platform:
Responsive Web
-
Contraints:
Time, Material Design 3, & resources
I started by doing an audit of our design tokens and documenting…
UI discrepencies and/or errors:
I colour-coded the comments in the UI audit to indicate update priority, identify bugs, and highlight follow-up questions.
Legend:
Based on the design audit and the business we decided on the…
Style Guide and Design System Principles:
The product should be trusted. A cohesive design system ensures uniformity in visual elements and interactions across different products or platforms. This consistency strengthens brand identity and improves user experience.
Cohesive:
Effective:
Optimize daily product use. An effective design system is deeply rooted in understanding and addressing the needs and behaviours of its users. It prioritizes usability and ensures that the user experience is intuitive and satisfying.
Evolving:
Design with scalability in mind. As the product grows, the system can accommodate new features and requirements without losing its core identity and functionality.
With our current design system and principles in mind, we started to create and collaborate on…
Decision records and spikes…
The following are links to a few examples of decision records and spikes we collaborated on:
I began with the style guide, designed the smallest tokens, and expanded the design system. To stay ahead of engineering—while they worked in parallel—I created a...
Design Schedule…
Creating the New Style Guide and Design system was a lot of work, but worth it in the end, as it made the product more user-friendly and the product development process more efficient.
