Tim Q Noltkamper
UX Designer • Olathe, KS

Garmin Connect Badges

Garmin Connect Web App • UX Design / HTML / CSS

The overall design of the Garmin Connect badge system was a collaboration with a coworker (Chris Pearson — he wrote an article about it) who delivered the mobile application design, while I provided the design and front-end code for the web application. There was an existing badge system in Garmin Connect, but it was very basic with no social components, and users would earn most of their badges up front and be done with it.

Earned Badges View

The default view of the badge feature serves as a trophy case for browsing your badge collection.

The default view of the badge feature

Project Objective

The goal of the redesign was to create a more engaging feature with social components that would keep users engaged long past the launch of the feature. Beyond badges earned for physical activity, we also created a set of badges to help educate users about the application’s features. Reviewing the list of available badges lets “badge hunters” track down the easy points and try out some features they may have not otherwise discovered.

Available Badges View

Users can filter available badges by type or point value, and see upcoming badges that are only available for a limited time.

The available badges view of the badge feature

Finding Balance

Balancing the entire system was particularly challenging, as we had created a point system that assigned difficulty to badges, and fed into an overall user level. The level both served as a secondary goal for users, and to help identify other users who may be at a similar fitness levels, and therefore better competitors to invite to a Steps Challenge (another Connect feature). To validate our point system, we sent out surveys to our coworkers to test where they would fall in our system, and if the system aligned with their activity and general fitness.

Badge Levels

From the project documentation — the badge system launched with five levels, but was designed so that the additional levels could be added as the badge pool grew.

Documentation of the badge level system

Comparison View

Clicking on a Connection's points in the leaderboard launches the comparison view.

The comparison view of the badge feature

User Response

The project was particularly rewarding after seeing users’ online response through articles and posts discussing the feature. The Facebook users group regularly has posts from users searching for the Zombie Badge — a viral badge that spreads by participating in a Challenge with an infected user. A small number of us who worked on the project served as “patient zero”.

The Zombie Badge

After the badge system launched, we tracked user progress for any anomalies in the system and were able to watch the Zombie badge spread.

The Zombie Badge detail and Facebook shares