UX Designer – Richard John – Exercise Bike Interface: “Undisclosed” Wireframe Project
1. The Layout Overview:
The most critical “live” stats sit at the top, the primary visual engagement (scenery or class) is in the center, and controls are at the bottom within easy reach of the handlebars.
2. Functional Sections:
Section: Header
Element: Stats Bar
Purpose: Persistent display of Heart Rate (BPM), Cadence (RPM), and Resistance Level.
Section: Main Content
Element: Viewport
Purpose: Toggle between a “Scenic Route,” “Live Instructor,” or “Data-Only Focus Mode.”
Section: Right Sidebar
Element: Leaderboard
Purpose: Social proofing and gamification to drive user retention.
Section: Footer
Element: Controls
Purpose: Large, high-contrast buttons for “Pause,” “End Workout,” and Volume.
3. Wireframe Component Breakdown:
Center: Current Speed (e.g., 24 km/h)
Left: Heart Rate Icon + 145 BPM (Color-coded: Orange for “Cardio Zone”)
Right: Resistance Level (e.g., Level 12)
The Dynamic Center Focus:
Occupy 60% of the screen.
Visual: A placeholder rectangle with a “Play” icon.
Overlay: A transparent progress bar at the bottom of the video showing “Time Remaining” (12:45 / 30:00) and “Calories Burned” (320\text {kcal}).
Interaction Zone (Bottom):
Since users may have sweaty hands or be moving, buttons should be at least 88 pixel x 88 pixel (touch targets).
Slider: A horizontal slider for resistance adjustment (easier to use than a small ‘+’ or ‘-‘ button).
Toggle: A “Metric Toggle” to switch between Watts and Speed.
4. User Experience (UX) Rationale:
• High Contrast: Used a Dark Mode aesthetic to reduce eye strain in low-light home gym environments.
• Safety First: Placed the “Emergency Stop” or “End” button on the far right, away from common adjustment toggles to prevent accidental exits.
• Visual Hierarchy: Prioritized Cadence (RPM) over all other metrics, as it is the primary driver for indoor cycling efficiency.