Case Study 3

I.
Project Overview

FITTED is a mobile app for 5–10-minute, posture-friendly self-care sessions you can start and repeat easily. From open to action takes under a minute.

Duration: 3 weeks
Role: UX/UI Designer
Tools: Figma, Adobe CC

II.
Challenge & Goal

Help busy desk workers start short, posture-friendly care without friction, and keep it going most days.

Challenge

Desk workers want quiet, 5–10-minute, no-equipment care, but most apps push long workouts and lack a plan-remind-progress loop.

Goal

Start in under 30 seconds with one clear primary button. Repeat on most days with quiet, small-space routines that improve posture.

III.
Persona

Rebecca (34), Software Developer — desk-based, tech-savvy beginner. Needs 3–10-minute, quiet, no-equipment breaks between meetings.

Persona: Rebecca — Primary persona: Rebecca

User Flow

Defined each screen and its connection based on persona scenarios.

IV.
Wireframing & Prototyping

Low-, mid-, and high-fidelity flows were created in Figma and iteratively tested.

Onboarding UI — Low-fi: structure only; validated the one-tap start path.

V.
Style Guide

Calm, readable, role-based color and scalable type.

Logo & App Icon

Type-led, simple by design.

Color System

Decisive, accessible contrast: muted neutrals, a confident purple primary, clear success green, and a soft pause amber for instant state recognition.

Primary: #5c4688. Text: #f7f4ff

Secondary: #626262. Text: #f4f6f8

Success: #8af4a1. Text: #0b4b3a

Pause: #ffd68f. Text: #5a3810

UI elements

Sized for one-handed use. Large primary in the thumb zone for faster, safer taps.

Typography

Weight by role. Size by scale. Type leads. Whitespace steadies.

H1-XL 32/32, Circular Bold

H1-L 22/22, Circular Bold

H2: 16/22, Inter Semibold

Body-M: 16/24, Inter Regular

Meta 12/12, Inter Regular

Nav: 10/14, Inter Regular

Link: 16/24, Inter Regular

Button/CTA: 18/18, Inter Regular

Chips: 14/18, Inter Regular

Iconography

24px grid, 2px stroke, optically centered. Role color only in the active state.

VI.
Final UI

Calm, readable, role-based color and scalable type.

Onboarding

A calm setup in under a minute that fits your posture, place, and time.

Home

Start in one tap. “Next” where eyes land. Primary within thumb reach.

Timer

Large remaining time, one clear action (Pause or End). Haptics optional, feedback instant.

Plan

Set today fast with chips for focus and time. Add Quiet Hours so nudges stay silent when you’re busy.

Progress

Low-saturation color, intensity only: weekly bars for volume, 30-day heatmap for consistency, daily log for context.

VII.
Motion

Fewer choices, faster starts. Three-tab bottom nav and a Start-first home cut time-to-action and boost daily repeats.

From onboarding to plan and progress pages

VIII.
UI in Context

Speed decisions in glare and small spaces: calm colors, clear contrast, and a primary right where the thumb expects it.