Garmin Design System
I built Garmin’s first Design System for consumer-facing web products from the ground up and owned, governed, and scaled it. 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 joined Garmin, all web-based products were being designed as one-off projects from both a design and engineering standpoint. Designs were generated based off a simple style guide from marketing creative, and development efforts were done from scratch. As a global international company, the brand was not unified in a consistent web product experience. There were no processes or workflows in place for creating any unified components or patterns to be reused across products.
Sample of component list
The Plan
I worked in tandem with another product designer to create a plan to build and distribute a global Design System that could be used cross-functionally across teams for consistency, efficiency, and effective end user experience.
We planned to start with Google material design patterns and the style guide from marketing creative to quickly deliver basic building block components to allow product enhancements to move forward as soon as possible. We created these basic components with global requirements so they could be reused across all products, systems, and teams. We created and visuals and written documentation to outline the requirements, variations, states, and technical feasibility of each component. We also set up Figma libraries, design tokens, and patterns to provide easy-to-use components and templates for designers to quickly utilize to create mockups and prototypes.
We also collaborated with engineering to mirror each Design System component with the equivalent code base so mockups and prototypes accurately reflected the technical feasibility in production, and products could be quickly moved from design to development. We experimented with processes in collaboration with engineering to create a solid, workable flow in a Jira Kanban board to support developer teams’ sprints with clear, specific component requests in tickets. We prioritized tickets weekly based on the most pressing business needs. We met regularly and stayed in constant communication with development teams for an effective, ongoing collaborative relationship as the Design System evolved.
My Role
As Senior Product Designer, I co-built the Design System from the ground up alongside another product designer. We also collaborated with Information Architects, Front- and Back-end Developers and Engineers, Creative Directors, Business Analysts, Content Authors, Business Stakeholders, and international teams. Alongside my UI/UX work on products, I built the most effective and scalable components to support each unique business need for each product request.
When the Design System was in a more established place, I independently managed it by updating the visuals and documentation with every new component enhancement and release. I constantly reorganized and cleaned it up as it grew and evolved to ensure it was as easy as possible to reference and utilize. My work in the Design System is clean, detailed, accurately reflects what has been developed in production. The components are set up using Figma’s most useful tools like auto-layout so the components can easily be pulled into mockups and prototypes by other product designers and used with efficiency and accuracy.
Global base container component
The Final Product
Never fully complete, Garmin’s Design System is an ever-evolving, 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 countless teams across Garmin for brand and product cohesion and a seamless, effective user experience across products.
Examples from the Design System
Card Component
Button Component
Tile Component - Specs
Feature Card Slider Component
Vertical Navigation Component
Forms Component
Educating Leadership
Without UX leadership to drive the Design System, I advocated for the significance and effectiveness of utilizing a Design System for streamlined user experience and cutting business costs by streamlining workflows. I presented a comprehensive overview of the Design System to multiple levels of leadership to promote education about the efficiency and effectiveness of a Design System in meeting business needs, effectively utilize talent resources, providing a better experience to our customers, and significantly driving sales.
