Recognise it.
Then try it.
Lisa’s archived feedback asked for demonstrations during training. The new flow begins even earlier: identify the parts and check the setup before watching the movement.
Fitness, at your pace.UX / UI · Mobile concept
Your starting pointOne small step
is a real start.01 / GET TO KNOW THE GYM
is a real start.01 / GET TO KNOW THE GYM
01 / The ideaA less intimidating first visit
A first step.
Not a finish line.
An unfamiliar gym can make even a simple workout feel like a big decision.
FitStart is a mobile concept for people finding their feet. This chapter follows one first encounter with the cable row: recognise the equipment, preview the movement and decide what support comes next.
The latest refinement gives the gym a visual presence through equipment illustrations, while keeping instructions, controls and choices easy to read.
- My contribution
- UX/UI and interaction design
- Project
- Beginner fitness app concept
- This edition
- First-visit flow · Design system / M3 review
The gym, made recognisable.
From unfamiliar
to “that’s the handle.”
The equipment is part of the explanation. Numbered hotspots connect each name to a physical part; a close-up helps people recognise what to look for.
Explore the equipment guide ↗FITSTART / EQUIPMENT FIELD GUIDE
01 SEAT 02 HANDLE 03 WEIGHTCABLE ROW / 01
02 / The design directionA clearer role for every detail
Confidence
comes in steps.
The early concept explored demonstrations, progress and training buddies. This refinement concentrates on the uncertainty of a first visit.
Recognise it.
A sequence
you control.
Layda’s feedback asked for more visible progress. Explore, Practise and Reflect now show where you are. The movement has three selectable phases and a play/pause control.
A check-in
that changes something.
“More familiar”, “Still unsure” and “Too much today” lead to different next-visit suggestions. This is a new design hypothesis: a smaller next step may be more useful than a generic completion reward.
Evidence context ＋
Lisa and Layda references paraphrase feedback recorded on pages 4–5 of the original portfolio. Participant counts, recruitment and the test protocol still need confirmation. The original buddy direction remains optional; this first-visit refinement and its feedback branches have not been evaluated in a new study.
03 / Try the experienceAn interactive concept
See it. Try it.
Make it yours.
One first visit, with room to change course.
Tap the equipment parts, play the movement or inspect each phase. Start a set, pause when you need to, then see how your check-in changes the next visit.
A simplified, local demonstration. No account, payment or external service is connected. Changes reset when the page reloads.
04 / The interfacesRecognise · practise · reflect
One journey.
Different needs.
A consistent frame connects each stage. Content, colour and controls change with the task, from inspecting an unfamiliar machine to choosing a gentler next step.
Interface collection / tap to enlarge
V2 refinement: specific equipment guidance replaces a generic workout card; a controllable movement sequence replaces a static demonstration; a check-in now informs the next screen.
05 / Design system / M3 reviewIdentity with a job to do
Warm in tone.
Clear in use.
The original pink, mint, yellow and teal stay. Their roles become more deliberate, supported by readable type, consistent spacing and reusable interaction states.
Mint / Recognise#78D1C4
Equipment & context
Equipment & context
Yellow / Notice#FDDB88
Active states & next steps
Active states & next steps
Teal / Act#0B6670
Primary actions
Primary actions
Soft pink / Reflect#FCEEEE
A quiet supporting surface
A quiet supporting surface
Inter / Interface typographyMeet the
Meet the
cable row.
Find the bench facing the cable.
Equipment varies by gym.Small rules. A connected experience.
- Illustrations explain. Equipment, close-ups and movement poses share the same drawing language. Decoration stays away from instructions.
- States stay visible. Number, outline and fill show selection together. Labels remain visible during playback.
- Controls have room. 48 px touch targets, 56 px fields and 54 px primary actions sit within a consistent 24 px content margin.
06 / Looking backA proposal, with a next step
A useful first visit.
Even without a full workout.
Design decision
Make room for uncertainty.
A busy machine, an early pause or an unsure check-in still leads somewhere useful. The same equipment illustrations carry across guidance, practice and reflection, so the interface has both a recognisable theme and a practical purpose.
Next validation
Observe the moments of hesitation.
I would ask a first-time gym-goer to identify a machine part, replay one movement phase and choose a next step after feeling unsure. The questions are whether they can find the right control and understand what happens next. These are proposed tasks, not completed findings.
Project & image credits ＋
FitStart retains the original concept and palette. The latest first-visit flow, illustrations and component rules are a 2026 refinement. Feedback references come from the archived portfolio. The gym hero is an AI-generated concept image, not a participant photograph. Equipment drawings are schematic; wearable and automated coaching integrations are not implemented. The 2026 portfolio revisit uses AI-assisted interface refinement and presentation production under my direction. No launch or measured usability improvement is claimed.