Sue Hong — Visual Designer

Project

Team (Sue Hong, Yaezi Lee, Evan Zhang)

Duration

6 Weeks
Oct 2025 ~ Dec 2025

From

CMU MDes

My Role

User Research, Visual Designer (Interface Design, Visual System, Motion)

Tools

Figma, Adobe After Effects, Illustrator

Awards

MUSE Design Awards 2026

Indigo Design Award 2026

Overview

Reeha turns upper-limb rehab into a familiar daily task.

It replaces repetitive clinical exercises with mini-games rooted in everyday activities such as baking, gardening, and ball play. I led the visual system (a four-tone color model and two-layer typography) and interactive prototyping. Beyond the project, I returned independently to conduct a touch-target accessibility audit grounded in rehabilitation research. It was a self-initiated extension to test how the visual system holds under stricter motor-accessibility constraints.

Overview

Reeha turns upper-limb rehab into a familiar daily task.

Final Design

Today's Exercise

The home screen surfaces only what the patient does next: three exercises, total time, one play button. History, week view, and achievements live further down — recovery sessions shouldn't begin with scrolling.

Final Design

Today's Exercise

Setup

The setup flow assumes the patient may have only one functional hand. Voice commands replace taps wherever they can, camera calibration uses large visual targets, and skip options exist for returning users so day 30 doesn't feel like day 1.

Setup

Tutorials

Each tutorial runs under 30 seconds and shows the movement from the same angle the camera will see during the session. The patient's mental rehearsal matches what the screen will reflect back during the exercise.

Tutorials

Themed Mini Game Exercises

A patient lifts their arm, and on screen frosting flows onto a cupcake. The motion the therapist prescribed is the same motion the game requires. The patient isn't translating between "exercise" and "game," they're doing one thing. Difficulty scales with each patient's range-of-motion data, so the cupcakes get easier or harder without announcing the change. We deliberately avoided "level up" language. Progress should feel like recovery, not unlocked content.

Themed Mini Game Exercises

Clinic for Care

The Clinic tab keeps the care team present between visits. Recent messages from the therapist sit at the top. Progress charts focus on small wins (degrees of motion regained, sessions completed) because big milestones are months apart.

Clinic for Care

Color system

Brand color palette

The system is a four-tone emotional model. I made a brand color (Iris) carry core interactions. It carries clinical credibility without the cold authority that makes patients feel small. Three mood gradients set the emotional context per zone. Lavender mist sets the background for focused work. Marigold heat appears at clinical contact points. Mint marks milestones." Flatter, more functional.

Color system

Brand color palette

Brand · interaction across both zones

Iris

Home, exercises, mini-games, tutorials, achievements. Calm focus during solo work. Anchored on 634AFD (500).

50

F4EFFF

100

E2D8FF

200

C9B7FF

300

AC92FF

400

8E70FF

500

634AFD

600

4D34D6

700

3623A8

800

22167B

900

130A4E

Warm · clinical-care surfaces

Marigold

Heat band at clinical contact surfaces. Currently anchors the Clinic header gradient. Available for badges and accents on warm contexts.

50

FFF4EC

100

FFE0C5

200

FFC396

300

FFA567

400

FF8B33

500

FF7708

600

D55E00

700

A04700

800

6A2F00

900

451F00

Celebration · milestones and encouragement

Mint

Achievement badges, encouragement cards, completion screens, milestone moments. The emotional payoff color — used when the patient earns a beat of feedback, not for everyday surfaces.

50

F0FBF8

100

D8F3EC

200

B5E7D9

300

88D8C1

400

5DCDAE

500

4ECCB3

600

39A38F

700

2A7D6E

800

1D595E

900

113631

Semantic · status and feedback

Status colors

Reusing existing accents. FE0036 is reserved for the marigold gradient endpoint, not duplicated as semantic error.

success

008943

warning

F0B100

error

FF5353

info

77ADFD

Gradients · environmental mood

Mood pairs

To set the emotional context of each zone, I used the pairs as page backgrounds, header bands, and milestone screens.

Iris dawn

6090F8 → 634AFD

Home header band

Lavender mist

ECEFFC → D5DCF2

Patient page background — calm focus

Marigold heat

FF7708 → FE0036

Clinic header band — human warmth

Mint celebration

B8E8DC → A4D4FA

Encouragement, completion, milestones

Foundation · cool-tinted neutrals

Slate

Cool-undertoned grays that harmonize with the iris brand. Carries every surface, text level, border, and divider in the system.

0

FFFFFF

50

F7F8FA

100

ECEFF2

200

D6DCE5

300

B6BECB

400

8B96A2

500

6B7483

600

4F5867

700

363E4D

800

222932

900

121212

Typography system

Layer 1: SF Pro Display

