Celebrating 20 Years of growing businesses worldwide · 2006–2026Our journey ›
Serving UKUSCASGAUIN
We are hiring[email protected]Chat on WhatsApp
20 Years2006–2026
Home/Our Work/Safesize
Case study · Mobile app · Foot measurement

Safesize

Measure feet at home with a phone camera: a guided tour that gets the scan right first time.

UI/UX designIllustrationOnboardingRetail tech
9:41Safesize: Requirements
9:41Safesize: Welcome
9:41Safesize: Choosing socks
16screens designed
4core features
5deliverables
Mobileplatform
The brief

The challenge

Foot scanning only works when the paper, socks, floor and camera angle are right, and most people get at least one wrong on the first try.

Our approach

What we designed

We wrote and illustrated a step-by-step tour with clear do's and don'ts, separate routes for scanning yourself or someone else, and examples of good and bad scans.

Deliverables
  • 16-step guided tour
  • Custom illustrations
  • Self and helper scan routes
  • Front and back capture guides
  • Good vs bad scan examples
User journey

How someone moves through Safesize

  1. 01WelcomeChoose to scan your own feet or another person's.
  2. 02Choosing the floorDark wood or tiles work; light floors and carpet don't.
  3. 03Scan from the topFoot in the middle, along the long edge of the paper.
  4. 04Helper scan: backAnd from behind, along the paper.
  5. 05Correct detectionHow a correct paper and foot outline looks.
  6. 06Wrong: rotationA foot turned too far can't be measured.
360° view

Every screen, all the way round.

Drag to spin the carousel, or let it turn on its own.

9:41Safesize: Welcome
9:41Safesize: Requirements
9:41Safesize: Choosing socks
9:41Safesize: Choosing the floor
9:41Safesize: Place the paper
9:41Safesize: Pull up socks
9:41Safesize: Scan from the top
9:41Safesize: Scan from the back
9:41Safesize: Helper scan: front
9:41Safesize: Helper scan: back
9:41Safesize: Snapshot from the front
9:41Safesize: Snapshot of the left foot
Key features

Designed around what users need most

019:41Safesize: Choosing socks

Two guided tours

Scan your own feet, or scan someone else's.

Choosing socks. Only plain black socks give a clean outline.

029:41Safesize: Scan from the top

Right setup first

Clear do's and don'ts for paper, socks and floors.

Scan from the top. Foot in the middle, along the long edge of the paper.

039:41Safesize: Snapshot from the front

Front and back shots

Step-by-step posture and camera guidance for each foot.

Snapshot from the front. Align the wireframe with all four paper corners.

049:41Safesize: Wrong: shadows

Good vs bad scans

Examples of correct and wrong contour detection.

Wrong: shadows. Strong shadows and bad focus spoil the scan.

Screen gallery

All 16 screens

Hover a screen to lift it out of the layout.

9:41Safesize: Welcome
Welcome
9:41Safesize: Requirements
Requirements
9:41Safesize: Choosing socks
Choosing socks
9:41Safesize: Choosing the floor
Choosing the floor
9:41Safesize: Place the paper
Place the paper
9:41Safesize: Pull up socks
Pull up socks
9:41Safesize: Scan from the top
Scan from the top
9:41Safesize: Scan from the back
Scan from the back
9:41Safesize: Helper scan: front
Helper scan: front
9:41Safesize: Helper scan: back
Helper scan: back
9:41Safesize: Snapshot from the front
Snapshot from the front
9:41Safesize: Snapshot of the left foot
Snapshot of the left foot
9:41Safesize: Correct detection
Correct detection
9:41Safesize: Wrong: socks
Wrong: socks
9:41Safesize: Wrong: shadows
Wrong: shadows
9:41Safesize: Wrong: rotation
Wrong: rotation
Design system

Colour palette

The main colours across the Safesize screens, measured from the designs themselves, with how much of the interface each one covers.

  • #FFFFFF90% of screens
  • #B2B2B25% of screens
  • #427FEB1% of screens
  • #D691571% of screens
  • #FEDAAF1% of screens
  • #2518141% of screens
Free consultation

Have an app idea like Safesize?

Tell us what you want to build. We'll reply with a free consultation, a design approach and a clear quote.