Garmin Connect Redesign

Making challenges feature more accesible.
Course: CGU Interaction Design
Timeline: 1 Week
Role: Product Designer
Team: Just Me!

The Project

For our project, we were taksed to evaluate the IA and redesign a user flow. I chose Garmin Connect because I personally had problems using the app. It is  a heath tracking tool for tracking and sharing fitness activities from your Garmin device. Main features include heath and activities tracking and a gamified “challenges” system.
This project redesings the IA and user flow for creating and editing challenges.

The Problem

Unintuitive IA which may lead to low usability and satisfaction rate.

Through IA assesment, I discovered the problems of low discoverability, inconsistency, and inefficiency. The flow was confusing and difficult to navigate.

The Goal

Improve site infastructure to simplify user flows and make key functions more accessible.

From the assesment, I selected two key areas to redesign: 1) Challenges Feature 2) Quick adding Alarms.

The Solution

Challenges Feature Redesign:
Currently, users have difficulty adding connections under "My Connections" feature, searching for badges, and accessing current badges. I introduced a Search, Brose, and Feature option to browse Challenges as well as adding clear headers to improve clarity.

Quick Add Alarm:
The alarm page lacks visual heirarchy because of the proximity, closure, and similarity of the alarm options. I designed a "Quick Add" feature and introduced heirarchy for the Alarm Page.

Challenges Feature Redesign

Before

My Challenges / Connections

Challenges

Conections

After

My Challenges

My Challengnes/Leadership Board

Currently, users have difficulty adding connections under "My Connections" feature, searching for badges, and accessing current badges. For first-time users, searching for new badges and accessing current badges may be difficult because there is no search function or proper heading for current badges.

Challenges Feature

IA Problems and Solution

Problems

  1. Difficult Badge Search
    Users have to scroll through all badges to search.
  2. Ambiguous Sinage
    No heading for "Current Badges," users may be confused.
  3. Can't Add Connections
    No link to add connectins under "connections tab.

Solutions

  1. Add Challenges Search Bar
    and Featured Challenges
    Quickly find badges with personalized keywords browse trending challenges
  2. Add My Challenges Heading
    Appropriate heading for "Current Challenges".
  3. Change My Connections to Leadership Board
    Change name to make feature function clear.

Reccomendation 2

Challenges Feature Design Process

Sketching out my ideas

After pinpointing issues, I began ideating through various methods such as Crazy 8s and braindumping. Here are some sketches I drew during the process:

Exploring Feature Options in Low-Fi Prototypes

After some sketches, I explored various solutions in figma. Here I explored the "Suggested Keywords" feature and "Weekly Leadership Board" feature.

Suggested Keywords 1

Suggested Keywords 2

Weekly Leadership Board 1

Weekly Leadership Board 2

Challenges Feature Design Process

Redesigning the Sitemap

After redesigning, I consolidated my changes and created a proposed sitemap. New features implemented include:

Alarm Quick Add Feature

Before

My Challenges / Connections

After

My Challenges

I redesigned the alarm page and the user flow to add/edit alarms.
Here's why:

  1. The alarm page lacks visual heirarchy because of the proximity, closure, and similarity of the alarm options. Alarms are placed too closely to each other and may exceed the cognitive load (7 options max is suggested) for the user. Second, users have to access alarms via device setting which is not intuitive.
  2. Second, users have to access alarms via device setting which is not intuitive.

Alarm Feature

Problem and Solutions

Problem: Unintuitive Icon & User Flow

Users have to select the device icon to create alarm.

Original Add Alarm User Flow

Solution: Quick Add Alarm Feature

Users can click on the quick add button to add alarm.

New Add Alarm User Flow

Problem: Lacks Visual Heirarchy

Users have to select the device icon to create alarm.

Original Alarm Page

Solution: Quick Add Alarm Feature

Users can click on the quick add button to add alarm.

New Alarm Page

Wrap-up

Next steps

We our currently fixing the technical issues found during our second usability test. Here are our next steps:

My Learnings

  1. I gained valuable insights on which page structure is suitable for different needs.
  2. I learned how to effectively justify new design propositions through articulating cognitive principles.
  3. Ultimately, as an avid user, I truly enjoyed evaluating the Garmin Connect and hope to one day see my changes implemented.