UI/UX Wireframes

Emmanuel BRUNO
emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2025-03-17

UI/UX Wireframes

This document contains wireframes for key screens and user flows in the fitness tracking application. These wireframes focus primarily on the MVP features (Must Have) with some additional wireframes for Should Have features to show the evolution of the app across releases.

Key User Flows

1. Browsing and Starting a Workout Program (E01-F01, E01-F02, E01-F03)

This flow shows how users discover workout programs, view their details, and start a workout session.

Programs List

Key Components: 1. Category filters at the top 2. Search functionality 3. Program cards showing: - Difficulty level - Estimated duration - Target muscle groups (with icons) - Rating (if applicable) 4. Sort options

Program Details

Key Components: 1. Program overview with key metrics 2. Workout day tabs/carousel 3. Exercise list with sets/reps 4. “Start Workout” prominent button 5. Schedule option

Workout in Progress

Key Components: 1. Current exercise details and demonstration 2. Progress indicator (current exercise/total) 3. Set tracking interface 4. Rest timer 5. Previous/next exercise navigation 6. Pause/end workout controls

2. Exercise Library and Information (E05-F01, E05-F03)

This flow shows how users browse the exercise library and view detailed exercise information.

Exercise Library

Key Components: 1. Search bar 2. Multiple filter options (muscle group, equipment, difficulty) 3. Active filters display 4. Exercise list with preview images 5. Quick favorite option

Exercise Details

Key Components: 1. Exercise demonstration (image/video) 2. Detailed description 3. Primary and secondary muscles highlighted 4. Form cues and common mistakes 5. Tutorial video options 6. “Add to Workout” option

3. Recording and Viewing Workout History (E02-F01, E02-F02)

This flow shows how users record their performance during a workout and view their workout history.

Set Recording

Key Components: 1. Weight and reps input 2. Previous performance for reference 3. Difficulty rating 4. Rest timer countdown 5. Notes option 6. Quick set completion buttons

Workout History

Key Components: 1. Calendar view with workout indicators 2. List view option 3. Summary metrics (total workouts, volume, etc.) 4. Recent workouts with key data 5. Filter options

Workout Details History

Key Components: 1. Workout summary statistics 2. Exercise-by-exercise breakdown 3. Performance comparison with previous sessions 4. Notes and highlights 5. Share/export options

4. Managing Workout Session State (E01-F04)

This flow shows how users pause, resume, and manage interruptions during a workout.

Workout Paused

Key Components: 1. Clear “Paused” indicator 2. Resume and end workout options 3. Elapsed workout time 4. Current progress indicator 5. Option to modify remaining exercises

Workout Recovery

Key Components: 1. Recovery notification after app restart 2. Workout summary up to interruption point 3. Options to resume or end workout 4. Clear explanation of what happened

Release 1.0 Features

5. Custom Workout Creation (E03-F01)

Create Custom Workout

Key Components: 1. Workout name and details input 2. Exercise search and browse 3. Exercise configuration (sets, reps, rest) 4. Drag-handle for reordering 5. Smart suggestions based on selected exercises

6. Exercise Substitution (E04-F02)

Exercise Substitution

Key Components: 1. Original exercise display 2. Alternatives sorted by similarity 3. Equipment filter options 4. Side-by-side comparison 5. Preview of how workout will look after substitution

Design Considerations per Persona

Emma (Fitness Beginner)

  • Prominent exercise tutorials and form guides
  • Clear, simple workout interfaces with minimal distractions
  • Encouraging feedback and guidance
  • Progressive disclosure of advanced features

Marcus (Experienced Lifter)

  • Detailed performance tracking and metrics
  • Efficient workout recording with minimal taps
  • Data export options and advanced statistics
  • Quick access to customization options

Sarah (Busy Professional)

  • Quick-start functionality from home screen
  • Simplified interrupted workout recovery
  • Time-efficient interface with minimal steps
  • Clear session state management

Robert (Active Senior)

  • Larger touch targets and text
  • Simplified interface with clear labeling
  • Safety-focused exercise guidance
  • Fewer options per screen to reduce cognitive load

Alex (Fitness Enthusiast)

  • Advanced customization options
  • Detailed analytics and progress visualization
  • Content creation and sharing capabilities
  • Integration with other fitness platforms

Accessibility Considerations

All wireframes should be implemented with the following accessibility considerations:

  1. Sufficient color contrast (WCAG AA compliance)
  2. Proper heading structure for screen readers
  3. Touch targets at least 48x48dp
  4. Text scaling support up to 200%
  5. Alternative text for all informational images
  6. Voice-over/TalkBack support for all interactive elements
  7. Support for system-level dark mode

Responsive Design Approach

The wireframes should adapt to different screen sizes using the following guidelines:

  1. Small phones (320dp-360dp width):
    • Single-column layouts
    • Simplified navigation
    • Focused content with minimal decoration
  2. Standard phones (360dp-400dp width):
    • The baseline design shown in wireframes
    • Balanced information density
  3. Large phones (400dp-600dp width):
    • Slightly higher information density
    • More controls visible without scrolling
  4. Tablets (600dp+ width):
    • Two-column layouts where appropriate
    • Side-by-side display of related information
    • More persistent on-screen controls