Garmin Connect — building the UX foundation for a fitness platform's wellness era

A platform built for the workout, not the day

Garmin Connect was very good at one thing: receiving a completed activity and turning it into charts. By the start of 2014 it carried more than four billion miles of uploaded activity. But three pressures were converging, and the platform was not built to absorb any of them.

• The business was changing underneath us. Garmin had been a navigation company, and the standalone GPS market was collapsing as smartphones replaced dedicated devices. Fitness was the growth story now — and Connect was no longer a companion to a running watch, it was strategic infrastructure.
• A new kind of user was arriving. Garmin was preparing its first always-worn device — a wellness band that produced not one tidy upload but a continuous stream of steps, sleep, daily goals, and hourly nudges. Connect had no place to put that.
• The platform itself had aged. The interface was dated, navigation inconsistent, and there were no shared front-end standards — so every design decision had to survive a lossy translation to production.

I felt that last one personally, and wrote it down at the time: "I have to go to a developer to change HTML and CSS. I cannot see an updated CSS fix locally since the HTML is not true to the way I left it." Design was trapped behind handoffs.

Getting clarity before getting to pixels

A platform this large rewards untangling before redrawing. I wrote the Training Plans system down until it made sense — defining its three states explicitly — and tested with real runners, letting the findings overrule the plan.

Three pillars: a feature, a system, and a standard

My work on Garmin Connect concentrated in three areas — one end-to-end feature, one cross-cutting widget system, and one set of standards that changed how design itself reached production.

Training Plans, end to end

Training Plans let a runner choose a structured, day-by-day plan, drop it onto a calendar, and send workouts to their device. I owned it from requirements through shipped interaction. The redesigned Explore page turned advanced filtering into something visible and usable — a duration slider, and activity and effort-level filters that toggled by icon. Each featured plan carried its coach's bio, answering a real question testers raised: where does this plan come from? On the calendar, I designed drag-and-drop rescheduling — a workout could move and the rest of the plan shifted around it, while race day never moved — with a reassurance prompt before every reversible action. A small deliberate copy decision: "delete" became "remove," because the user was taking a workout off their schedule, not erasing it.

The widget system for the wellness era

The redesign of Garmin Connect introduced a customizable, widget-based dashboard — and the widgets were how the platform would finally hold the everyday user's data. I led interaction design and front-end CSS for that system: the Daily Summary and Step Summary widgets that turned a continuous stream of steps, calories, distance, and sleep into something glanceable; the VIVO daily-summary widget built for Garmin's new wellness band; and the Calorie widget, including its MyFitnessPal integration — the connected, disconnected, and no-data states, and the plain-language equation Consumed − Active = Net. To get that integration right I studied how another platform, Withings, handled third-party connection, and mapped each step of its flow to a Connect equivalent. A widget is a small surface doing a hard job: glanceable, graceful when there's no data yet, and consistent with every other widget so a user learns it once.

Standards: a style guide and a workflow

The deepest problem wasn't any single screen — it was that design and development had no shared language, so quality leaked at every handoff. I authored the Garmin Connect web style guide: branding, color palette, typography, an icon-font system, layout grids, and full component specs, alongside code standards for HTML, CSS, and JavaScript. I also co-authored the UX-to-development workflow that defined the contract between the disciplines — UX hands off functional prototypes; development hands back clean, unstyled, data-injected markup; UX authors all CSS following OOCSS principles. It named the boundary precisely, and was reviewed and annotated by the engineering and UX leads. That document was the structural fix for the friction I'd written down at the start. The work carried straight into the redesign: across the GC2 effort I owned the CSS implementation for a long list of tracked components and pages, and the Global Changes area — where I pushed accessibility ahead of its time, adding alt text and title attributes across dozens of images and icon-only controls.

Letting real runners overrule the plan

I wrote three usability scenarios around distinct user types and ran them — and the findings were direct, occasionally humbling, and always acted on.

• A new runner committing to a first 5K, an intermediate runner editing and printing a plan, an advanced runner rearranging workouts
• Users overlooked the start- and end-date fields entirely — so I pre-populated them and cut the explanatory copy to a step instruction
• The proposed left-column filter layout tested badly — so I moved filters back to the top, where users actually looked
• One tester was simply confused about when her plan started on the calendar — clear evidence that "obvious to the designer" and "obvious to the user" are different things

Testers also asked where plans came from and whether to trust them — which is why each featured plan ended up leading with its coach's bio.

Building toward the wellness redesign