During a set
Load, repetitions and progression sit together. Navigation should not compete with the exercise.
PB.FIT
An interface for
the moment of training.
Product design for a workout PWA: sets, rest, history and session continuity, with AI proposals reviewed before saving.
- Scope
- Product · Interface · Interaction
- Platform
- PWA / mobile first
PLAN. TRAIN. CONTINUE.
The next step,
without searching.
Sets, rest and exercise memory.Try the interface ↘
01 / THE CONTEXT
Divided attention.
One hand on the phone.
The app is used between sets, in changing light, with little time to hunt for a control. The interface needs to make the next action obvious.
Between sessions
The previous record belongs to the exercise, even when it appears in a different workout.
On return
Pausing, resuming and finishing are different states. Continuity needs to preserve what has already been logged.
02 / FROM PROGRAM TO SET
A routine has
more than one workout.
A program brings workouts together. Each workout has its exercises, days and times. During a session, the interface shifts priorities: from organizing the week to completing the next set.
- 01 / PROGRAM
The routine’s structure
A name, visual identity and a set of workouts. Multiple programs can coexist.
- 02 / WORKOUT
The plan for that day
Exercises, order, weekdays, period and time. Standalone workouts also have a place.
- 03 / EXECUTION
What happens in a set
Movement reference, previous record, load, repetitions and rest in the exercise’s context.
ACTUAL APPLICATION INTERFACE
Step into the flow.
Scroll the screens.
Swipe between programs and scroll to find workouts. You can open, create and edit in this demonstration.
The code and screens come from PB.FIT. Programs and records are fictional; changes stay in this demonstration and reset when you switch screens. The product interface is shown in Portuguese.
↕ Scroll inside the screen to explore
FEEDBACK → ITERATION
Dragging needed
an alternative.
“Organizing workouts by dragging is also not working well on the iPhone. It isn’t intuitive either.”
Usage feedback recorded during development · October 2026
Problem
Scrolling a list and reordering a workout competed for the same gesture. The drag target did not make the starting action clear.
Decision
“Organize” reveals 44 px handles. The card follows the finger, the list scrolls at the edges and tapping the handle offers one-position moves.
Verification
Saved order, scrolling, cancellation and the tap alternative were checked in a mobile simulation. The record does not include a subsequent physical iPhone validation.
03 / MOVEMENT LANGUAGE
An exercise also
needs to be understood.
The library connects an exercise’s name to its execution. The session keeps a visual reference above set logging, without taking the person out of their workout.
REVISED MOVEMENTS / VECTOR CODE
A vocabulary
for movement.
The study articulates the body, draws equipment and marks the path in blue. The same visual system applies to different exercises.
In the leg press, the side view highlights leg flexion and extension and the platform’s path. The animation can be paused to observe the movement.
04 / AI IN THE WORKFLOW
A proposal goes
through a person.
Assisted generation starts from the user’s preferences and context. The proposal can be reviewed before becoming part of their workouts.
- 01
Context
Goals, routine and preferences.
- 02
Proposal
A suggested workout structure.
- 03
Review
Adjust and decide before saving.
- 04
Execution
Log what was actually completed.
The Companion and library connect a proposal to workout organization. History records execution, not just planning.
05 / THE DELIVERY
A product for the workout routine.
A PWA connecting workout organization, set-by-set execution, exercise references and personal history. This case focuses on interface and continuity decisions.
Open PB.FIT ↗The product requires account access.