Sean Berger Product Designer

Map for Garmin Connect

Product Design Case Study by Sean Berger

Garmin Connect is a fitness app that aides runners and cyclists in performance training. The map feature allows these endurance athletes to create routes for upcoming workouts and then sync directly with a Garmin wearable or bike computer.
Product design screenshot of the Garmin Connect map. Design work from the design portfolio of Sean Berger.
I led strategy and design efforts for the project. I organized and led collaborative discussion with design peers. I partnered with the product owner to execute his vision for the feature. As designs came to life, I partnered closely with my teammates in engineering until the new implementation was complete.

My Contributions

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

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.

Product Goal

Redesign the existing map for Garmin Connect so that runners, cyclists and other athletes can easily find and download routes, roads and trails for their workout routine.

I established three personas for design thinking.
Side profile of a person running on a sunny day. Image source: Unsplash.


“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.


“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.


“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

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
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.
User experience 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.
User experience 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.
User experience 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.
This was a successful product release – for the first time ever, users could browse nearby route suggestions from the community, take advantage of a full-screen map and explore Garmin’s popularity data.


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.

Sean Berger is an expert-level product designer
About Me

I consistently exceed consumer expectations with intuitive user experience design. I build relationships with business partners and drive cross-functional teamwork to deliver exceptional outcomes. If you have an opportunity or project you’d like to discuss, send me a message.