Garmin Forerunner 645
Garmin Forerunner 645
UX/UI Technical Case Study
01: Discovery & Research
Uncovering Athlete Needs and Market Gaps to Innovate GPS Watches with Music Storage, Advanced Metrics, and Seamless Garmin Pay Integration for a Superior Fitness Experience.
The Garmin Forerunner 645 Music project began with a clear challenge: design a user interface that could seamlessly support athletes in motion, enabling intuitive interaction with music controls, training data, and payment features—all while maintaining focus on performance.
Our research began with a foundational understanding of real-world usage environments, where glanceability, tactile precision, and sweat-proof interaction were non-negotiable. The watch had to perform flawlessly in motion, under stress, and often with limited visibility or dexterity.
Stakeholder & Market Research:
We conducted interviews with Garmin product leads, engineers, and customer support teams to understand feature priorities, legacy constraints, and known user complaints. In parallel, we reviewed competitive devices (e.g., Apple Watch, Polar, Suunto, Fitbit) to benchmark against industry standards in:
Music interaction while running
Workout tracking and sensor feedback
NFC-based payment (Garmin Pay)
Button vs. touchscreen UI during physical activity
Ethnographic & User Interviews:
We ran in-field observational studies and user interviews with over 30 participants—runners, triathletes, and everyday fitness users. Participants wore the Forerunner 645 during training sessions while narrating their interactions in real time.
Key insights included:
Users preferred tactile button-based navigation over touchscreen due to sweat, motion, and glove use
The music control interface required too many steps, often forcing users to stop or fumble mid-activity
Training metrics were highly valued, but dense screens with unclear hierarchy caused frustration
Runners wanted consistent visual feedback (pace, heart rate, distance) with minimal interaction
Heuristic Analysis:
We audited the existing Garmin interface against UX heuristics for wearables, focusing on:
Responsiveness and input feedback
Visual hierarchy and readability
Error prevention during motion
Cognitive load in navigation paths
This phase revealed that while the Forerunner 645 was packed with features, its core UX hadn’t been optimized for motion-centric use cases. Deep menus, modal interactions, and inconsistent button logic interrupted flow and increased the risk of user error during workouts.
Personas Created:
From these insights, we developed key personas:
The Solo Runner – values quick access to music, pace, and distance mid-run
The Performance Tracker – dives deep into heart rate zones, cadence, and training load
The Commuter Athlete – uses Garmin Pay and music during short workouts between work obligations
This discovery phase gave us a grounded understanding of user needs and environmental context ensuring that every subsequent UX decision prioritized glanceable design, muscle-memory navigation, and frictionless control for athletes in motion.
02 Problem Framing & UX Strategy
Designing a smartwatch interface focused on sweat-proof navigation, glanceable metrics, offline playlists, and seamless Garmin ecosystem syncing.
The Forerunner 645 Music was built for athletes but its UI didn’t always support athletic movement. While the hardware was durable, fast, and sensor-rich, the experience of interacting with the device mid-activity revealed clear usability gaps. Based on research insights, we reframed the core problem:
“How might we enable active users to confidently control music, monitor performance, and access key features—without interrupting their pace, flow, or focus during workouts?”
We needed to redesign not just how the device looked—but how it felt to use in motion.
Key UX Challenges Identified:
Cognitive Overload: Dense screens with minimal visual hierarchy forced users to slow down or stop to interpret metrics.
Navigation Friction: Deep, inconsistent button logic and modal structures created confusion during dynamic activity.
Hidden Features: Core experiences like music playback and Garmin Pay were buried or required too many steps to access.
Motion-Unfriendly Design: Small touch targets, reliance on long-press actions, and lack of haptic feedback diminished confidence during use.
Our UX strategy focused on designing for glanceability, muscle memory, and physical rhythm, ensuring the interface felt like an extension of the athlete rather than a distraction.
UX Strategy Pillars:
1. Glance-First Design:
Simplify and restructure key workout screens to prioritize real-time metrics like pace, distance, heart rate, and music status. Use typography, contrast, and spacing to reduce interpretation time under motion.
2. Tactile Navigation Optimization:
Standardize button behavior (short press vs. long press), reduce reliance on multi-layer menus, and define clear logic for left/right/up/down patterns that align with how runners use their fingers mid-stride.
3. Surface High-Frequency Features:
Elevate music controls, Garmin Pay, and pause/resume workout to be accessible within one to two button presses—no deep nesting. Design fallback states and contextual overlays for rapid re-entry.
4. Build for Motion, Not Just Vision:
Incorporate haptic feedback cues, pre-loaded screen layouts for muscle memory recall, and simplified confirmation dialogs so actions can be completed without prolonged focus.
This strategy reframed the Forerunner 645 from a feature-packed smartwatch into a motion-ready fitness tool, reducing interaction time, minimizing error risk, and building trust during high-intensity moments. It also ensured the design would scale across future firmware updates and training modes—while staying true to Garmin’s brand as a performance-first wearable.
03: Architecture & Workflow
Designing clear flows and intuitive architecture for seamless workouts, music control, and Garmin Pay experiences
With a user-centered strategy in place, we began re-architecting the Garmin Forerunner 645 Music’s interface to better support real-time athletic use, focusing on speed, clarity, and tactile navigation. The objective was to streamline key workflows—like music control, workout tracking, and quick access features—into motion-optimized flows that could be reliably executed mid-activity, without visual strain or deep menu diving.
Legacy Workflow Challenges:
Music control required 4–5 button presses, often nested within a modal screen not easily accessible during a run
Workout metrics were distributed across multiple pages, forcing users to flip repeatedly to monitor pace, cadence, and heart rate
Garmin Pay was hard to find, buried beneath system-level menus not labeled with clear affordances
Navigation was inconsistent—short and long presses triggered different outcomes depending on context, creating learnability issues
New Workflow Architecture:
We restructured the interface into a task-based architecture, grouping high-frequency interactions under context-aware clusters:
1. Workout Mode (Primary Loop):
Centralized real-time metrics (Pace, Distance, HR, Time) on a single screen
Enabled horizontal button-swipes to access additional screens (e.g., Elevation, Cadence, Interval Splits)
Introduced Quick-Glance Display Mode with larger font sizes and contrast for night/distance running
Long-press of the START button opened pause, resume, music, and save options in a radial-style overlay
2. Music Control Flow (Inline):
Added a dedicated button shortcut (e.g., DOWN > Hold) to open Music Controls directly
Created persistent Now Playing micro-widget at the bottom of the workout screen for quick feedback
Structured music screen with tactile button support for: Play/Pause, Skip, Volume (up/down), and Audio Source
3. Garmin Pay Flow:
Added Garmin Pay as a long-press shortcut from the Home screen, bypassing traditional Settings navigation
Streamlined authentication: biometric pass-through for mobile-paired devices, or PIN-only during run mode
Created a simplified “Tap to Pay” screen with large visual feedback for successful transactions
Navigation & Interaction Model:
We established a predictable button logic system, aligned with runner muscle memory:
UP/DOWN = Navigate screens (e.g., different data panels)
START/STOP = Confirm or access primary action menu
BACK = Cancel or return to previous layer
Long-Press variants were standardized to call up utility menus or surface quick actions
This interaction model was reinforced through low-fidelity prototypes and flow diagrams, helping the firmware and hardware teams understand how input logic, screen state, and feedback needed to align during physical activity.
By simplifying the architecture into purposeful, motion-aware flows, we gave users faster access to what they cared about most—without sacrificing safety, rhythm, or context during their workouts. This foundation also allowed for future scalability across other Forerunner models and training modes.
04: Wireframing & Prototyping
Transforming ideas into interactive wireframes and prototypes to refine workouts, music, and Garmin Pay experiences.
With a redesigned architecture and button-based interaction model in place, we transitioned into wireframing and prototyping to validate the flow, layout, and affordances of the new interface under real-world conditions. Given the physical context of use—running, cycling, sweating, limited visibility—the fidelity and practicality of every screen and transition mattered.
We approached wireframing with a clear goal: create an interface that was glanceable, minimal, and optimized for non-touch, tactile navigation.
Low-Fidelity Wireframes:
We began with monochrome wireframes mapped to the physical button inputs. These explored:
Single-screen data layouts for real-time workout tracking (pace, distance, heart rate, time)
Horizontal page logic for additional metrics (e.g., VO₂ Max, cadence, elevation gain)
A simplified Now Playing music screen with enlarged icons and a structured 3x2 button grid
A modular Quick Action Overlay for pause/resume, save, and music—all reachable in under two clicks
Wireframes were tested in mock physical scenarios—users were asked to wear a blank prototype while simulating activity (e.g., treadmill runs or wrist rotation) to assess comfort with input logic and glance time.
High-Fidelity Prototypes:
We moved to mid- and high-fidelity screen designs using simplified black-and-white vector mockups—matching the device’s LCD-style display aesthetic.
Prototypes included:
Workout Screen Variants with different visual hierarchies (metric groupings, font scaling, placement optimization)
Music Control Screen with responsive logic tied to button press sequences (e.g., DOWN = skip track, UP = volume)
Garmin Pay Interface featuring tap animations, PIN entry, and feedback for failed vs. successful transactions
Dynamic Overlay States for actions like long-press pause or hold-to-skip, visually previewing the action before confirmation
These were built and simulated using click-through prototypes in Figma and early-stage embedded UI simulations on Garmin’s developer emulator.
Key Design Patterns Tested:
Short press vs. long press behavior and user learnability
Microinteractions (e.g., vibration feedback when skipping a song or locking buttons mid-run)
Progressive disclosure—limiting default screens to essentials, with optional deep dives via side-swipes or long-press
Button-mapped info toggles to quickly swap display from pace to heart rate without interrupting session
The prototyping phase allowed us to rapidly iterate on input timing, data density, and motion-readiness. Each design was stress-tested in context—mid-stride, with sweat, and with gloves—ensuring our interface wasn’t just functional, but highly usable in motion.
These tested prototypes became the foundation for engineering handoff and firmware integration, ensuring design intent remained intact all the way to the final wrist-based experience.
05: User Testing & Validation
Validating intuitive design through real-world athlete testing to refine navigation, music control, and Garmin Pay flows.
To ensure our designs met the demands of real-world athletic performance, we conducted extensive user testing in both controlled and in-motion environments, focusing on clarity, efficiency, and physical usability. Our primary goal was to validate that users could interact with key functions—music, metrics, and controls—without breaking stride or compromising performance.
Testing Participants:
We recruited over 20 users across three cohorts:
Experienced distance runners (10K, half-marathon, marathon)
Recreational athletes and weekend warriors
Multisport users (cyclists, swimmers, triathletes)
Each participant used a functional prototype during simulated or actual workouts (treadmill, track runs, outdoor loops), providing in-the-moment feedback on button logic, screen visibility, and control responsiveness.
Test Scenarios:
Starting, pausing, and resuming a run while in motion
Navigating through live metrics during high-cadence segments
Accessing music controls mid-run (play/pause, skip, volume)
Using Garmin Pay at a post-run café or convenience store
Attempting quick setting adjustments (e.g., brightness, lock mode) without stopping
What We Measured:
Time-on-task for common interactions (e.g., skip song, check pace, pause run)
Glance duration to successfully interpret on-screen data
Error rate in accessing desired functions via button logic
User confidence and flow retention during use
Physical tolerance—did the design reduce cognitive load while under physical strain?
Key Findings:
Glance-first metric screens were highly successful, especially those using larger fonts and 2–3 metrics per screen
Users overwhelmingly preferred button-based music control over touch, praising tactile feedback and simplified logic
Long-press shortcuts were learned quickly, especially when paired with brief haptic feedback
Garmin Pay flow succeeded when surfaced early via a hold-to-pay gesture, but users wanted stronger visual confirmation after payment
A/B testing of music screen designs showed users preferred layouts where skip and volume were physically separated (less mis-press risk)
Design Iterations Based on Feedback:
Refined default workout screen layout to prioritize pace + distance on top, HR + time below
Introduced button lock toggle to avoid accidental input during high-motion segments
Optimized screen brightness and contrast for low-light conditions, especially night runners
Simplified confirmation dialogs with a single “haptic + visual” success cue for Garmin Pay and workout save
This phase confirmed that motion-first UX is about more than visibility—it’s about eliminating friction at the micro-interaction level. With the final prototypes tested and tuned through these sessions, we were confident the interface would enhance—not interrupt—performance for athletes across disciplines.
06: Visual Design & Accessibility
Designing for Movement: A Glanceable, Tactile, and Inclusive UI System Built for Athletes in Motion.
With user testing validating our interaction patterns and workflows, we transitioned into high-fidelity visual design. For the Forerunner 645 Music, the visual system needed to support at-a-glance clarity, tactile orientation, and low-distraction cognition—all while honoring Garmin’s performance-first design language and the technical constraints of the device’s display hardware.
Design Principles:
1. Motion-Centric Legibility
We prioritized screen layouts with 2–3 high-value metrics per view, using large, bold fonts, intuitive iconography, and high-contrast spacing. Layouts were optimized for glanceability under motion, in both daylight and low-light conditions.
2. Hierarchical Visual Structure
We employed clear vertical and horizontal zoning to group information by relevance:
Top row: distance, pace (primary real-time data)
Middle row: heart rate, cadence, or elevation (customizable)
Bottom row: time or music preview widget (supporting layer)
3. Predictable Button-Mapped Layouts
Every action and metric was paired with a consistent spatial and directional pattern. This reinforced muscle memory, allowing users to anticipate where data would appear and how to control it, even without looking.
Accessibility Considerations:
High-Contrast Color Palette: Designed UI elements using a grayscale base with semantically colored accents (green for confirmation, red for errors, yellow/orange for status). Ensured 4.5:1 minimum contrast ratio.
Glove-Friendly Interactions: Avoided touch-reliant elements, designing all interactions for button navigation only.
Low-Light Optimization: Introduced a night running theme with reduced backlight glare, larger fonts, and simplified backgrounds for eye strain reduction.
Icon Consistency: Used international iconography standards for play, pause, skip, lock, and metrics (e.g., HR, pace, distance), supporting global usability and quicker interpretation.
Feedback Layering: Designed dual-mode feedback (haptic + visual) for all primary actions like pausing a workout, skipping a track, or completing a payment.
Scalable UI System:
We created a modular UI system that supported future firmware updates and could extend across Garmin’s Forerunner product line. Design tokens were applied for:
Typography styles (Data-heavy vs. Navigation prompts)
Element spacing and button mapping
Metric display card structures
Interstitial overlays for confirmation, alerts, and Garmin Pay
Outcome:
The final visual design system gave athletes a clean, unobtrusive interface that faded into the background during performance—but was instantly responsive when needed. Every screen and interaction was designed to reduce hesitation, improve reaction time, and support peak physical engagement—from the trail to the track to the city sidewalk.
07: Engineering Handoff & Iteration
Delivering final designs with detailed specs, design systems, and seamless handoff to engineering for implementation. and future Garmin watch interfaces long after launch.
With the interface design finalized and validated through real-world testing, we transitioned into the engineering handoff phase—ensuring our UX vision could be fully realized within Garmin’s firmware environment and hardware constraints. Given the nature of embedded systems and low-power devices, tight collaboration with firmware engineers was essential.
Handoff Deliverables:
We prepared a comprehensive asset package tailored to Garmin’s development tools and system architecture, including:
Button-mapped flow diagrams covering all user journeys: workout, music, Garmin Pay, quick actions
Pixel-precise UI specs for 208x208 resolution display, optimized for memory and battery constraints
Design tokens and UI variables, including font sizes, padding, spacing units, and animation timing
Icon and graphic libraries exported as optimized vector and bitmap assets
Interaction blueprints: button state logic, long/short press behavior, and overlay transitions
Accessibility annotations for contrast, haptic response, and non-visual feedback triggers
Cross-Team Collaboration:
We worked in weekly design-engineering syncs to resolve implementation challenges, review in-device builds, and align on iteration priorities.
Key areas of collaboration included:
Music Control Responsiveness: Optimizing playback button inputs to ensure near-zero latency and preventing double-press misfires during workouts
Garmin Pay Screen Transitions: Ensuring PIN entry, contactless readiness, and confirmation animations remained fluid within hardware constraints
Display Load Efficiency: Balancing font size and screen redraw rates to ensure crisp visuals without battery drain or processor lag
Error State Safeguards: Built fallback flows and toast-style messages for actions like failed syncs, payment declines, or signal loss—minimized user confusion
Iterative Refinement:
Once integrated into test builds, we ran field validation with Garmin testers and athlete beta users, logging feedback for ongoing refinement across firmware sprints.
Notable improvements made during iteration:
Fine-tuned vibration feedback length to better distinguish between pause/resume and skip-track triggers
Reduced button press duration thresholds to account for motion-based variability
Smoothed UI animation curves for modals and transitions to reduce jarring effects mid-activity
Adjusted brightness auto-adjust logic in dark mode to improve usability during night training
Outcome:
The engineering handoff phase ensured that design intent translated into real, high-performance product behavior. Our close loop between design and dev meant that nothing was lost in translation—from button mappings and metric layouts to payment flows and music control logic.
The final result was an experience that not only met Garmin’s technical requirements—but delivered a polished, field-proven interface that athletes could trust without breaking stride.
More Works
Garmin Forerunner 645
UX/UI Technical Case Study
01: Discovery & Research
Uncovering Athlete Needs and Market Gaps to Innovate GPS Watches with Music Storage, Advanced Metrics, and Seamless Garmin Pay Integration for a Superior Fitness Experience.
The Garmin Forerunner 645 Music project began with a clear challenge: design a user interface that could seamlessly support athletes in motion, enabling intuitive interaction with music controls, training data, and payment features—all while maintaining focus on performance.
Our research began with a foundational understanding of real-world usage environments, where glanceability, tactile precision, and sweat-proof interaction were non-negotiable. The watch had to perform flawlessly in motion, under stress, and often with limited visibility or dexterity.
Stakeholder & Market Research:
We conducted interviews with Garmin product leads, engineers, and customer support teams to understand feature priorities, legacy constraints, and known user complaints. In parallel, we reviewed competitive devices (e.g., Apple Watch, Polar, Suunto, Fitbit) to benchmark against industry standards in:
Music interaction while running
Workout tracking and sensor feedback
NFC-based payment (Garmin Pay)
Button vs. touchscreen UI during physical activity
Ethnographic & User Interviews:
We ran in-field observational studies and user interviews with over 30 participants—runners, triathletes, and everyday fitness users. Participants wore the Forerunner 645 during training sessions while narrating their interactions in real time.
Key insights included:
Users preferred tactile button-based navigation over touchscreen due to sweat, motion, and glove use
The music control interface required too many steps, often forcing users to stop or fumble mid-activity
Training metrics were highly valued, but dense screens with unclear hierarchy caused frustration
Runners wanted consistent visual feedback (pace, heart rate, distance) with minimal interaction
Heuristic Analysis:
We audited the existing Garmin interface against UX heuristics for wearables, focusing on:
Responsiveness and input feedback
Visual hierarchy and readability
Error prevention during motion
Cognitive load in navigation paths
This phase revealed that while the Forerunner 645 was packed with features, its core UX hadn’t been optimized for motion-centric use cases. Deep menus, modal interactions, and inconsistent button logic interrupted flow and increased the risk of user error during workouts.
Personas Created:
From these insights, we developed key personas:
The Solo Runner – values quick access to music, pace, and distance mid-run
The Performance Tracker – dives deep into heart rate zones, cadence, and training load
The Commuter Athlete – uses Garmin Pay and music during short workouts between work obligations
This discovery phase gave us a grounded understanding of user needs and environmental context ensuring that every subsequent UX decision prioritized glanceable design, muscle-memory navigation, and frictionless control for athletes in motion.
02 Problem Framing & UX Strategy
Designing a smartwatch interface focused on sweat-proof navigation, glanceable metrics, offline playlists, and seamless Garmin ecosystem syncing.
The Forerunner 645 Music was built for athletes but its UI didn’t always support athletic movement. While the hardware was durable, fast, and sensor-rich, the experience of interacting with the device mid-activity revealed clear usability gaps. Based on research insights, we reframed the core problem:
“How might we enable active users to confidently control music, monitor performance, and access key features—without interrupting their pace, flow, or focus during workouts?”
We needed to redesign not just how the device looked—but how it felt to use in motion.
Key UX Challenges Identified:
Cognitive Overload: Dense screens with minimal visual hierarchy forced users to slow down or stop to interpret metrics.
Navigation Friction: Deep, inconsistent button logic and modal structures created confusion during dynamic activity.
Hidden Features: Core experiences like music playback and Garmin Pay were buried or required too many steps to access.
Motion-Unfriendly Design: Small touch targets, reliance on long-press actions, and lack of haptic feedback diminished confidence during use.
Our UX strategy focused on designing for glanceability, muscle memory, and physical rhythm, ensuring the interface felt like an extension of the athlete rather than a distraction.
UX Strategy Pillars:
1. Glance-First Design:
Simplify and restructure key workout screens to prioritize real-time metrics like pace, distance, heart rate, and music status. Use typography, contrast, and spacing to reduce interpretation time under motion.
2. Tactile Navigation Optimization:
Standardize button behavior (short press vs. long press), reduce reliance on multi-layer menus, and define clear logic for left/right/up/down patterns that align with how runners use their fingers mid-stride.
3. Surface High-Frequency Features:
Elevate music controls, Garmin Pay, and pause/resume workout to be accessible within one to two button presses—no deep nesting. Design fallback states and contextual overlays for rapid re-entry.
4. Build for Motion, Not Just Vision:
Incorporate haptic feedback cues, pre-loaded screen layouts for muscle memory recall, and simplified confirmation dialogs so actions can be completed without prolonged focus.
This strategy reframed the Forerunner 645 from a feature-packed smartwatch into a motion-ready fitness tool, reducing interaction time, minimizing error risk, and building trust during high-intensity moments. It also ensured the design would scale across future firmware updates and training modes—while staying true to Garmin’s brand as a performance-first wearable.
03: Architecture & Workflow
Designing clear flows and intuitive architecture for seamless workouts, music control, and Garmin Pay experiences
With a user-centered strategy in place, we began re-architecting the Garmin Forerunner 645 Music’s interface to better support real-time athletic use, focusing on speed, clarity, and tactile navigation. The objective was to streamline key workflows—like music control, workout tracking, and quick access features—into motion-optimized flows that could be reliably executed mid-activity, without visual strain or deep menu diving.
Legacy Workflow Challenges:
Music control required 4–5 button presses, often nested within a modal screen not easily accessible during a run
Workout metrics were distributed across multiple pages, forcing users to flip repeatedly to monitor pace, cadence, and heart rate
Garmin Pay was hard to find, buried beneath system-level menus not labeled with clear affordances
Navigation was inconsistent—short and long presses triggered different outcomes depending on context, creating learnability issues
New Workflow Architecture:
We restructured the interface into a task-based architecture, grouping high-frequency interactions under context-aware clusters:
1. Workout Mode (Primary Loop):
Centralized real-time metrics (Pace, Distance, HR, Time) on a single screen
Enabled horizontal button-swipes to access additional screens (e.g., Elevation, Cadence, Interval Splits)
Introduced Quick-Glance Display Mode with larger font sizes and contrast for night/distance running
Long-press of the START button opened pause, resume, music, and save options in a radial-style overlay
2. Music Control Flow (Inline):
Added a dedicated button shortcut (e.g., DOWN > Hold) to open Music Controls directly
Created persistent Now Playing micro-widget at the bottom of the workout screen for quick feedback
Structured music screen with tactile button support for: Play/Pause, Skip, Volume (up/down), and Audio Source
3. Garmin Pay Flow:
Added Garmin Pay as a long-press shortcut from the Home screen, bypassing traditional Settings navigation
Streamlined authentication: biometric pass-through for mobile-paired devices, or PIN-only during run mode
Created a simplified “Tap to Pay” screen with large visual feedback for successful transactions
Navigation & Interaction Model:
We established a predictable button logic system, aligned with runner muscle memory:
UP/DOWN = Navigate screens (e.g., different data panels)
START/STOP = Confirm or access primary action menu
BACK = Cancel or return to previous layer
Long-Press variants were standardized to call up utility menus or surface quick actions
This interaction model was reinforced through low-fidelity prototypes and flow diagrams, helping the firmware and hardware teams understand how input logic, screen state, and feedback needed to align during physical activity.
By simplifying the architecture into purposeful, motion-aware flows, we gave users faster access to what they cared about most—without sacrificing safety, rhythm, or context during their workouts. This foundation also allowed for future scalability across other Forerunner models and training modes.
04: Wireframing & Prototyping
Transforming ideas into interactive wireframes and prototypes to refine workouts, music, and Garmin Pay experiences.
With a redesigned architecture and button-based interaction model in place, we transitioned into wireframing and prototyping to validate the flow, layout, and affordances of the new interface under real-world conditions. Given the physical context of use—running, cycling, sweating, limited visibility—the fidelity and practicality of every screen and transition mattered.
We approached wireframing with a clear goal: create an interface that was glanceable, minimal, and optimized for non-touch, tactile navigation.
Low-Fidelity Wireframes:
We began with monochrome wireframes mapped to the physical button inputs. These explored:
Single-screen data layouts for real-time workout tracking (pace, distance, heart rate, time)
Horizontal page logic for additional metrics (e.g., VO₂ Max, cadence, elevation gain)
A simplified Now Playing music screen with enlarged icons and a structured 3x2 button grid
A modular Quick Action Overlay for pause/resume, save, and music—all reachable in under two clicks
Wireframes were tested in mock physical scenarios—users were asked to wear a blank prototype while simulating activity (e.g., treadmill runs or wrist rotation) to assess comfort with input logic and glance time.
High-Fidelity Prototypes:
We moved to mid- and high-fidelity screen designs using simplified black-and-white vector mockups—matching the device’s LCD-style display aesthetic.
Prototypes included:
Workout Screen Variants with different visual hierarchies (metric groupings, font scaling, placement optimization)
Music Control Screen with responsive logic tied to button press sequences (e.g., DOWN = skip track, UP = volume)
Garmin Pay Interface featuring tap animations, PIN entry, and feedback for failed vs. successful transactions
Dynamic Overlay States for actions like long-press pause or hold-to-skip, visually previewing the action before confirmation
These were built and simulated using click-through prototypes in Figma and early-stage embedded UI simulations on Garmin’s developer emulator.
Key Design Patterns Tested:
Short press vs. long press behavior and user learnability
Microinteractions (e.g., vibration feedback when skipping a song or locking buttons mid-run)
Progressive disclosure—limiting default screens to essentials, with optional deep dives via side-swipes or long-press
Button-mapped info toggles to quickly swap display from pace to heart rate without interrupting session
The prototyping phase allowed us to rapidly iterate on input timing, data density, and motion-readiness. Each design was stress-tested in context—mid-stride, with sweat, and with gloves—ensuring our interface wasn’t just functional, but highly usable in motion.
These tested prototypes became the foundation for engineering handoff and firmware integration, ensuring design intent remained intact all the way to the final wrist-based experience.
05: User Testing & Validation
Validating intuitive design through real-world athlete testing to refine navigation, music control, and Garmin Pay flows.
To ensure our designs met the demands of real-world athletic performance, we conducted extensive user testing in both controlled and in-motion environments, focusing on clarity, efficiency, and physical usability. Our primary goal was to validate that users could interact with key functions—music, metrics, and controls—without breaking stride or compromising performance.
Testing Participants:
We recruited over 20 users across three cohorts:
Experienced distance runners (10K, half-marathon, marathon)
Recreational athletes and weekend warriors
Multisport users (cyclists, swimmers, triathletes)
Each participant used a functional prototype during simulated or actual workouts (treadmill, track runs, outdoor loops), providing in-the-moment feedback on button logic, screen visibility, and control responsiveness.
Test Scenarios:
Starting, pausing, and resuming a run while in motion
Navigating through live metrics during high-cadence segments
Accessing music controls mid-run (play/pause, skip, volume)
Using Garmin Pay at a post-run café or convenience store
Attempting quick setting adjustments (e.g., brightness, lock mode) without stopping
What We Measured:
Time-on-task for common interactions (e.g., skip song, check pace, pause run)
Glance duration to successfully interpret on-screen data
Error rate in accessing desired functions via button logic
User confidence and flow retention during use
Physical tolerance—did the design reduce cognitive load while under physical strain?
Key Findings:
Glance-first metric screens were highly successful, especially those using larger fonts and 2–3 metrics per screen
Users overwhelmingly preferred button-based music control over touch, praising tactile feedback and simplified logic
Long-press shortcuts were learned quickly, especially when paired with brief haptic feedback
Garmin Pay flow succeeded when surfaced early via a hold-to-pay gesture, but users wanted stronger visual confirmation after payment
A/B testing of music screen designs showed users preferred layouts where skip and volume were physically separated (less mis-press risk)
Design Iterations Based on Feedback:
Refined default workout screen layout to prioritize pace + distance on top, HR + time below
Introduced button lock toggle to avoid accidental input during high-motion segments
Optimized screen brightness and contrast for low-light conditions, especially night runners
Simplified confirmation dialogs with a single “haptic + visual” success cue for Garmin Pay and workout save
This phase confirmed that motion-first UX is about more than visibility—it’s about eliminating friction at the micro-interaction level. With the final prototypes tested and tuned through these sessions, we were confident the interface would enhance—not interrupt—performance for athletes across disciplines.
06: Visual Design & Accessibility
Designing for Movement: A Glanceable, Tactile, and Inclusive UI System Built for Athletes in Motion.
With user testing validating our interaction patterns and workflows, we transitioned into high-fidelity visual design. For the Forerunner 645 Music, the visual system needed to support at-a-glance clarity, tactile orientation, and low-distraction cognition—all while honoring Garmin’s performance-first design language and the technical constraints of the device’s display hardware.
Design Principles:
1. Motion-Centric Legibility
We prioritized screen layouts with 2–3 high-value metrics per view, using large, bold fonts, intuitive iconography, and high-contrast spacing. Layouts were optimized for glanceability under motion, in both daylight and low-light conditions.
2. Hierarchical Visual Structure
We employed clear vertical and horizontal zoning to group information by relevance:
Top row: distance, pace (primary real-time data)
Middle row: heart rate, cadence, or elevation (customizable)
Bottom row: time or music preview widget (supporting layer)
3. Predictable Button-Mapped Layouts
Every action and metric was paired with a consistent spatial and directional pattern. This reinforced muscle memory, allowing users to anticipate where data would appear and how to control it, even without looking.
Accessibility Considerations:
High-Contrast Color Palette: Designed UI elements using a grayscale base with semantically colored accents (green for confirmation, red for errors, yellow/orange for status). Ensured 4.5:1 minimum contrast ratio.
Glove-Friendly Interactions: Avoided touch-reliant elements, designing all interactions for button navigation only.
Low-Light Optimization: Introduced a night running theme with reduced backlight glare, larger fonts, and simplified backgrounds for eye strain reduction.
Icon Consistency: Used international iconography standards for play, pause, skip, lock, and metrics (e.g., HR, pace, distance), supporting global usability and quicker interpretation.
Feedback Layering: Designed dual-mode feedback (haptic + visual) for all primary actions like pausing a workout, skipping a track, or completing a payment.
Scalable UI System:
We created a modular UI system that supported future firmware updates and could extend across Garmin’s Forerunner product line. Design tokens were applied for:
Typography styles (Data-heavy vs. Navigation prompts)
Element spacing and button mapping
Metric display card structures
Interstitial overlays for confirmation, alerts, and Garmin Pay
Outcome:
The final visual design system gave athletes a clean, unobtrusive interface that faded into the background during performance—but was instantly responsive when needed. Every screen and interaction was designed to reduce hesitation, improve reaction time, and support peak physical engagement—from the trail to the track to the city sidewalk.
07: Engineering Handoff & Iteration
Delivering final designs with detailed specs, design systems, and seamless handoff to engineering for implementation. and future Garmin watch interfaces long after launch.
With the interface design finalized and validated through real-world testing, we transitioned into the engineering handoff phase—ensuring our UX vision could be fully realized within Garmin’s firmware environment and hardware constraints. Given the nature of embedded systems and low-power devices, tight collaboration with firmware engineers was essential.
Handoff Deliverables:
We prepared a comprehensive asset package tailored to Garmin’s development tools and system architecture, including:
Button-mapped flow diagrams covering all user journeys: workout, music, Garmin Pay, quick actions
Pixel-precise UI specs for 208x208 resolution display, optimized for memory and battery constraints
Design tokens and UI variables, including font sizes, padding, spacing units, and animation timing
Icon and graphic libraries exported as optimized vector and bitmap assets
Interaction blueprints: button state logic, long/short press behavior, and overlay transitions
Accessibility annotations for contrast, haptic response, and non-visual feedback triggers
Cross-Team Collaboration:
We worked in weekly design-engineering syncs to resolve implementation challenges, review in-device builds, and align on iteration priorities.
Key areas of collaboration included:
Music Control Responsiveness: Optimizing playback button inputs to ensure near-zero latency and preventing double-press misfires during workouts
Garmin Pay Screen Transitions: Ensuring PIN entry, contactless readiness, and confirmation animations remained fluid within hardware constraints
Display Load Efficiency: Balancing font size and screen redraw rates to ensure crisp visuals without battery drain or processor lag
Error State Safeguards: Built fallback flows and toast-style messages for actions like failed syncs, payment declines, or signal loss—minimized user confusion
Iterative Refinement:
Once integrated into test builds, we ran field validation with Garmin testers and athlete beta users, logging feedback for ongoing refinement across firmware sprints.
Notable improvements made during iteration:
Fine-tuned vibration feedback length to better distinguish between pause/resume and skip-track triggers
Reduced button press duration thresholds to account for motion-based variability
Smoothed UI animation curves for modals and transitions to reduce jarring effects mid-activity
Adjusted brightness auto-adjust logic in dark mode to improve usability during night training
Outcome:
The engineering handoff phase ensured that design intent translated into real, high-performance product behavior. Our close loop between design and dev meant that nothing was lost in translation—from button mappings and metric layouts to payment flows and music control logic.
The final result was an experience that not only met Garmin’s technical requirements—but delivered a polished, field-proven interface that athletes could trust without breaking stride.
More Works
Garmin Forerunner 645
UX/UI Technical Case Study
01: Discovery & Research
Uncovering Athlete Needs and Market Gaps to Innovate GPS Watches with Music Storage, Advanced Metrics, and Seamless Garmin Pay Integration for a Superior Fitness Experience.
The Garmin Forerunner 645 Music project began with a clear challenge: design a user interface that could seamlessly support athletes in motion, enabling intuitive interaction with music controls, training data, and payment features—all while maintaining focus on performance.
Our research began with a foundational understanding of real-world usage environments, where glanceability, tactile precision, and sweat-proof interaction were non-negotiable. The watch had to perform flawlessly in motion, under stress, and often with limited visibility or dexterity.
Stakeholder & Market Research:
We conducted interviews with Garmin product leads, engineers, and customer support teams to understand feature priorities, legacy constraints, and known user complaints. In parallel, we reviewed competitive devices (e.g., Apple Watch, Polar, Suunto, Fitbit) to benchmark against industry standards in:
Music interaction while running
Workout tracking and sensor feedback
NFC-based payment (Garmin Pay)
Button vs. touchscreen UI during physical activity
Ethnographic & User Interviews:
We ran in-field observational studies and user interviews with over 30 participants—runners, triathletes, and everyday fitness users. Participants wore the Forerunner 645 during training sessions while narrating their interactions in real time.
Key insights included:
Users preferred tactile button-based navigation over touchscreen due to sweat, motion, and glove use
The music control interface required too many steps, often forcing users to stop or fumble mid-activity
Training metrics were highly valued, but dense screens with unclear hierarchy caused frustration
Runners wanted consistent visual feedback (pace, heart rate, distance) with minimal interaction
Heuristic Analysis:
We audited the existing Garmin interface against UX heuristics for wearables, focusing on:
Responsiveness and input feedback
Visual hierarchy and readability
Error prevention during motion
Cognitive load in navigation paths
This phase revealed that while the Forerunner 645 was packed with features, its core UX hadn’t been optimized for motion-centric use cases. Deep menus, modal interactions, and inconsistent button logic interrupted flow and increased the risk of user error during workouts.
Personas Created:
From these insights, we developed key personas:
The Solo Runner – values quick access to music, pace, and distance mid-run
The Performance Tracker – dives deep into heart rate zones, cadence, and training load
The Commuter Athlete – uses Garmin Pay and music during short workouts between work obligations
This discovery phase gave us a grounded understanding of user needs and environmental context ensuring that every subsequent UX decision prioritized glanceable design, muscle-memory navigation, and frictionless control for athletes in motion.
02 Problem Framing & UX Strategy
Designing a smartwatch interface focused on sweat-proof navigation, glanceable metrics, offline playlists, and seamless Garmin ecosystem syncing.
The Forerunner 645 Music was built for athletes but its UI didn’t always support athletic movement. While the hardware was durable, fast, and sensor-rich, the experience of interacting with the device mid-activity revealed clear usability gaps. Based on research insights, we reframed the core problem:
“How might we enable active users to confidently control music, monitor performance, and access key features—without interrupting their pace, flow, or focus during workouts?”
We needed to redesign not just how the device looked—but how it felt to use in motion.
Key UX Challenges Identified:
Cognitive Overload: Dense screens with minimal visual hierarchy forced users to slow down or stop to interpret metrics.
Navigation Friction: Deep, inconsistent button logic and modal structures created confusion during dynamic activity.
Hidden Features: Core experiences like music playback and Garmin Pay were buried or required too many steps to access.
Motion-Unfriendly Design: Small touch targets, reliance on long-press actions, and lack of haptic feedback diminished confidence during use.
Our UX strategy focused on designing for glanceability, muscle memory, and physical rhythm, ensuring the interface felt like an extension of the athlete rather than a distraction.
UX Strategy Pillars:
1. Glance-First Design:
Simplify and restructure key workout screens to prioritize real-time metrics like pace, distance, heart rate, and music status. Use typography, contrast, and spacing to reduce interpretation time under motion.
2. Tactile Navigation Optimization:
Standardize button behavior (short press vs. long press), reduce reliance on multi-layer menus, and define clear logic for left/right/up/down patterns that align with how runners use their fingers mid-stride.
3. Surface High-Frequency Features:
Elevate music controls, Garmin Pay, and pause/resume workout to be accessible within one to two button presses—no deep nesting. Design fallback states and contextual overlays for rapid re-entry.
4. Build for Motion, Not Just Vision:
Incorporate haptic feedback cues, pre-loaded screen layouts for muscle memory recall, and simplified confirmation dialogs so actions can be completed without prolonged focus.
This strategy reframed the Forerunner 645 from a feature-packed smartwatch into a motion-ready fitness tool, reducing interaction time, minimizing error risk, and building trust during high-intensity moments. It also ensured the design would scale across future firmware updates and training modes—while staying true to Garmin’s brand as a performance-first wearable.
03: Architecture & Workflow
Designing clear flows and intuitive architecture for seamless workouts, music control, and Garmin Pay experiences
With a user-centered strategy in place, we began re-architecting the Garmin Forerunner 645 Music’s interface to better support real-time athletic use, focusing on speed, clarity, and tactile navigation. The objective was to streamline key workflows—like music control, workout tracking, and quick access features—into motion-optimized flows that could be reliably executed mid-activity, without visual strain or deep menu diving.
Legacy Workflow Challenges:
Music control required 4–5 button presses, often nested within a modal screen not easily accessible during a run
Workout metrics were distributed across multiple pages, forcing users to flip repeatedly to monitor pace, cadence, and heart rate
Garmin Pay was hard to find, buried beneath system-level menus not labeled with clear affordances
Navigation was inconsistent—short and long presses triggered different outcomes depending on context, creating learnability issues
New Workflow Architecture:
We restructured the interface into a task-based architecture, grouping high-frequency interactions under context-aware clusters:
1. Workout Mode (Primary Loop):
Centralized real-time metrics (Pace, Distance, HR, Time) on a single screen
Enabled horizontal button-swipes to access additional screens (e.g., Elevation, Cadence, Interval Splits)
Introduced Quick-Glance Display Mode with larger font sizes and contrast for night/distance running
Long-press of the START button opened pause, resume, music, and save options in a radial-style overlay
2. Music Control Flow (Inline):
Added a dedicated button shortcut (e.g., DOWN > Hold) to open Music Controls directly
Created persistent Now Playing micro-widget at the bottom of the workout screen for quick feedback
Structured music screen with tactile button support for: Play/Pause, Skip, Volume (up/down), and Audio Source
3. Garmin Pay Flow:
Added Garmin Pay as a long-press shortcut from the Home screen, bypassing traditional Settings navigation
Streamlined authentication: biometric pass-through for mobile-paired devices, or PIN-only during run mode
Created a simplified “Tap to Pay” screen with large visual feedback for successful transactions
Navigation & Interaction Model:
We established a predictable button logic system, aligned with runner muscle memory:
UP/DOWN = Navigate screens (e.g., different data panels)
START/STOP = Confirm or access primary action menu
BACK = Cancel or return to previous layer
Long-Press variants were standardized to call up utility menus or surface quick actions
This interaction model was reinforced through low-fidelity prototypes and flow diagrams, helping the firmware and hardware teams understand how input logic, screen state, and feedback needed to align during physical activity.
By simplifying the architecture into purposeful, motion-aware flows, we gave users faster access to what they cared about most—without sacrificing safety, rhythm, or context during their workouts. This foundation also allowed for future scalability across other Forerunner models and training modes.
04: Wireframing & Prototyping
Transforming ideas into interactive wireframes and prototypes to refine workouts, music, and Garmin Pay experiences.
With a redesigned architecture and button-based interaction model in place, we transitioned into wireframing and prototyping to validate the flow, layout, and affordances of the new interface under real-world conditions. Given the physical context of use—running, cycling, sweating, limited visibility—the fidelity and practicality of every screen and transition mattered.
We approached wireframing with a clear goal: create an interface that was glanceable, minimal, and optimized for non-touch, tactile navigation.
Low-Fidelity Wireframes:
We began with monochrome wireframes mapped to the physical button inputs. These explored:
Single-screen data layouts for real-time workout tracking (pace, distance, heart rate, time)
Horizontal page logic for additional metrics (e.g., VO₂ Max, cadence, elevation gain)
A simplified Now Playing music screen with enlarged icons and a structured 3x2 button grid
A modular Quick Action Overlay for pause/resume, save, and music—all reachable in under two clicks
Wireframes were tested in mock physical scenarios—users were asked to wear a blank prototype while simulating activity (e.g., treadmill runs or wrist rotation) to assess comfort with input logic and glance time.
High-Fidelity Prototypes:
We moved to mid- and high-fidelity screen designs using simplified black-and-white vector mockups—matching the device’s LCD-style display aesthetic.
Prototypes included:
Workout Screen Variants with different visual hierarchies (metric groupings, font scaling, placement optimization)
Music Control Screen with responsive logic tied to button press sequences (e.g., DOWN = skip track, UP = volume)
Garmin Pay Interface featuring tap animations, PIN entry, and feedback for failed vs. successful transactions
Dynamic Overlay States for actions like long-press pause or hold-to-skip, visually previewing the action before confirmation
These were built and simulated using click-through prototypes in Figma and early-stage embedded UI simulations on Garmin’s developer emulator.
Key Design Patterns Tested:
Short press vs. long press behavior and user learnability
Microinteractions (e.g., vibration feedback when skipping a song or locking buttons mid-run)
Progressive disclosure—limiting default screens to essentials, with optional deep dives via side-swipes or long-press
Button-mapped info toggles to quickly swap display from pace to heart rate without interrupting session
The prototyping phase allowed us to rapidly iterate on input timing, data density, and motion-readiness. Each design was stress-tested in context—mid-stride, with sweat, and with gloves—ensuring our interface wasn’t just functional, but highly usable in motion.
These tested prototypes became the foundation for engineering handoff and firmware integration, ensuring design intent remained intact all the way to the final wrist-based experience.
05: User Testing & Validation
Validating intuitive design through real-world athlete testing to refine navigation, music control, and Garmin Pay flows.
To ensure our designs met the demands of real-world athletic performance, we conducted extensive user testing in both controlled and in-motion environments, focusing on clarity, efficiency, and physical usability. Our primary goal was to validate that users could interact with key functions—music, metrics, and controls—without breaking stride or compromising performance.
Testing Participants:
We recruited over 20 users across three cohorts:
Experienced distance runners (10K, half-marathon, marathon)
Recreational athletes and weekend warriors
Multisport users (cyclists, swimmers, triathletes)
Each participant used a functional prototype during simulated or actual workouts (treadmill, track runs, outdoor loops), providing in-the-moment feedback on button logic, screen visibility, and control responsiveness.
Test Scenarios:
Starting, pausing, and resuming a run while in motion
Navigating through live metrics during high-cadence segments
Accessing music controls mid-run (play/pause, skip, volume)
Using Garmin Pay at a post-run café or convenience store
Attempting quick setting adjustments (e.g., brightness, lock mode) without stopping
What We Measured:
Time-on-task for common interactions (e.g., skip song, check pace, pause run)
Glance duration to successfully interpret on-screen data
Error rate in accessing desired functions via button logic
User confidence and flow retention during use
Physical tolerance—did the design reduce cognitive load while under physical strain?
Key Findings:
Glance-first metric screens were highly successful, especially those using larger fonts and 2–3 metrics per screen
Users overwhelmingly preferred button-based music control over touch, praising tactile feedback and simplified logic
Long-press shortcuts were learned quickly, especially when paired with brief haptic feedback
Garmin Pay flow succeeded when surfaced early via a hold-to-pay gesture, but users wanted stronger visual confirmation after payment
A/B testing of music screen designs showed users preferred layouts where skip and volume were physically separated (less mis-press risk)
Design Iterations Based on Feedback:
Refined default workout screen layout to prioritize pace + distance on top, HR + time below
Introduced button lock toggle to avoid accidental input during high-motion segments
Optimized screen brightness and contrast for low-light conditions, especially night runners
Simplified confirmation dialogs with a single “haptic + visual” success cue for Garmin Pay and workout save
This phase confirmed that motion-first UX is about more than visibility—it’s about eliminating friction at the micro-interaction level. With the final prototypes tested and tuned through these sessions, we were confident the interface would enhance—not interrupt—performance for athletes across disciplines.
06: Visual Design & Accessibility
Designing for Movement: A Glanceable, Tactile, and Inclusive UI System Built for Athletes in Motion.
With user testing validating our interaction patterns and workflows, we transitioned into high-fidelity visual design. For the Forerunner 645 Music, the visual system needed to support at-a-glance clarity, tactile orientation, and low-distraction cognition—all while honoring Garmin’s performance-first design language and the technical constraints of the device’s display hardware.
Design Principles:
1. Motion-Centric Legibility
We prioritized screen layouts with 2–3 high-value metrics per view, using large, bold fonts, intuitive iconography, and high-contrast spacing. Layouts were optimized for glanceability under motion, in both daylight and low-light conditions.
2. Hierarchical Visual Structure
We employed clear vertical and horizontal zoning to group information by relevance:
Top row: distance, pace (primary real-time data)
Middle row: heart rate, cadence, or elevation (customizable)
Bottom row: time or music preview widget (supporting layer)
3. Predictable Button-Mapped Layouts
Every action and metric was paired with a consistent spatial and directional pattern. This reinforced muscle memory, allowing users to anticipate where data would appear and how to control it, even without looking.
Accessibility Considerations:
High-Contrast Color Palette: Designed UI elements using a grayscale base with semantically colored accents (green for confirmation, red for errors, yellow/orange for status). Ensured 4.5:1 minimum contrast ratio.
Glove-Friendly Interactions: Avoided touch-reliant elements, designing all interactions for button navigation only.
Low-Light Optimization: Introduced a night running theme with reduced backlight glare, larger fonts, and simplified backgrounds for eye strain reduction.
Icon Consistency: Used international iconography standards for play, pause, skip, lock, and metrics (e.g., HR, pace, distance), supporting global usability and quicker interpretation.
Feedback Layering: Designed dual-mode feedback (haptic + visual) for all primary actions like pausing a workout, skipping a track, or completing a payment.
Scalable UI System:
We created a modular UI system that supported future firmware updates and could extend across Garmin’s Forerunner product line. Design tokens were applied for:
Typography styles (Data-heavy vs. Navigation prompts)
Element spacing and button mapping
Metric display card structures
Interstitial overlays for confirmation, alerts, and Garmin Pay
Outcome:
The final visual design system gave athletes a clean, unobtrusive interface that faded into the background during performance—but was instantly responsive when needed. Every screen and interaction was designed to reduce hesitation, improve reaction time, and support peak physical engagement—from the trail to the track to the city sidewalk.
07: Engineering Handoff & Iteration
Delivering final designs with detailed specs, design systems, and seamless handoff to engineering for implementation. and future Garmin watch interfaces long after launch.
With the interface design finalized and validated through real-world testing, we transitioned into the engineering handoff phase—ensuring our UX vision could be fully realized within Garmin’s firmware environment and hardware constraints. Given the nature of embedded systems and low-power devices, tight collaboration with firmware engineers was essential.
Handoff Deliverables:
We prepared a comprehensive asset package tailored to Garmin’s development tools and system architecture, including:
Button-mapped flow diagrams covering all user journeys: workout, music, Garmin Pay, quick actions
Pixel-precise UI specs for 208x208 resolution display, optimized for memory and battery constraints
Design tokens and UI variables, including font sizes, padding, spacing units, and animation timing
Icon and graphic libraries exported as optimized vector and bitmap assets
Interaction blueprints: button state logic, long/short press behavior, and overlay transitions
Accessibility annotations for contrast, haptic response, and non-visual feedback triggers
Cross-Team Collaboration:
We worked in weekly design-engineering syncs to resolve implementation challenges, review in-device builds, and align on iteration priorities.
Key areas of collaboration included:
Music Control Responsiveness: Optimizing playback button inputs to ensure near-zero latency and preventing double-press misfires during workouts
Garmin Pay Screen Transitions: Ensuring PIN entry, contactless readiness, and confirmation animations remained fluid within hardware constraints
Display Load Efficiency: Balancing font size and screen redraw rates to ensure crisp visuals without battery drain or processor lag
Error State Safeguards: Built fallback flows and toast-style messages for actions like failed syncs, payment declines, or signal loss—minimized user confusion
Iterative Refinement:
Once integrated into test builds, we ran field validation with Garmin testers and athlete beta users, logging feedback for ongoing refinement across firmware sprints.
Notable improvements made during iteration:
Fine-tuned vibration feedback length to better distinguish between pause/resume and skip-track triggers
Reduced button press duration thresholds to account for motion-based variability
Smoothed UI animation curves for modals and transitions to reduce jarring effects mid-activity
Adjusted brightness auto-adjust logic in dark mode to improve usability during night training
Outcome:
The engineering handoff phase ensured that design intent translated into real, high-performance product behavior. Our close loop between design and dev meant that nothing was lost in translation—from button mappings and metric layouts to payment flows and music control logic.
The final result was an experience that not only met Garmin’s technical requirements—but delivered a polished, field-proven interface that athletes could trust without breaking stride.
More Works