Design

From sketches to the app

This page shows how I designed Physiq: my process, the decisions I made and why, the accessibility choices, and how the screens changed when I moved from fitness to physiotherapy.

01
Discover
Literature review and app review. Survey and interviews only after ethics approval.
02
Define
Personas, problem statements and a prioritised feature list.
03
Ideate
Sketches and user flows for the programme, the pain check and the coach.
04
Prototype
I drew wireframes first, then built it in Expo / React Native. This page also has an early browser demo.
05
Test
Planned: safety checks on synthetic test cases, a usability test and a review by physiotherapists.
Design decisions and the evidence behind them

Each safety choice below links to something I read. These are design reasons, not proof that the design works. Testing will show that.

The programme comes from a clinician
Physiq does not choose exercises or change a programme. It supports the one your physiotherapist or doctor gave you.
Why: Authors of the LLM studies say these tools should stay supplementary and supervised (Safran and Yildirim, 2025; Cali et al., 2026).
Rules check the AI
A rule-based layer filters the coach’s replies against restrictions and an avoid list before you see them.
Why: Models can score well on safety and still get intensity wrong, and the authors call for rule-based checks (de Mendonça, Sousa and Coelho, 2026).
Red flags stop the conversation
If you mention a possible red-flag symptom the coach stops and points you to NHS 111, your GP, your physiotherapist or 999.
Why: Accuracy varies by topic and by question (Scaff et al., 2025), so serious symptoms should never depend on a model getting it right.
Extra care after surgery
Post-operative cases get cautious wording and a clear pointer back to the surgical team or physiotherapist.
Why: Expert raters found the weakest AI programmes in timing-sensitive cases such as ACL reconstruction (Cali et al., 2026).
Your data stays on your device
Pain and exercise logs are stored on the phone and not sent to a server for storage.
Why: Health data is special category data under UK GDPR (ICO, no date).
Support, not a medical device
The wording says Physiq helps you follow your programme. It does not diagnose or treat.
Why: MHRA guidance ties the status of software to its intended purpose (MHRA, 2023). I am not claiming any regulatory approval.
Accessibility

Accessibility is a design principle, not an extra. Some of this still needs testing.

01
Your area comes first
The area your programme is for is part of the setup, not hidden in settings.
02
Bad days are allowed
Flare-up check-in pauses sessions and points to your physiotherapist’s advice. A bad day is not counted as a failure.
03
Big targets, calm visuals
Tap targets aim for at least 44px, with a quiet colour palette. Contrast and screen-reader checks against WCAG 2.2 AA are still to be done.
04
Less typing
Quick actions and one-tap choices reduce typing. Testing with assistive technology is planned.
05
Plain-language coaching
No jargon and no shaming. The coach writes the way a supportive friend would.
Wireframes: how the screens changed

The app changed direction part way through, so I am showing the wireframes in four stages. I redrew each one in low fidelity from the screens as they were at that point. Real screenshots of the old and new versions are further down this page.

Stage 1 · Where it started
Fitness first

I began with an adaptive fitness and nutrition app. Set-up asked for 14 things, Today was a calorie ring, and Train made a weekly plan and moved people through rehab phases. I redrew these four screens from the version I tagged fitness-v1.

What I found wrong: it made plans and progressed rehab phases, which is a clinician's job.

What's your name?Step 1 of 14First nameContinue
Set-up
14 steps, step 1
Good eveningCalories, macros, steps900kcal eatenMacrosProteinCarbsFat5,200steps4glasses+ Scan foodTodayLogTrainProgressCoach
Today
Calories, macros, steps
TrainWeekly plan made for youMondayFull bodyvWednesdayUpper bodyvFridayLower bodyvRehab programmePhase 1 to 4, advance when ready>Pain checkNoneMinorModSevereTodayLogTrainProgressCoach
Train
Generated plan and rehab phases
CoachWhat should I eat?Eat next?Workout todayMotivate meAsk your coach...^TodayLogTrainProgressCoach
Coach
Fitness chat
Stage 2 · Early October
Safe and accessible fitness

Before changing direction I made the existing app safer. Messages are checked for emergency wording before the AI sees them, and replies are checked before I show them. I also added accessibility settings, read-aloud for workouts and sign-in.

What stayed: the safety checks, the accessibility settings and read-aloud carried into the physio version.

