Garmin Connect Design System

Project

When I came on board at Garmin, their baseline design system had been created and used to manage both iOS, Android (both light and dark modes) and web platforms as well as their speciality app off-shoots. The first version of the design system was generally thought to be untrustworthy or overly simplistic. It was my job to improve design and documentation as well as foster overall adoption of the design system. Through iterative sprints, I work within the feature teams to support their design decisions and conceptualize the future of Garmin’s design language.

Involvement

The Garmin design system was previously maintained in Sketch and Abstract. One of my first duties was rebuilding the design system in Figma. This required extra research to ensure that the integrity of the designs as well as the design intent was upheld or improved upon in the new tool. This gave me great insight into the overall design language and helped me to catalog specific components or patterns that could use improvement.

As the tool transition period started to come to a close, I introduced an optional, weekly meeting for the team to ask questions relating to Figma as well as contribute to discussions around the design system. Presenting the many Figma pages of the design system became a weekly practice and gave the team more insight into the system, fostering trust and collaboration.

To combat the team’s distrust of the system, I focused on component and pattern documentation which the system lacked. I researched and wrote general rules for components and unearthed legacy information held by some of the more tenured designers to make documentation more accessible for the larger team.

I became responsible for creating weekly meeting agendas with the design leads to audit individual components and patterns. My role in these meetings drove decisions that ultimately led to improvements in the system. Decisions made in that meeting were then translated into the design system and then presented back to the larger team as they were completed.

Components & Patterns

So far, the design system has been a means of documenting what currently exists as an artifact.

That’s where I came in.

I worked to refine our documentation so that the system takes a more proactive approach and can illustrate the expected intent of a component or pattern. Each component is designed and stress-tested in real scenarios so that the design team can trust what they are using.

Accessibility

Garmin started considering accessibility in early March of 2021. We strategized how to improve our charts for users with visual disabilities. I tested our existing color palette for compliant color contrast ratios and defined acceptable color combinations (about 2,300 combinations)! I worked with our copywriters to strategize how we would capture meta labels, focus order, and documentation. This is still very much in process and has been a collective effort within the design department and development partners to reach WCAG standards.

We are currently working on a color token perspective with our development partners that will not only help us to have a singular color library across the Garmin portfolio but will also address color specific accessibility concerns. The color token library perspective can be found here.