Map for Garmin Connect

My Role Background Personas & User Needs Early Concept

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

Garmin has one of the largest global data sets of consumer workout activity in the fitness industry.
Garmin can recommend the best roads for cycling or the most popular locations for a run or casual bike ride.
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.

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

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

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

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.

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.

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.