SF Pro carries the system invisibly so the patient can focus. Therefore, their cognitive load stays on the exercise. Also, Reeha runs on tablet. SF Pro Display is engineered for that surface.

Typography system

Layer 1: SF Pro Display

SF Pro carries the system invisibly so the patient can focus. Therefore, their cognitive load stays on the exercise. Also, Reeha runs on tablet. SF Pro Display is engineered for that surface.

Workhorse · functional UI

SF Pro Display

Carries every interface element where the type should disappear: navigation, body, labels, instructions, clinical content. It is chosen for tablet optimization and readability.

Layer 2:

An expressive layer takes over only when the moment is celebratory.

Layer 2:

An expressive layer takes over only when the moment is celebratory.

Expressive · celebration moments

Funnel Display

I prompted Nano Banana with 'Baloo' as the structural reference because its rounded geometry and soft terminals translate cleanly into 3D forms. Out of dozens of generations, I kept only the ones where the patchwork patterns read as handmade and soft — because the celebration moment in rehab is close to the joy of a finishing something. Pillowy 3D forms hold that feeling.

Visual Tone

Clinical confidence with playful moments.

Most rehab tools borrow the sterile language of medical software. Reeha goes the other way. A muted palette and rounded typography let the interface feel like a joyful. The characters function as a non-clinical presence in moments where patients might otherwise feel observed. Soft volumes, headbands instead of medical accessories, no measuring devices in hand.

Visual Tone

Clinical confidence with playful moments.

Designing for limited upper-limb mobility

Auditing touch targets under motor-accessibility constraints

The color system passes WCAG on paper. The next question was whether the touch geometry holds for hands that can barely grip. So I returned to the prototype, alone, and audited it. Standard 44pt targets are calibrated for general populations. Reeha's users living with limited upper-limb mobility and fine motor control require larger targets. Therefore I set 60pt for primary exercise actions and 48pt for secondary navigation.

Designing for limited upper-limb mobility

Auditing touch targets under motor-accessibility constraints

Legend

Color

Status

Size

Standard met

Application

🟢

Pass

≥60 px

Reeha recommended

Primary actions

🟡

Acceptable

48~59 px

Material Design 48dp

Secondary actions

🟠

Marginal

44~47 px

WCAG 2.1 AAA only

Avoid in production

🔴

Fail

<44 px

None

Violation

Trewin et al. (2018), "Accessibility Challenges for People with Disabilities Using Touchscreen Devices

Audit Summary

7 interactive elements audited

Color

Status

Number

Percentage

🟢

Pass

(14.29%)

🟡

Acceptable

(0%)

🟠

Marginal

(0%)

🔴

Fail

(85.71%)

Methodology

Standards referenced

Tools

Scope

WCAG 2.1 AAA (Success Criterion 2.5.5) Apple Human Interface Guidelines Material Design 3 [Domain-specific research citation]

Figma Annotate,
Stark Contrast Checker

3 screens · 7 interactive elements
Excluded: decorative elements, static content

Before & After

Accessibility Audit v1.0 · Personal extension · Self-initiated · May 2026

Before & After

Accessibility Audit v1.0 · Personal extension · Self-initiated · May 2026

The problem we started with

Home practice often breaks down due to low motivation.

1. Continuing practice alone is hard. 2. Low motivation in repetitive and mundane exercise routine. 3. Uncertainty about performing exercises correctly.

The problem we started with

Home practice often breaks down due to low motivation.

1. Continuing practice alone is hard. 2. Low motivation in repetitive and mundane exercise routine. 3. Uncertainty about performing exercises correctly.

Stake Holder Map

The system had to speak two languages; clinical and home.

Our team mapped stakeholders to define scope and target users. The map also helped us identify essential clinical perspectives from therapists to guide product decisions and ensure clinical relevance.

Stake Holder Map

The system had to speak two languages; clinical and home.

User / Expert Interview

Patients want to feel supported, understood, and able to see their progress over time.

Through 8 user interviews and 4 expert interviews, we identified monotony, confusion, and disconnection from clinical guidance as key barriers to sustained home rehabilitation. Patients don’t just want to perform exercises correctly but to feel supported. "I do my exercises, but I don't know if I'm doing them right." — Patient #3, 4 months post-surgery "When my therapist isn't watching, my form drifts within a week." — Patient #6 "Compliance drops after week 3 unless we add visual milestones." — Occupational Therapist, 12 years in upper-limb rehab

User / Expert Interview

Patients want to feel supported, understood, and able to see their progress over time.

Patient Interview

Expert Interview

Full interview protocols and synthesis in case deck.

Interview Insights

Visible progress and timely feedback lower emotional barriers.

Across both groups the same two clusters surfaced: design & tech gaps in the tools they had, and psychological barriers in the experience itself.

Interview Insights

