Logo of UI Challenges
Sign in

Gallery

See what others have created

Workouts
U

unpublishedhanging

@unpublishedhanging

MediumMobile Web

Workouts

Design a workout pattern for a fitness app that moves cleanly from planning to execution to review. Start with a screen that shows today’s workout, total time, and one primary action to begin. If there’s a calendar or schedule, it should support the decision to work out now, not compete with it.

Once the workout starts, the interface needs to stay usable in motion. Show the current exercise, set count, reps, rest timer, and the next exercise without hiding the current context. Include controls for pause, skip, and end workout, plus fast logging for weight, reps, and completion. If you use media, keep it tied to the current exercise, not as decoration.

After each set and at the end of the workout, show clear feedback: what was completed, what’s left, and whether the user beat a previous result. The finished state should summarize duration, volume, calories or effort if relevant, and a next step such as save, repeat, or start a cooldown. Keep the layout compact, legible, and built for quick taps.

What to deliver

  • Design a workout overview with today’s plan, duration, and primary start action.
  • Show the active workout state with exercise name, set/rep targets, timer, and next exercise.
  • Include logging controls for reps, weight, time, and completed sets.
  • Add pause, skip, and finish states with clear recovery options.
  • Show progress after completion with summary stats and next-step CTA.

For an engaging 'Workouts' UI, mimic the energy of a great workout session with dynamic elements such as animated progress circles or motivational pop-ups upon completion of a workout challenge.