CoachI have chest painPossible emergencyCall 999. Stop exercising.The AI is not calledwhen this firesChecked in two places1 Your message, before the AI2 The reply, before you see itTodayLogTrainProgressCoach
Coach safety check
Red flag stops the AI
AccessibilityText sizeAaAaAaHigh contrastReduce motionScreen reader modeLabels on every controlTodayLogTrainProgressCoach
Accessibility
Text size, contrast, motion
4:12EndFinishGoblet squat4 sets 8 repsSet 1DoneSet 2MarkSet 3MarkRead aloud: on"Set 1 of 4 done. Rest 90 seconds."
Hands-free workout
Read aloud, set by set
Sign inYour data stays on your deviceEmailPasswordSign inNew here? Create an account
Sign in
Email and password
Stage 3 · 15 to 17 October
The physio direction

I decided to focus on people following a home exercise programme from a physiotherapist or doctor. The first physio wireframes ask only for a name and what the programme is for. The person types in their own exercises from the sheet. Physiq does not choose them.

What changed: no plans from the app, no rehab phases, no streaks. Pain is something I record and share with the physio.

WelcomeName and what your programme is forSamMy programme is forLower backKneeShoulderAfter surgeryParkinson'sArthritisContinue
Set-up
Two questions
My programmeCopied from my physio's sheetKnee bends in sitting2 x 10RemoveHeel raises2 x 10RemoveSit to stand2 x 8RemoveAdd an exerciseName, as on the sheetSession daysMTWTFSSTodayProgrammeProgressHelper
Programme
From the physio sheet
Hello, SamSaturdayToday's programmeStart today's sessionHow is your pain today?NoneMildModSevereSaved: MildIf pain flares upTodayProgrammeProgressHelper
Today
Programme, pain, flare-up
ProgressOnly what you record. No streaks.SessionsThis week: 1 of 2 plannedPain, last 14 entriesMilestonesDone: first sessionHad a physio reviewTodayProgrammeProgressHelper
Progress
Pain chart, no streaks
Stage 4 · Where it is now
The Expo app rebuilt

I rebuilt the real app around the same flow. A session has a stop button for worsening pain. The Helper answers general questions only, and emergency or crisis wording gets a fixed safe reply with no AI call. Meals, steps and weight are still there as an optional extra, switched off by default.

Still to do: test it on a phone with a screen reader and with real people once ethics is approved.

WelcomeName and what your programme is forSamMy programme is forLower backKneeShoulderAfter surgeryParkinson'sArthritisContinue
Set-up
Name and area
Hello, SamSaturdayToday's programmeStart today's sessionHow is your pain today?NoneMildModSevereSaved: MildIf pain flares upTodayProgrammeProgressHelper
Today
Programme and pain check
Exercise 1 of 3Knee bends in sittingSet 1 of 210 repetitions. Your pace.Set doneRead updates aloudStop: my pain is getting worseLeave without saving
Session
Stop button
Helperchest painCall 999No AI call. Fixed safe reply.What does 2 x 10 mean?Prepare for my appointmentAsk a general question...^TodayProgrammeProgressHelper
Helper
Safe replies
SettingsAbout youLower backKneeAccessibilityText size, contrast, motionScreen reader modeOptional fitness extraMeals, steps, weight.Off by default.TodayProgrammeProgressHelper
Settings
Fitness extra off
The app, before and after

These are real screenshots from the web build of the Expo app, taken on 17 October 2026 with made-up test data for a person called Sam. I have not captured them on a phone yet. The old screenshots needed a one line fix, because the old app crashed on web with an infinite re-render error. I kept the old version unchanged apart from that fix.

Before
Fitness first (fitness-v1)
Screenshot: Set-up, 14 steps
Set-up, 14 steps
Screenshot: Today with calories and steps
Today with calories and steps
Screenshot: Train, generated plan and rehab phases
Train, generated plan and rehab phases
Screenshot: Fitness coach
Fitness coach
Now
Physio first
Screenshot: Set-up, two questions
Set-up, two questions
Screenshot: Today with programme and pain check
Today with programme and pain check
Screenshot: Session with a stop button
Session with a stop button
Screenshot: Progress, no streaks
Progress, no streaks
Screenshot: Helper safe reply, no AI call
Helper safe reply, no AI call
Screenshot: Settings and fitness extra
Settings and fitness extra
Links: Try the browser demo · Expo SDK 54 docs · WCAG 2.2