Visible progress and timely feedback lower emotional barriers.

Across both groups the same two clusters surfaced: design & tech gaps in the tools they had, and psychological barriers in the experience itself.

Who We Designed For

Adults aged 25 to 60 recovering from upper-limb injuries at home.

Geriatric rehab follows different protocols and emotional models. We focused on working-age adults. They are old enough to have established home routines that recovery interrupts, young enough to expect digital tools to meet them halfway.

Who We Designed For

Adults aged 25 to 60 recovering from upper-limb injuries at home.

Persona

Six months in, alone at home.

Sarah is 31, a preschool teacher in Pittsburgh. She tore her rotator cuff indoor climbing last spring. The first month she had PT three times a week and could feel herself getting better. The five months since have had her at home, mostly alone.

Name

Sarah

Age

Location

Job

Preschool Teacher

Hobby

Indoor climbing

What she said

"I don't always know if I'm doing it right, and there's nobody to ask."

"I'll do it for a week, miss two days, and then I can't get back to it."

"The exercises aren't hard. Remembering why I'm doing them is hard."

What she actually needs

A reason to start each day, not just a reminder to.
Confirmation she's doing the movement right, in the moment, not in next week's appointment.
Visible signs she's getting better, because six months in, she can't feel the difference herself.

What she does not need

Another tracking dashboard.
A streak counter that makes her feel guilty for missing two days.

HMW

How might we make home rehabilitation for upper limb recovery more engaging so patients stay motivated throughout recovery?

HMW

How might we make home rehabilitation for upper limb recovery more engaging so patients stay motivated throughout recovery?

From insight to product

Your daily rehab companion

Gamified upper limb recovery

Reinforces correct movement execution through games that reward accuracy and sustain motivation over time.

Real time form coaching

Delivers instant visual and audio cues to correct posture and movement for safer, more effective recovery.

Continuous therapist guided care

Enables clinicians to remotely monitor performance and adapt personalized exercise prescriptions at home.

Key Insight

Therapy disguised as a familiar task.

Each mini-game maps a prescribed exercise onto a daily-life action (baking, gardening, ball games). The motion the therapist needs the patient to perform is the same motion that progresses the game. Difficulty scales with the patient's data, so the baking game tightens or loosens with recovery without the patient noticing they've been leveled up.

Key Insight

Therapy disguised as a familiar task.

User flow

Five steps from open to recap.

Each session follows a consistent flow: check today's plan, choose a game, watch a short tutorial, train through the mini-game, and review the post-session report.

User journey map

Where motivation rises and drops.

Mapping the patient experience across one session and across a recovery month surfaced the moments when motivation typically dips (entering tired, hesitating before unfamiliar movements). We placed feedback exactly at those drop points: encouragement during setup, mid-game cues that reward correct form, and weekly summaries that make slow gains visible.

User journey map

Where motivation rises and drops.

System Map

The therapist writes and the camera reads.

1. Digital Section The patient's movement data controls mini-games that give instant feedback. After each game, progress is sent to the clinician, who chooses the next games. 2. Physical Section The patient follows exercise guides on the screen while the TrueDepth camera tracks their movements.

System Map

The therapist writes and the camera reads.

Wireframe

Sketching what the patient sees first.

I sketched each screen to lock the flow before committing to a visual language. Lo-fi let me focus on hierarchy and pacing. I structured how much patients see at the start of a session, how voice prompts replace touch input during exercises, and how progress surfaces without competing with the next action.

Wireframe

Sketching what the patient sees first.

Key Feature

Why a Baking Theme Mini-Game?

In interviews, patients kept naming what they wanted back, such as making coffee, gardening, baking with their kids. The repetition they wanted was the kind embedded in daily life. So we built the game around motions their body already used knew.

Prototyping

Engineering the loop.

We mapped the entire game loop to joint-node tracking. All the cupcake states are functions of where the patient's shoulder, elbow, and wrist sit relative to a calibrated threshold range. Pull down within range, frosting flows. Push up smoothly, next cupcake. Step outside the range, the piping fails.

Prototyping

Engineering the loop.

Test and what we learned

What we learned showing Reeha live.

We exhibited a working prototype at the CMU Design Week. Watching first-time users move through setup, the tutorial, and a full mini-game session surfaced moments we'd missed in screen-only testing: camera placing confusion. Movement-based interfaces have a one-second window.

Test and what we learned

What we learned showing Reeha live.

Paper · Coursework

Gamified Upper-Limb Recovery Through Sensor-Enhanced Exercises

A pictorial-style writeup of the Reeha project, produced as coursework at CMU MDes (Fall 2025). The paper explores the research framing and system architecture in academic format. "How might we make home rehabilitation for upper limb recovery more engaging so patients stay motivated throughout recovery?" — from the research framing.