Garmin Design System
I co-built Garmin’s first Design System for the web from the ground up and maintained it independently for several years. I created, enhanced, and organized scalable, reusable components to support the top business priorities for Garmin.com from marketing and product managers.
The Design System significantly reduced the resources required to design and develop each webpage from scratch, resulting in extreme cost-saving tactics to continually improve Garmin’s #1 source of revenue, Garmin.com. My work managing these reusable components greatly streamlined design and engineering processes and team efficiency, established consistent patterns across Garmin’s suite of web products, and ultimately delivered effective, engaging end user experience.
In building and maintaining the design system, I utilized frequent cross-collaboration with product, engineering, marketing, and content. The robust system of 50+ reusable components supported responsive web and mobile experiences, 35 languages, 4 CMS and back-end systems, 7 business markets, and 10+ web products. The components were built to meet AAA WCAG accessibility standards and thoroughly documented with functionality requirements, specs, variations and states. The design system was utilized by countless teams, including multiple engineering squads, creative direction, marketing, content, product managers, designers, international teams, and more.
Colors tab of the Design System
The Problem
When I started working on the Garmin web team in 2016, there was no Design System in place. Designers and developers were creating each webpage from scratch. As a global international company, the brand was not unified in a consistent web experience. There were no processes or workflows in place for creating any unified components or patterns to be reused across pages.
Sample of component list
The Plan
Our UX team planned to build and distribute a global Design System that could be used cross-functionally across teams internationally for consistency, efficiency, and to bring Garmin’s website up-to-speed with the industry.
We needed to create components in line with industry standards to strengthen user mental models by providing users with familiar patterns. We needed to build global components that could be used across systems by all teams. We needed thorough written requirements for all technical aspects and functionality requests for each component. We needed to display every variation, state, and technically-feasible version of every component, show examples in layout, and provide templates for designers to utilize to prep imagery.
We also needed the Design System global components to mirror the code library of developed components one-to-one. We needed consistent component names to be used across all teams, systems, tickets, and project requests. And last, we needed to establish a ticket workflow for effective collaboration between web UX and developer teams to bring all business component needs to fruition on a regular, ongoing basis.
My Role
I helped spearhead the effort to create Garmin’s first-ever Design System for the web. In collaboration with another designer, we created global components and organized a visual system in Figma to house visual representation and written documentation of every component. We collaborated with Information Architects, Front- and Back-end Developers, Creative Directors, Business Analysts, Content Authors, Business Stakeholders, and international teams.
As a Senior Product Designer, I managed Garmin’s Design System by keeping it up-to-date with every new component release. Our team iterated on designs for new components and component updates. I constantly organized and cleaned up the Design System alongside designing products, as every web product utilizes components from the Design System. My work in the Design System is clean, detailed, accurately reflects what has been developed in production, and is set up using Figma’s most useful tools like auto-layout so the components can easily be pulled into mockups by designers and used with efficiency and accuracy.
Global base container component
The Final Product
Garmin’s Design System is now a robust system of 50+ global components organized and documented in detail, including functionality requirements, specs, variations and states, and accessibility documentation. The Design System is utilized by Product Designers, Information Architects, Developers, Creative Directors, Business Analysts, Content Authors, Business Stakeholders, and international web teams.
Examples from the Design System
Card Component
Button Component
Tile Component - Specs
Feature Card Slider Component
Vertical Navigation Component
Forms Component
Educating Leadership
We presented the Design System to leadership to educate them about the significance and value of using a Design system to continually improve Garmin’s website to efficiently meet business needs, effectively utilize talent resources, provide a better experience to our customers, and drive sales.
