A web product designed end-to-end through UX research — personas, customer
journeys and a service blueprint mapping every touchpoint between users
and the system across the whole fitness service.
);
// ── Design philosophy ───────────────────────────────────────────────────────
// Connects the case to broader UX + product principles.
const FTPrinciples = () => (
Approach · design philosophy
The product is the service.
A fitness app is not pixels — it's a chain of touchpoints between user,
trainer, dietician, supplement vendor, club staff and the data underneath.
The work was to make that chain visible, then design for the gaps.
{[
['Research first', 'Design assumptions are debts. Every screen was paid for in interviews, personas and journey maps before a pixel was placed.'],
['System thinking', 'Front-stage and back-stage live on the same diagram. A feature is judged by what it costs the back-office as much as what it gives the user.'],
['User goals · business goals', 'A workout suggestion that doesn\'t move a business metric is a hobby. A business metric that hurts the user is a leak.'],
['Reduce, then add', 'Cut the journey down to the moments that actually matter. Decoration comes last, if at all.'],
].map(([t, d], i) => (
{t}
{d}
))}
);
// ── Personas ───────────────────────────────────────────────────────────────
const FTPersonas = () => {
const personas = [
{
initials: 'AK', name: 'Anna · 34', role: 'Returning to training after a break',
goals: ['Rebuild a consistent routine', 'Track recovery and supplements', 'See a clear "next step"'],
pains: ['Forgets passwords on new devices', 'Hard to find a credible specialist', 'No-context recommendations'],
},
{
initials: 'MN', name: 'Michał · 27', role: 'Strength training, muscle mass focus',
goals: ['Plan supplementation properly', 'History of all sessions in one place', 'Recommendations he can trust'],
pains: ['Survey-form fatigue', 'Marketing-y "specialist" lists', 'No reviews from real users'],
},
{
initials: 'PD', name: 'Paulina · 41', role: 'Post-injury, working with a physio',
goals: ['Follow specialist recommendations', 'Share her plan with the physio', 'Slow, sustainable progress'],
pains: ['Email-based plans get lost', 'No way to ask the specialist back', 'Generic recovery advice'],
},
];
return (
Research · personas
Three users. One product.
Built from interviews and behavioural insights. Each persona maps onto a
distinct path through the product — but the goals, pains and chances they
share is where the shared product lives.
{personas.map((p, i) => (
{p.initials}
{p.name}
{p.role}
Goals
{p.goals.map((g) => (
{g}
))}
Pain points
{p.pains.map((g) => (
{g}
))}
))}
);
};
// ── Customer Journey Map — styled as table-like rows in the cool grey palette
const FTJourney = () => {
const stages = [
{ name: 'Motivation', sat: 3, cb: 'Desire to improve well-being, build muscle, aid recovery.', tp: '—', pain: '—', chance: '—' },
{ name: 'Search info', sat: 4, cb: 'Asking about supplementation.', tp: 'Buzz marketing', pain: '—', chance: '—' },
{ name: 'Sign in', sat: 2, cb: 'Signing in via existing account.', tp: 'Sign in', pain: 'Forgot password', chance: 'Reset password to email' },
{ name: 'Survey', sat: 4, cb: 'Fills the survey.', tp: 'Survey', pain: '—', chance: '—' },
{ name: 'History', sat: 4, cb: 'Reviews workout history.', tp: 'History · fitness card', pain: '—', chance: '—' },
{ name: 'Recommendation', sat: 3, cb: 'Sees personalised suggestions.', tp: 'Landing page', pain: 'Hard to find a specialist', chance: 'Add specialists with profile descriptions' },
{ name: 'Send', sat: 4, cb: 'Sends recommendations to email.', tp: 'Send email', pain: '—', chance: '—' },
{ name: 'Share opinion', sat: 2, cb: 'Shares opinion via social / SMS / newsletter.', tp: 'Social · Newsletter · SMS', pain: 'No customer reviews', chance: 'Ask for feedback by email/SNS' },
];
const satGlyph = (s) => s >= 4 ? '☺' : s >= 3 ? '〇' : '☹';
const satColor = (s) => s >= 4 ? FT_ACCENT : s >= 3 ? FT_MUTED : '#FF8A8A';
return (
Customer journey
Eight stages. Two satisfaction dips.
The CJM made design priorities self-evident. The two clearest dips —
sign-in and share-opinion — became the two product bets: password reset
via email, and review/feedback loops baked into the experience.
{/* Satisfaction line chart */}
Service blueprint
What the user sees. What it costs the system.
The blueprint pulls front-stage and back-stage onto one diagram. Every column
is a stage of the journey; every row is a layer of the service. Lines of
interaction, visibility and internal-interaction separate the layers.
{/* Column headers */}
Stage →
{cols.map((c) => (
{c}
))}
{/* Lanes */}
{lanes.map((lane, li) => {
// Divider lines: after Action (user) row → line of interaction
// after Technology row → line of visibility
// after Back-stage row → line of internal interaction
const divider = li === 1 ? 'interaction' : li === 3 ? 'visibility' : li === 4 ? 'internal' : null;
return (
{lane.label}
{lane.items.map((it, i) => (
{it === '—' ? (
—
) : (
{it}
)}
))}
{divider && (
{divider === 'interaction' ? 'Line of interaction' :
divider === 'visibility' ? 'Line of visibility' :
'Internal interaction'}
)}
);
})}
Line of interaction
Line of visibility
Internal interaction
User flow
From start screen to email-out.
A single map of every decision a user can take in the app — onboarding,
fitness survey, recommendations branching to supplements and specialists,
and the workout history that loops back to the dashboard.
{[
['Branching paths', 'Yes / no decisions visualised as diamonds; happy paths in red, default flow in black.'],
['Two landing pages', 'Personalised vs default — depends on whether the survey is complete. Avoids cold dashboards.'],
['Recoverable forks', 'Every decision the user takes can be reversed within the same flow. No "Survey done" trap.'],
].map(([t, d], i) => (
{t}
{d}
))}
);
// ── The product — landing page in laptop, large
const FTProduct = () => (
The product
A dashboard that answers the survey.
Every card on the landing page maps to a stage of the journey. Personal data
and trainer up top, fitness level surfaces survey completion, and a triplet
of personalised cards anchors the recommendation engine.
{[
['Twoje dane', 'Identity at the top — keeps the dashboard human.'],
['Trener personalny', 'Pulled in from the recommendations layer.'],
['Fitness level', 'A direct callback to the survey step.'],
['Suplementy', 'Recommendation engine output, with an "ask for more" path.'],
['Specjaliści', 'Pain point answered — clear profiles, contact, more info.'],
['Historia treningów', 'CJM stage 5 surfaced — workouts as table, addable inline.'],
].map(([t, d]) => (
{t}
{d}
))}
);
// ── Outcome
const FTOutcome = () => {
const stats = [
['3', 'Personas built', 'From interviews + behaviour. Each tied to a measurable goal.'],
['1', 'Service blueprint', 'Front-stage and back-stage on one diagram — visible to product, dev, ops.'],
['8', 'Journey stages mapped', 'Two satisfaction dips became the first two product bets.'],
];
return (
