Compass Design System

The small design system team that I started with in 2019 eventually grew into a larger, solid group of incredible design and engineering managers, product designers, content designers, engineers, and product managers. We accomplished so much and impacted the way everyone worked over the next two years. While I may be showcasing my role, the work you see here is the result of our team’s collective brainpower.

2019 – 2022

One of my first major projects was migrating the tech organization to Figma from Sketch while simultaneously rebuilding our library. We were also defining what a design system is to Compass, providing Figma workshops for our designers and engineers, and determining the best workflow amongst the teams.

The design system at Compass started to become integral to the unification of our digital presence, especially since two of our larger projects was to make Compass ADA-compliant and build our first app for Android devices. Once we fully migrated to Figma, 100% of our focus was on refining, growing, and evangelizing the system. We worked with the tech organization to determine our design system governance process.

I became the lead designer for the iOS and Android systems and worked closely with our principal iOS engineer and several Android engineers in Hyderabad, India. I loved collaborating with them, and a lot of our work started in our Figma Playground files.

It was a place for designers and engineers to work with us on iterating and creating new things. The goal of our mobile design systems was to make sure it spoke the same visual language as the rest of Compass while honoring the native gestures and features.

Because our team worked super fast in the beginning, we deprioritized centralizing documention. Figma was a great starting point to store documentation for the designers, so I created a way to add guidelines to our main Figma files.

It was finally time to find a single home for our documentation. Do we build our own design system site from the ground up or go with another option? We eventually decided to use a third-party vendor called zeroheight to get our site up as soon as possible (time spent on thorough documentation > a beautiful, custom site using up our resources). This was a major team effort, and I was so proud of us!

Next
Next

Compass Mobile Wireframing UI Kit