Getting a sports membership in 5 minutes · UX/UI case study

Skip to content
Ce site existe aussi en français.Passer en français
FRContact me (LinkedIn, new tab)
Final-year project2026Mobile, tablet, desktopHealth and fitnessBack office

My membership in 5 minutes

Getting a sports membership in 5 minutes: UX/UI design of a membership sign-up journey for a health and fitness sports federation: a 5-step member flow, a club space for volunteers and an accessible design system, on mobile, tablet and desktop.

Role
Digital project manager in UX design
Duration
2 months, final-year project
Panel
50 members and 20 clubs
Tools
Figma, FigJam, Claude connected to Figma (MCP)
Getting a sports membership in 5 minutes, mobile and desktop mockups (fictional data)

01 Context

Every season, thousands of people take out their membership through an affiliated club. The process relies on long forms and manual data entry by clubs that are often run by volunteers.

Goal: a self-service, fast and accessible sign-up that gives clubs their time back.

02 The problem

For members: long procedures and poorly explained health documents. For clubs: manual reminders and incomplete files.

03 My approach

A double diamond over 2 months: discovery, framing, ideation, prototyping, testing. Interviews with a panel of 50 members and 20 clubs, personas, service blueprint and user flow before the first screen.

Guiding principle: digital by default, human when needed.

Simplified service blueprint of the membership sign-up, from discovery to practice, with three moments of truth
01Service blueprint and three moments of truth: health, payment, receiving the membership card.
The project in numbers and two key screens: choosing a plan and permissions (fictional data)
02The project in numbers and two key screens.

04 Research

Interviews with the people who live the sign-up process, on the member side and the club side.

50members interviewed
20clubs interviewed
2months of project
5steps in the flow

05 Five design choices

A flow in 5 clear steps: Club and plan, My file, My health, Permissions, Payment. Each screen carries one specific choice.

A “Step X of 5” header and a progress bar on every screen of the flow
01A “Step X of 5” marker on every screen.
A single password field with a strength meter and criteria
02A single password field, with a strength meter.
The health questionnaire offered before the medical certificate
03The health questionnaire first, the medical certificate only when needed.
Optional consents unticked by default, required data sharing explained separately
04Optional consents unticked by default.
Express payment first, then card, 3 interest-free instalments and SEPA direct debit
05Express payment first, then 3 interest-free instalments and SEPA direct debit.

06 An accessible design system

29 colour variables, 13 dimension variables, 13 text styles, 50 icons and 15 components with variants, in Plus Jakarta Sans.

AA contrast, 44 px touch targets, visible labels, errors flagged with an icon and text, never any text under 12 px.

Design system: colours, type scale, icons and components with states
01Tokens, typography, icons and components with states.

07 Everywhere, on every screen

Mobile first, then tablet and desktop: split screen for sign-in, sticky summary during the flow, weekly schedule.

For clubs: a prioritised dashboard, files to approve on a single screen, assisted data entry, mobile attendance check.

Complete mobile journey of the membership sign-up (fictional data)
01The mobile journey, from the home screen to the membership card.
Membership flow on desktop with a sticky summary (fictional data)
02The flow on desktop.
Club space: dashboard and files to approve (fictional data)
03The volunteers’ club space.

08 Deliverables

Research, mappings, design system, mobile, tablet and desktop mockups, responsive club space and an animated prototype (Smart Animate, a flipping membership card, animated confirmation).

129screens designed
15components with variants
80+interactions on mobile
3formats

Figures counted by script in the Figma file.

09 Measuring success

Moderated test of the mobile prototype with 8 members, after V2 of the key screens. The promise holds: a median time of 4 min 20. The highest drop-off, 13%, is at the My health step.

88%flow completion rate
4 min 20median time to sign up
86%files approved without a reminder
81SUS score out of 100 (average: 68)

Illustrative results, final-year project.

10 Transparency

  • FrameworkFinal-year project, Master’s in UX design (ISCOD), 2026. Mockups not deployed.
  • ResearchInterviews with a panel of 50 members and 20 clubs.
  • User testModerated test of the mobile prototype with 8 members. Results shown for illustration.
  • DataPeople, club and amounts in the mockups are fictional. Screens are in French.
  • MethodDesigned in Figma with an AI-assisted workflow (Claude connected to Figma), directed and reviewed by the designer.
View on BehanceView on DribbbleAll projects

Next project

Entrain

Sports club membership app for families