How to Design Wireframes for a Workout App

Designing a solution for the problem of static text workouts to make them easy to follow and fun to complete.

Photo by John Arano on Unsplash

This is the first post in a series of posts on how to plan, design and build a workout app. In this post, we will explore the problem, plan out features for the app and learn how to design wireframes for the workout app.

Let’s start with the problems I currently face when I’m completing a workout from my plan.

The problems

• My current workout plan is a slab of text in a google doc. This makes it hard to read and follow while in the gym.
• There is no easy way to keep track of my workout progress.
• It’s easy to accidentally scroll to the next workout by accident.
• It’s hard to read, and not pretty.

A quick breakdown of workout lingo:

• A rep is a single exercise e.g. a single squat or a 10-second plank.
• A set is a group of exercises e.g. repeat 10 reps of 5kg weighted squats 4 times. These can have varying weights.
• A workout is a group of a couple of sets of a variety of exercises. Usually, sets of the same exercise…