UX Soup for the Management Soul

UX design translated.

Work: Fitness-tracking application

The job: Redesign Garmin's Connect app from scratch. Could we do it in six months?
The industry: Fitness wearables. You'll know Garmin's GPS devices, but the company offers a whole suite of wearable trackers for cycling, running, golf, and more.
The product strategy: Let's make this more than just a place to read the metrics your devices spit out: Make it an application that motivates you and encourages you to check in often.

Let's start with the basic blocks. The device records an activity — a run, a ride, a hike. That's your basic “unit”.

Should it be a “page”? Maybe, but the classic list page > detail page model would be clunky here. If you're just done with a run, where are you most likely to be? On your phone. You won't want to log in, see a list of runs, then click the newest one to see how you did.

No, let's contain the most important stats in a card format and show it to you right as you log in: An interactive map you can zoom in on. Time, pace, elevation gain. If you're cycling, wind direction and speed. 90% of the time you need no more than that.

Added benefit of a card format: It's inherently mobile optimized, so you get the same display on your phone as on your laptop, and we can easily rearrange the elements inside it to format for, e.g., a landscape format for lists of items.

The basic unit: An activity. That basic container is flexible; we can rearrange its elements for different purposes.

We then brainstormed and triaged what other “containers” you might want: What is it you'll want to do when you log in? That is where magic happens and we start to figure out how the application adds value as more than a data dump:

  • If you can connect (see what we did there?) to others, we add a social and not least competitive element.
  • If you can connect to others, couldn't you create groups? We knew cyclists in particular tend to have groups they regularly ride with, and there's a high level of both cameraderie and competitiveness to those groups.
  • If you can have groups, wouldn't it be useful if you could use the app to plan rides? You could map out and share routes.
  • Once you've done a group run, ride, or round of golf, shouldn't you have a group scoreboard?
  • Could we gamify this? Let's award badges.
Courses are shareable, and we can tie leaderboards to them.

I ran with the groups and “courses”, both of which turned out to be very popular features. For example, you could take an activity — a ride, a run — and save it as a course, then share that course with the group. You could also create a course from scratch or edit an existing course.

The beauty of a course created from actual rides or runs is, you'd have an exact GPS-measured distance and elevation gain, whereas creating one on a map gives you calculated values. That's especially relevant for trail runners, as trails are, this is a technical term, crinkly.

As with activities, we encapsulated features like courses in “cards” optimized for mobile.

Now put it all together. When you log in, what do you see?

Our dashboard model actually inherits from the “portals” that were all the rage a few years earlier, but useful this time around. You'd set up the dashboard any old way you want by dragging and dropping cards, toggling between square and portrait aspect-ratio cards, add cards, and remove them. Your dashboard would remember and everything would be where you left it next time you logged in.

But wait, we worked with quite a few hard-core athlete types, and some of us were crazy active ourselves. You might be cycling, swimming, and running. Or cycling and weight training. Or golfing and, I don't know, kayaking. Do you want those activities mixed together? Well, most of us wouldn't necessarily care, but someone who plunks down $1,500 for power-measuring bicycle pedals or a $500 golf watch sure would. We have to cater to the edge cases because those edge cases are our most intense users.

There you go. We let you organize your dashboard into dashboards, plural. You'd set up, rename, or remove tabs without leaving the dashboard — no side quest to “settings” or “configure your dashboard” page.

Did we ship in six months? Yes. Yes, we did. The design process followed (more or less) Agile design sprint cycles and included wireframes, user testing, and a high-definition HTML prototype with immaculately hand-crafted CSS and JavaScript, which made developer hand-offs near seamless.

Ask Per “Pierre” Jørgensen

Q: No comments? What gives?

A: Frankly, I don't have the patience for all the anonymous crap the comment field seems to attract. Since you, dear reader, are neither anonymous nor a purveyor of crap, please use my contact form. I promise to read it, and, if your critique is incisive or your question pertinent, I'll post it (with your permission, of course).