Compass Design System
Collection of foundational elements from the Compass design system.
Project details
Date: Q4 2022 - Ongoing | Client: Zenni
Role: Senior Product Designer | Tools used: Figma, Figjam, Storybook, Bootstrap, React Native
Skills practiced: UI Design, UX Research, Technical Writing, Workshop Design, Stakeholder Management
Project overview
During my tenure at Zenni, I have worked on three design systems across two platform migrations and a major brand refresh integration. Our latest and most mature iteration of the design system is named Compass. We chose this name, because our goal is to empower designers and developers to use the design system as a tool to navigate projects with confidence.
Project goals
As Product Designers first and foremost, we keep our users’ needs front and center. Through 1:1 interviews, quarterly surveys, and a public Slack channel, we collect ongoing feedback for improvement. Below are a few of our main users.
User Personas
Alex: Product Designer
“I just want to design the user flow without having to worry if my buttons are the right shade of teal.”
He is frustrated by reinventing common UI elements and wants to focus on solving core user problems rather than pixel-perfecting basic components.
Rachel: eCommerce Merchandiser
“How can I launch a new landing page without waiting for UX or Dev?”
She feels blocked by the dependency on technical teams and wants the autonomy to create and launch marketing campaigns quickly.
Sid: Front-end Developer
“I'd rather be building a cool new feature than another landing page.”
He is frustrated with requests for fast-paced turnaround on redundant work, and his goal is to build features faster with reliable, pre-built components.
Aki: Graphic Designer
“I need to make sure our latest visuals reflect the brand, but I'm not sure what the right specs for this widget are...”
She struggles to translate brand assets to the digital product consistently and wants clear templates to ensure consistency and efficiency in asset deliverables.
Scope of work
As Senior Product Designer on the design system, I provide the following services:
Build design token, component, and pattern libraries compatible with NextJS and Bootstrap logic
Write clear, technical documentation with specifications and guidelines
Provide design consultation to troubleshoot implementation issues
Host educational workshops for existing teammates and onboarding for new hires
Click on an image below to expand it.
Services offered deep dive
1. Component and pattern library
Successful adoption relies on effective training and documentation. To ensure alignment, we implement tools such as a Storybook widget library, Github tokens repository, structured Confluence documentation site, and tidy Figma libraries based on our Bootstrap framework.
We design, build, and maintain a comprehensive library of reusable UI components and foundational patterns. This includes everything from buttons and inputs to more complex components like tables and navigation. Our goal is to provide robust, accessible, and well-documented building blocks.
2. Documentation and guidance
We don't just provide the components; we provide the instructions. We create clear, practical documentation that covers everything from design principles and voice-and-tone guidelines to technical implementation details for each component.
3. Onboarding and training
To ensure teammates can get up to speed quickly, we provide structured onboarding sessions and ongoing training workshops. These sessions cover our design and brand principles, how to use our Figma libraries, and the fundamentals of implementing components.
4. Design consultation
We host regular office hours where teammates can drop in to ask questions, get feedback on designs, troubleshoot implementation issues, or brainstorm solutions for complex UI challenges. We broadcast a “gates open, come on in” message to keep teams unblocked and confident in using Compass.
5. Contribution and governance model
The design system is a living product that grows with our needs. We've established a clear process on how to contribute new components and patterns back to the system. We facilitate this process to ensure all contributions meet our quality and accessibility standards.
Final results
Compass Colors Guide
Compass Typography Guide
Compass Widgets Guide
Compass UI Kit
Confluence Documentation Site
Results and achievements
Figma Wizard, Bridge Builder, and Blithe Spirit are a few of the affectionate nicknames I've earned from my coworkers. I'm honored by them, as they reflect the collaborative spirit and dedicated work ethic I believe are essential for building an effective design system.
NextJS
Storybook
Future improvements
We are excited to keep scaling our success next year.
Credits
Senior Product Designer: Meghan Martin
Lead Product Designer: Leif Swensen
Product Designer: Imahni Johnson
Technical Program Manager: Natasha Tran