interaction & visual design lead
Garmin sponsored a project through my Experience Studio course with the goal of having my student team redesign Garmin Gear, a feature within the Garmin Connect app.
I lead the team in visual and interaction design through iterative sketching and high fidelity prototyping.
The designs that I proposed were validated through A/B testing, showing a dramatic increase in ease of use and discoverability.
Understand the space and identify issues affecting Gear's usability.
We chose to begin the project by fully exploring the space and the product we would be working in. To do this, we performed a competitive analysis into Garmin Gear's direct competitors and heuristic analysis to identify surface level usability issues.
Following that, we created and distributed a survey to exercise-oriented Facebook groups . to gauge their knowledge of Garmin Connect and Gear as well as other products in the space.
Here, we focused on evaluating both the strengths and weaknesses of Gear's competition.
Our competitive analysis was focused on two apps: Nike Run Club and Asics Runkeeper. Our general takeaways were focused on the "Gear-like" features within each of these apps, meaning a way to track workout gear lifespan and use. We found that visuals really add to the experience of using apps like this and that we were to be careful of restraining our users and how they edit and track their gear.
The goal of our heuristic analysis was to gain a better understanding of the application and help identify possible usability problems in the user interface.
What we found here were mainly two issues affecting Gear's usability. First, the Gear feature is hidden in a 'more' menu, making it hard to initially find in the app itself. Second, when a user adds gear, they have little control over how to regulate what gear is applied to which workout, defeating the purpose of the app. These two points drove our future ideation strongly.
A survey was created to understand our users and their habits better and to gauge their usage of Gear in their routines.
The target of this survey was Garmin users and we found three main points. Most users have integrated Garmin connect into their routines, which gives hope for Gear seeing use when discovered. Next, 72% of Garmin users have not heard of Gear before, and finally, most Garmin users are runners and cyclists. This information altogether allowed us to identify who are users were, and therefore informed our process moving forward.
phase one - research
Scope down, uncover problems, and ideate solutions.
The best (and my favorite way) to work on a project is to sit down and sketch out any ideas that come to mind, and that is what I did! I completed multiple rounds of sketching and ideation, with plenty of sketches in tow, but will showcase only the important ones here.
Sketching Rd. 1
Directly informed by the research, the goals of this round were increasing discoverability, integration of Gear into app activities, and increasing the general intuitiveness of Garmin Connect.
One sketch to highlight from this round is my 'blue bar' sketch. My goal with this sketch was to increase discoverability in a way that didn't obstruct experienced users flow within the app, but still showcases Gear in a new way.
Sketching Rd. 2
Ideated on discoverability via a variety of features, specifically sharing Gear statistics and information over social media.
Exploring ways to improve discoverability revealed many routes to many solutions to this problem, and I chose to focus on social media sharing. This also included the addition of a badge/award system that allowed badge earners to share their accomplishment with friends on many platforms.
Prepare the road forward by identifying features and ideas to take to the next level.
As we ideated, the team found how easy it is to create tons of sketches and have a million different ideas. This was good in practice, but when it came to deliverables, not what we wanted. We scoped down to a series of ideas to take to high fidelity and to ideate further upon. We chose to focus on the 'blue bar,' data input within gear (adding new gear), genesis state and onboarding, and an overall aesthetic redesign of gear.
Garmin Connect Home
'My Day' w/ Blue Bar
blue sky sketch
phase two - ideation
Finalize our ideas, iterate, and design beautiful mockups.
The 'Blue Bar'
Gear was added to the Blue Bar, replacing
weight. Created a pop-up menu to expand
navigation possibilities from My Day.
Aligned with our goal of increasing Gear's
discoverability, our version My Day's blue bar aligns perfectly with our goals in these designs. I sketched this solution very early on in the project and was very happy to see something so simple and intuitive making it to our final mockups.
General Gear View
Updated the Gear view to Garmin Connect's new aesthetic. Increased ease of information access from the general Gear collection view and created a filter system to search through owned Gear.
This is the bulk of what a user might see while using Gear. This is essentially the home base for Gear users and is the root of all of Gear's functions. Because of this, it was important that we designed the collection to be both beautiful as well as functional.
I took the lead of three members of our team in the designing of our digital mockups. This means that I managed what needed to be done and when as well as oversaw the work that the design team was completing. I also took the lead of sponsor-to-team communication to ensure that everyone was always on the same page and meeting expectation. This section covers each of the areas that the final design focused on improving.
Our interactive prototype can be viewed here.
Gear Data Entry
Updated aesthetics. Created new, more intuitive and defining ways to customize data about a piece of Gear. Added 'default' button to allow better integration of Gear into daily routines.
This s what we considered to be the second most important piece of work within these screens. We wanted to create a clearer process when it came to adding Gear, and one that visually pleasing as well.
Updated aesthetics to match modern Gear standards. Worked to create an accessible, new-user-friendly flow. Automated onboarding on first use.
Gear previously had onboarding, but it was hidden within an annoying amount of menu navigation and had no prompt to let users know where it was or that it existed. Our onboarding is automatic upon first entering Gear and is simple and to the point.
phase three - pixel perfection
Determine if the proposed designs increase Gear’s visibility and user understanding of Gear.
Although I much prefer to test throughout my design process, the course of this project and our sponsor's milestones enabled us to test only near the end of our process. We performed A/B testing to give our design decisions and modifications weight. What we found was that our designs not only enabled users to have a clearer understanding of what Gear was and how to use it, it also cut down the time it takes to reach Gear and add data within Garmin Connect.
We tested two scenarios with current Garmin Connect designs and the same two scenarios with our proposed design changes.
Current GCM: 6 actions, 64 seconds on average
Proposed Design: 1 action, 9 seconds on average
Our first scenario was simple: navigate from Garmin Connect's home page (My Day) to the Gear page. The results from our testing showed that something seemingly easy to do was in fact a difficult task with current Garmin designs, while our proposed changes cut down the time this task takes, on average, by 85%.
Current GCM: 4 actions, 50 seconds on average
Proposed Design: 2 actions, 19 seconds on average
Scenario two was a more complex task but is something that was easier with current designs than the first, simple task was. Users were tasked to check out their most recent run and see if a particular shoe was the default gear for that activity. Regardless, our designs excelled, beating current designs by 62%.
Our project was limited in time due to its nature as a course in school, but if given more time I believe that we would have done a deep-dive into each instance of testing and observed the most prevalent roadblocks. One of my most important questions is why scenario one took as much time as it did with our proposed designs - was it new users taking in a new UI, or was it something more? These insights would lead us to an even more polished experience that I hope Garmin explores themselves in the future.
phase four - testing
Look back and improve my work going forward.
I chose to showcase this project because it was one of my most important steps forward in confidence on many levels. I learned to take trust in my own work, while at the same time better understanding what it means to work as a single, collaborative unit on a team. It also gave me my first step into leadership from a UX perspective.
Working with Garmin really felt like a real-world experience - one where the designs my team created will have an impact on users in the future.
I learned a lot, but to break it down, I have three main thoughts following the completion of this project.
Leading is not as intimidating as I thought it would be. I now view UX leadership as a sort of mentor-mentee relationship, but one that goes both ways. I feel that I was able to share a lot of skills with others, while at the same time learning just as much from my teammates.
Maintaining a healthy relationship with industry sponsors is key to efficient work and strong design. Having your work backed by those in charge of a project is a good feeling, but work done while out of sync with the rest of the team is simply a waste of good effort.
I am hungry for more. This project struck me in a way that no project has before - I want to learn, I want to lead, and most importantly of all, I want to design in impactful ways.