Background: Garmin Connect is a platform that allows developers to create custom widgets and outlooks for their Garmin devices. It enables users to personalize their Garmin wearables, enhancing functionality with tailored applications and features, while also prioritizing KPIs most related to their sport and athletic needs.
Challenge: Compared to Whoop, Strava, and Apple, Garmin Connect lacks a community-focused approach that brings people together and unleashes the inner, competitive athlete in them. Garmin Coach is also much less effective and utilized than similar features offered by Whoop and other competitors.
Solution: This use case identifies current issues with the Garmin Connect app and provides easy to implement solutions focused on connectivity and community, more efficient activity tracking and logging, and a more robust Garmin Coach feature.
.jpg)
Roles:
-
UX/UI Designer
-
UX Researcher
-
Moderater
Project Duration:
-
July 2024
Responsibilities:
-
User Research
-
Wireframing
-
Prototyping
-
Designing/Branding
-
Testing
-
Brand Strategy
Software:
-
Figma
-
Google Sheets
-
Google Slides
-
Freeform (OSX)
Let's see where our design process led us!
User Research
For this use case, I interviewed 3 different individuals who had Garmin wearables. All three happened to be avid runners and had initially purchased their Garmin wearables for more convenient and accurate tracking, but each participant had other fitness/sport interests as well. Two of the participants complained that the social/community aspect of the Connect app was not focused on or emphasized enough, making them feel like competitors such as Strava or Whoop allowed them to socialize more within the fitness world. One of these two athletes noted that she knew about 5 or 6 other people who had Garmin wearables, but they were not suggested connections within the app at all. Another participant noted that that the calendar functionality wasn't easy to navigate and she had no use for it. The full results of the participant interviews can be seen below.
My secondary research was based on competitor blogs, tech articles, social media reviews, and first-hand accounts of Garmin vs. their competitors.
Personas and Updated Goals
Our user persona is Crystal, an avid runner and journalist who loves her Garmin, but struggles with some of the functionalities within the Connect app.
Crystal's User Story: "As a startup founder with a demanding job, I find it hard to socialize, so I'm looking for a way to combine my love of running with my desire to find a community."
Challenge 1: Implement a community-focused hub in the app that includes monthly challenges, expeditions, and a connect page for social interaction.
Challenge 2: Create an app that is seamless and provides a comfortable, understandable user journey.
Challenge 3: Implement more customizable options into the Connect app.
Competitive Audit
Following my user research and interviews, I conducted a competitive audit on direct and indirect competitors. Details of this audit are below.
Storyboarding, Crazy Eights, and Wireframing
I explored the current Garmin Connect app and took notes based on the participant interviews, competitive audit, and research I'd conducted. This led to multiple rounds of prototyping and paper wireframing in order to identify what Garmin could implement going forward to create a more inclusive, effective, and enjoyable user experience and journey. Using these paper prototypes, I also ran moderated studies with the participant pool for this study to gain more insight on what they felt would function well vs. what they had trouble with navigating through their user journey. Some of the paper wireframes can be seen below.
Exhibit C. Results from my Rapid Sketching/"Crazy Eights" round.
Considering that this is a use case and that I will continue iterating on it, I selected the most important parts of the Garmin Connect app to modify and improve based on the participant interviews, feedback, and research. I took screenshots of the current Connect app (seen below) and took notes on what could be improved upon based on participant feedback. I initially organized my notes on paper, before taking shorter notes in Figma, next to the app screenshots.
.png)
Exhibit D. Results from my Garmin Connect app study + notes in Figma.
Exhibit E. Results from my Garmin Connect app study + notes on paper.
Taking the results of my rapid sketches and moderated study feedback, I created new notes to incorporate into the low-fidelity wireframes on Figma. This process went through 2 rounds, after which I finalized the final lo-fi prototype. After each of the 2 rounds, I led participants through a moderated study where I guided them through the app. This allowed me to gain further insights for the second iteration of this use case, where I could take the participants' feedback and implement them into the final version of the lo-fi prototype. The initial two wireframes can be seen on Figma following the link at the top of the case study in the hero image - the final version of the final lo-fi wireframes, made for iPhone 14/15 Pro Max on Figma, can be seen below. This device was chosen to make the moderated studies for the high-fidelity prototype easier, as well as elevate user experience, since all participants said they have an iPhone 15 Pro Max. To see the full functionality, you can navigate to the Figma file from the hero image at the top of this use case.
.png)
Exhibit E. Lo-Fi Wireframes for iPhone 14/15 Pro Max, made on Figma.
I also took observations from the moderated studies and turned them into actionable insights via affinity mapping.
Exhibit F. Observations from moderated study.
Exhibit G. Observations turned into insights via affinity mapping.
Mockups, High-Fidelity Prototype, and Design System
Using my finalized lo-fi prototype, findings from the moderated studies, and further design considerations, I created my mockups, which were then connected to create the hi-fi prototype with full functionality, and the overall design system. The hi-fi prototype and design system can be viewed below. For further detail and to view end-to-end functionality, please follow the Figma link at the top of the case study.
Exhibit H. Hi-Fi Prototypes.
Exhibit I. Design System.
Key Takeaways and Next Steps
Though this use case focused on a handful of user issues that were deemed to be most imperative to the user journey and experience (Community, Live Activity Tracking/Logging, Customizable Features, and more robust Garmin Coach functionalities), there are a number of other steps to take that can allow for Garmin to become a leader in wearable devices and fitness tracking/insights. The final moderated study, using the hi-fi prototype in Figma, was a success with the participant pool for this use case. All three users were thrilled with the additional features and sleek look of the community pages. One user was highly excited about the different tabs for Challenges, Expeditions, and connections.
As I move forward in the next iteration of the Garmin Connect app, I am looking to add more functionalities to the Garmin Coach custom plans. Users will take a quiz based on their training habits and physical capabilities, which will allow the Coach to put together a personalized plan for the user. I am also looking to implement customization into the "In Focus" section of the homepage, so that users can select (similarly to the "At a Glance" section) what KPIs they would like to pay the most attention to. With this customization also comes the Monthly/Weekly/Daily views for this section. On the UI front, I'd like to go ahead and add some blinking arrows or guides to help direct the user on which way they can scroll and move through the app, for increased accessibility and clarity so that they may have a more enjoyable and uninterrupted user journey. There will also be a sliding drawer menu linked to the hamburger menu for further options within the app, such as chats, sign in/sign out options, and video tutorials. Keep your eyes open for the updates!