Short introduction to the “Workout Timer App”

The workout timer app is a native iOS app with which the user can configure individual
workout timers and run them during their workout to track the time.

Key features:

- The user can configure a complex workout timer, for example it’s possible to have a
timer which consists of multiple groups of workouts where each group can run
multiple times and for each workout the timer can count differently, e.g. up or down or
number of repetitions.
- Shows the current workout time along with all the other relevant information during a
workout, e.g. number of rounds, which exercise is currently active, total time elapsed,
time remaining until end or reaching the time cap, etc.
- The user can track the number of repetitions during the workout, e.g. by tapping a
counter then the app counts it up and that will then be presented on the result screen
after finishing the workout.

An example of a workout:

“AMRAP 20” stands for “As Many Rounds As Possible within 20 minutes”. Thus the time
cap is 20 minutes.

This workout might have as an example 2 groups of exercises.

The first group consists only of one exercise named “Countdown”. This runs only once for 10
seconds and should give the user time to prepare for the workout. Because of that this
exercise is marked to be not counted towards the total workout time and its time cap.

After 10 seconds the exercise has finished and since it’s the only one exercise in this group
and the group is also played only one time the group finishes. So, the workout continues with
the next group.

The second group consists of two exercises: “Run” and “Rest”. The first exercise has a time
of 9 minutes and the second exercise of 1 minute. The group has a multiplier of 2. That
means the user has to run for 9 minutes, then rest for 1 minute, run again for 9 minutes and
finally rest again for 1 minute.

After that the group is finished and since it was the last group in the workout it will finish the
workout as well.
Description of the functionality of the “Timer Run Screen”
This screen is shown when the user is currently doing the workout thus the timer is running,
counts the time and repetitions while providing the current tracked information to the user.

The image is only an example. Currently the color code is as follows: White is interactable by
the user thus it indicates it or its surrounding box can be pressed. Yellow is static information
and thus not interactable. A group of exercises is represented with a yellow color (which kind
of mixes up with the non-interactable color which is bad). An exercise is represented with a
blue color. Touchable areas are bordered with a black line.

However, colors, font, icons, arrangement, additional representations, etc. are all open to be
changed as like. Important is only that the given functionality is reflected by the design.

Hint: The currently used icons are SF Symbols provided by Apple. That should be kept at
least for the first design. We can have a discussion about that later and maybe introduce
custom icons in the next design cycle, but currently please keep the SF Symbols or use at
least only quick replacement mocks to keep the effort reduced on this and focussed on the
rest of the design.
Functionality requirements of the screen:

- The name of the current workout, e.g. “AMRAP 20”.

- The workout’s user-defined color, e.g. purple.
- The user can abort the timer and go back to the previous screen, e.g. back-button at
the upper left corner.
- The user can finish the workout even when there is time left and thus continuing to
the result screen, e.g. stop-button at the upper right corner
- Three tough areas are shown which represents some kind of grouped information
and the user can interact with:
- “Total overview box”, e.g. first of the three boxes which has a green-red bar
inside.
- “Current time box”, e.g. middle box with the double lined circles.
- “Counter box”, e.g. last box showing the title “Counter”.

Requirements of the “Total overview box”:

- The currently elapsed total time summed up, i.e. the green “1:15” which shows how
long the user is already working out.
- The remaining total time for that workout, i.e. the red “13:45” which shows how much
time for the workout remains or how long to reach the time cap.
- The current total progress of the workout, i.e. the green and red bars show how much
of the workout has been finished and how much is left.
- A rough overview of the exercises of the workout, i.e. the blue lines in the
green-red-bar shows when the next exercise starts.
- When tapping somewhere in the box the timer should jump to the beginning of the
next exercise, so the user can skip the rest of the current exercise. This is indicated
by the white forward icon as an example.

Requirements of the “Current time box”:

- The timer of the current exercise, e.g. “99:99”. This might either count up or down
depending on the exercise’s configuration.
- The name of the exercise, i.e. “A very long description…”. This should display the
real exercise, e.g. “5 Push-ups” or “Run”. This text will also be spoken out by the app.
- The current exercise number of that group and the total number of exercises, e.g.
“1/3" which stands for exercise 1 of 3. Therefore, this is the first exercise, but the
group might have either 3 different exercises which are all played once or it might
have one exercise which is played 3 times because of a “3x” multiplier. That
information is currently not visible and not necessarily important here.
- The total time of the current exercise, e.g. “1:30”. The white big number counts up
from 0 to this one or counts from this one down to 0. Only the current concrete
exercise time is shown, thus, even when the group has a “3x” multiplier which will
make the exercise to be run 3 times the exercise’s time is still displaying “1:30” and
not “4:30”.
 - A rough overview of the exercise’s progress, i.e. the blue circle line shows the
elapsed time only for that exercise. When the line closes the circle then the next
exercise will be played and the line starts again to fill up.
- A rough overview of the group’s progress, i.e. the yellow circle line shows the
elapsed time of the current active group. So, when there are 3 exercises in this group
then it shows the total progress over these 3 exercises. When one group is finished
and the next group is played then the yellow line starts again a new circle.
- When tapping somewhere in the box then the running timer gets paused. When it
was on pause then it should continue to run. This is indicated by the big gray play
icon in the background which switches to a pause icon when on pause.

Requirements of the “Counter box”:

- An optional title to hint that this is a counter, i.e. the yellow “Counter”.
- The current counter, i.e. the white “0”.
- When tapping somewhere in the box the counter gets increased by one. This is only
an optional functionality for the user to count for example the achieved repetitions of
an exercise. For example when the exercise says “Run” and lasts for 9 minutes then
the user might want to tap on the counter for each round achieved during this
exercise so he can keep track of how many rounds he achieved during these 9
minutes.
- Optional (not represented in the image): A rough overview of the history of the
counters of the last exercises. Only having one counter is kind of limitating, because
when the workout consists of multiple exercises then the user might want to count
the repetitions of each exercise separately. So, instead of mixing up the number of
rounds run with the number of push-up repetitions the user might want to have
multiple numbers at the end so he can see how many rounds and how many
push-ups he has achieved. These should also be separate for each group and for
each group’s multiplier, so, when doing 3 times run then the user might want to have
3 distinct counters to see how many running rounds he achieved during each group’s
round. Might be good to have a visual clue that the previous exercise’s counter is
tracked and what it was, otherwise the counter will reset to 0 when a new exercise
starts and that might irritate the user.