Sean Berger Design

Opportunity

Users expressed frustration with Garmin Connect's limited map options and cumbersome navigation. These points of friction negatively impacted user satisfaction.

Project Goals

Redesign the Garmin Connect map so that runners, cyclists and other athletes can easily browse and download routes and trail navigation during their workouts.
Product design screenshot of the Garmin Connect map. Design work from the design portfolio of Sean Berger.

Map Redesign for Garmin Connect

Product Design Case Study by Sean Berger

As design lead, I partnered with the product owner to execute Garmin’s vision for a fresh redesign of the existing map feature. Together we defined requirements and iterated on design ideas. I collaborated with teammates in design to define new design standards. I partnered with engineering team members to ensure proposed ideas were technically feasible.

My Contributions

  • Product/UX Design
  • Interaction Design
  • Visual Design
  • Prototyping
 

Garmin Connect is a fitness app that helps runners and cyclists with performance training. The map feature allows these athletes to map upcoming workouts and sync directly with a Garmin wearable or bike computer.

Garmin’s Competitive Advantage

  1. Garmin has one of the largest global data sets of consumer workout activity in the fitness industry.
  2. Garmin can recommend the best roads for cycling or the most popular locations for a run or casual bike ride.
  3. Garmin has sold devices to millions of cyclists and runners. Garmin Connect can send route information directly to these fitness devices.
I established three personas for the project.
Side profile of a person running on a sunny day. Image source: Unsplash.

Ravi

“As a runner, I need to plot a 12-mile run in my neighborhood. I want my Garmin watch to navigate so I can enjoy my workout and music playlist.”

Age Occupation Sport Motivations
23 High School Math Teacher Running To PR in an upcoming marathon
A road cyclist rides on a city street. Image source: Unsplash.

Lauren

“As a cyclist, I want an app that recommends safe locations to ride in my city. I need a product that syncs with my Garmin bike computer.”

Age Occupation Sport Motivations
37 Software Engineer Road Cycling Social connection with her riding group
A male mountain biker pauses on his bike to look right at the terrain of a heavily-forested area. Image source: Unsplash.

Brandon

“As a mountain biker, I want to find popular trails to ride while vacationing near Portland.”

Age Occupation Sport Motivations
46 Illustrator Mountain Biking Physical activity, escape from the office
Before design, I reviewed competitive products from Strava and MapMyRide in addition to popular consumer experiences like Google, Bing, Zillow and Realtor.com.

This was an important exercise that allowed me to identify design patterns that might be familiar to users. Early design iterations accounted for many of the required features, both existing and new.

Low fidelity design for Garmin Map Redesign

Design Showcase & Summary

The new redesign allowed users to discover routes from other users in the Garmin community. Thanks to Garmin's new popularity feature, users could search popular roads and trails for new workout ideas.

Browsing & Filtering Favorites Search Heatmaps Map Preferences Conclusion
Athletes can use filters to find routes that meet the challenge they’re looking for in upcoming workouts. Garmin Connect is a global community, so athletes can browse and search almost anywhere in the world.
UX design featuring filters that allow users to control the content that displays for a map. This animated image features product design work from the portfolio of Sean Berger.
I enhanced the product to add a new favorites feature, so athletes could find and save routes. I teamed up with engineering leads to have new services written in support of the feature enhancement.
UX design which allows users to 'favorite' or bookmark specific list items that interest them. This animated image features product design work from the portfolio of Sean Berger.
I added type-ahead search so suggested locations would display for easy selection.
A user interface that allows users to search locations on a map. This animated image features product design work created by Sean Berger.
I worked with engineering to optimize and assign color to new activity heatmaps.

This data allows athletes to explore popular areas for specific activities. Pictured are two of the many colors we considered in exploration.

A heatmap representing data-driven fitness activity for a specific area on a map. A heatmap representing data-driven fitness activity for a specific area on a map.
Additional preferences gave athletes the ability to customize the display of the map and its content. As a team, we ensured Garmin Connect would save these preferences and filters on return visits to the map.
UX design that allows users to set visual display preferences for a full-screen map. This animated image features product design work created by Sean Berger.

Recognition

Garmin Connect designers and engineers make up a department greater than 250 full-time employees in the United States. Once the redesign was released, my contributions were individually recognized by the department director and management team – my design work was awarded best individual contribution of the fiscal quarter.

What I Learned

I learned what it meant to mature and excel as a contributor for the team. I cared about the final outcome of our efforts. I matured as a leader – I scheduled meetings, partnered with the team to draft requirements, organized design discussions and revised designs when front-end engineers provided collaborative input.

Interactive Prototype

I wrote HTML, CSS and Javascript for this project to illustrate visual design and interactions directly in the browser. My prototype was then leveraged by the engineering team for integration into Garmin’s production codebase. If you'd like to interact with the map first-hand, here’s a link to my prototype.

Let me help you create an experience your users will love.

Sean Berger is a Product Designer

I partner with clients to create intuitive design that exceeds expectations. Let's work together to meet your business objectives and ship something that makes your users happy. Message me on LinkedIn to take the first step.