Garmin.com eCommerce B2C Compare Feature
While the Compare feature on Garmin.com category pages in the eCommerce purchase few was an essential step for users making purchase decisions, it was not mobile compatible, accessible, intuitive, or integrated with the Design System. I redesigned this feature to make the entry point more prominent, create a streamlined mobile experience, integrate accessibility standards, and tie the product into the Design System for consistency and scalability.
The Problem
Many of Garmin’s products seem the same, and there was no clear way for users to locate information about the differences, causing purchase confusion, returns, and customer support calls. While a “Compare” feature existed on Garmin.com shopping pages, it was not visible enough for users to find it. If they did, the experience was so outdated that it was not pointing people to the information they needed. In addition, it had zero mobile compatibility, despite the fact that most customer shopping happened on mobile. It did not meet accessibility requirements, and it did not utilize any of the components or patterns from the design system.
Low-fidelity wireframes
The Impact
Overhauling the “Compare” experience increased engagement, drove mobile usage, reduced the time customers spent in the shopping process, and boosted sales. It also improved accessibility in the eCommerce flow and integrated the experience with the design system for consistency and future scalability. Last, the improvement of the compare feature enabled it to be localized across many countries where it had not been originally available.
Low-fidelity mockups in design iteration phase
The Process
I utilized existing Design System components and quickly spotted easy enhancements that could be made to streamline navigation with minimal development resources. I served as the hub for implementing feedback from 6 product teams from 6 business verticals to weave each team’s unique needs and goals into one seamless experience for users. I also drove cross-collaboration with architects, creative, development, marketing, and content. I created unique navigation solutions for multiple types of users including browsers as well as those looking for specific information. I integrated the product into the broader eCommerce flow by analyzing the flow as a whole and providing multiple entry points.
Final high-fidelity mockups
My Role
As Senior/Lead Product Designer, I created wireframes, mockups, user flows in quick iterations through multiple rounds of feedback from many teams, including the 6 different product teams, marketing, and creative. I provided detailed requirements, specs, and visuals to development teams to enhance components. I also provided detailed hand-off to content authors to make the set-up and future maintenance of the product as efficient as possible. As the owner of the Design system, I created visuals, documentation, and education for the enhancements made to the components. Last, I collaborated with international teams for to organize the translation and localization of the product across 35 countries and languages.
Final high-fidelity mockups
Design System Integration
I utilized existing global Design System components wherever possible for this product. To solve the specific problems of this product, I enhanced several components with minimal development resources.
Sub-navigation and Vertical Navigation Components: The sub-navigation and vertical navigation components were enhanced to include more functionality to support the complex navigation needs of Garmin Technology. This use case fueled the updates to the global Design System component to be used across other products.
Card Component: The card component was enhanced with several additional variations, colorways, states, and functionality to accommodate Garmin Technology’s complex needs, including all layout variations of the card grid to accommodate the desktop side nav. This resulted in a much more robust and versatile global card component.
Base Container Component: The base container component was enhanced to allow for additional functionality and variations within the already well-established grid system to allow the complex navigation within Garmin Technology to flow seamlessly into the existing spacing and responsive structure throughout Garmin.com.
