Product Design Case Study

Designing a

way back

into the

world

Designing a

way back

into the

world

Problem Statement

"How might we design a mobile experience that helps hikikomori individuals in recovery rebuild social confidence

and daily structure — safely, anonymously, and entirely at their own pace?"

"How might we design a mobile experience that helps hikikomori individuals in recovery rebuild social confidence

and daily structure — safely, anonymously, and entirely at their own pace?"

Product

Mobile App

Duration

6 Days

Tools

Figma , Claude

Role

Product Designer

Step 01 — Context & Problem Framing

Step 01 — Context & Problem fRAMEING

1

Context

Understanding the world behind closed doors

Before writing a single requirement I needed to understand what hikikomori actually is, who it

affects, and where every existing solution falls short.

Before writing a single requirement I needed to understand what hikikomori actually is, who it

affects, and where every existing solution falls short.

hikikomori

引きこもり · hee-kee-ko-mo-ree

Severe social withdrawal lasting 6+ months — individual confines themselves

to their home, avoiding school, work, and all social contact. Not laziness. Not

introversion. A crisis response to unbearable social pressure — where the

room becomes both refuge and prison.

Severe social withdrawal lasting 6+ months — individual confines themselves

to their home, avoiding school, work, and all social contact. Not laziness. Not

introversion. A crisis response to unbearable social pressure — where the

room becomes both refuge and prison.

Why this problem — and why now

Once thought uniquely Japanese, hikikomori is now documented across

every continent. The psychological mechanism is consistent globally: a

person becomes unable to bear the gap between who they feel they must be

and who they actually are. And no product today is designed to help them

find their way back.

Once thought uniquely Japanese, hikikomori is now documented across

every continent. The psychological mechanism is consistent globally: a

person becomes unable to bear the gap between who they feel they must be

and who they actually are. And no product today is designed to help them

find their way back.

1M+

Estimated cases in Japan alone —

widely considered an undercount

Estimated cases in Japan alone —

widely considered an undercount

30%

Of cases last more than 3 years without

any intervention

Of cases last more than 3 years without

any intervention

6mo+

Minimum duration for clinical

classification — most cases run far

longer

Minimum duration for clinical

classification — most cases run far

longer

0

Products designed specifically for

recovery from social withdrawal. This is

the gap.

Products designed specifically for

recovery from social withdrawal. This is

the gap.

Step 02 — Research

2

Research

What I needed to learn — and what I found

Secondary research across academic literature, clinical case studies, and first-person

recovery accounts — alongside a primary research plan designed around this user group's

specific need for anonymity.

✓ Completed

Secondary Research

→

Academic papers on hikikomori psychology, causes, and recovery patterns

→

Clinical case studies from Japan, South Korea, France, and Italy

→

First-person recovery accounts from online communities and journalism

→

Competitive analysis of wellness, social, and mental health apps

01

Shame is the primary

barrier — not willpower

Shame is the primary

barrier — not willpower

Standard productivity patterns

actively punish this user group.

Standard productivity patterns

actively punish this user group.

→ Zero-judgment tone

02

Identity comes before

social connection

Identity comes before

social connection

Users need to rediscover

themselves before connecting

with others.

Users need to rediscover

themselves before connecting

with others.

→ Interests-first onboarding

03

Small wins matter more

than big goals

Small wins matter more

than big goals

Recovery is a ladder of micro-

progressions, not milestones.

→ Micro-task architecture

04

Mobile is already where

they are

Mobile is already where

they are

The phone in their room is the only

bridge requiring no courage to

cross.

→ Mobile-first, room-first

05

Routine is the

foundation of recovery

Routine is the

foundation of recovery

Structure must come before

social — it is the prerequisite for

everything else.

→ Structure before social

Step 03 — Synthesis

3

Synthesis

From insights to principles — and a person

🪶

Principle 01

Presence over pressure

Presence over pressure

Nora waits — it never demands return or guilts

disappearance.

→ No guilt-based notifications

🌱

Principle 02

Identity before interaction

Identity before interaction

Solo features unlock before social features — always.

→ Self-discovery first

🎚️

Principle 03

Everything is adjustable

Everything is adjustable

Pace, challenge, visibility — all user-controlled, no fixed

paths.

→ No forced progression

🫧

Principle 04

Failure is invisible

Failure is invisible

Missing days produces no alerts, no red states, no judgment.

→ Remove all failure UI

🔭

Principle 05

Social as a horizon

Connection is always visible ahead — never blocking the

path now.

→ Social features opt-in only

🕯️

Principle 06

Small is sacred

Two minutes completed beats ten minutes abandoned.

Always.

→ Default tasks under 5 min

Step 04 — Define

4

Define

Putting a face to the problem

A primary persona built from every research insight, a journey map tracing the emotional arc

from withdrawal to first steps back, and a sharpened problem statement precise enough to

design against.

A primary persona built from every research insight, a journey map tracing the emotional arc

from withdrawal to first steps back, and a sharpened problem statement precise enough to

design against.

5

Ideation

Generating ideas — then choosing the right ones

40+ ideas generated across 8 HMW questions, then prioritised using an effort/impact matrix,

distilled into three product concepts, and resolved to one chosen direction with a clear MVP

feature set.

40+ ideas generated across 8 HMW questions, then prioritised using an effort/impact matrix,

distilled into three product concepts, and resolved to one chosen direction with a clear MVP

feature set.

A

The Companion Model

Quiet, non-demanding presence. Identity-first. Structure

before social. Everything opt-in. Nora as a named

companion reflecting the user's pace back to them.

✓ Chosen

Why this one: The only concept that starts where

Arjun actually is — alone, in his room — and builds

outward without ever violating a design principle.

B

Community Platform

Anonymous, interest-based community for people

experiencing isolation. Moderated social spaces with

structured interaction formats.

Why not chosen: Pushes social before identity is

rebuilt — violates Principle 02. V2 layer only.

C

Structured Recovery Tool

Goal-setting and habit-building designed for withdrawal

recovery — daily structure, incremental challenges, no

clinical framing.

Why not chosen: Progress tracking triggers shame on

bad days. Structure features absorbed into Concept A

without the harmful tracking layer.

MVP Feature Set — 5 features, built around one constraint: never make Arjun feel like he failed

🌱

Interests-first

onboarding

Identity built before any social

feature appears

⚓

Anchor ritual

One self-chosen action — no

streak, no deadline

✦

Micro-task library

2–5 min prompts — skip always

visible, always equal weight

🫧

Quiet mode

Full silence — no notifications, no

guilt on return

🔭

Activity rooms

Anonymous, interest-based social

spaces

Step 06 — Design

6

Design

From principles to pixels

Information architecture, design system, four core MVP screens, and the explicit reasoning

behind each design decision — showing the chain from research insight to interface detail.

Information architecture, design system, four core MVP screens, and the explicit reasoning

behind each design decision — showing the chain from research insight to interface detail.

01

Onboarding Flow

Onboarding Flow

5 screens · First-time only · All skippable

5 screens · First-time only · All skippable

02

Home Screen

Home Screen

3 states · Identical every time

03

Task Flow

4 screens · Browser → Detail → Done or Skip

04

Self Tab

3 screens · Identity · Quiet mode · Edit

04

Room V2

5 screens · Social layer · Opt-in only · Anonymous

01 — Foundations

Design Tokens

Every visual decision in Nora is driven by a named token. Warm cream instead of white. Warm dark instead of black. The difference is felt even

if it can't be explained.

Colour Tokens

Rust

#C4623C

Primary · CTA · Active

Rust Light

#F5DDD2

Selected · Hover · Soft

BG

Rust Dim

#8C3E24

Pressed state

Rust Mid

#D4754E

Dark surface accent

App BG

#F5F0E8

Screen background

Card

#FDFAF6

Card surfaces

Ink

#1C1810

Primary text

Muted

#9A8E80

Secondary text

Border

#E8E0D4

Dividers · Borders

Dark

#1E1A13

Dark surfaces

Teal

#3A8C7A

V2 Social only

Teal Light

#D4EDE8

V2 Social BG

✓ Always

✓

Use #F5F0E8 (warm cream) for all screen backgrounds

✓

Use #1C1810 (warm black) for all primary text

✓

Reserve #3A8C7A (teal) exclusively for V2 social features

✕ Never

✕

Use #FFFFFF pure white for any background

✕

Use #000000 pure black for any text

✕

Use teal on MVP screens — its presence signals social

Typography Scale

Display

Cormorant 300 Italic

48px / lh 1.0

Nora

H1 / Screen Title

Cormorant 600

28px / lh 1.15

Your space

H2 / Card Title

Cormorant 600

20px / lh 1.25

Draw something with your eyes closed

Draw something

Prompt

Cormorant 400 Italic

17px / #C4623C

"What did it become? Anything unexpected?"

Body

Syne 400

15px / lh 1.65

Close your eyes. Pick up anything you can write with. Draw something for 30 seconds without looking.

Close your eyes. Pick up anything you can write with.

Close your eyes. Pick up anything you can write

Small / Secondary

Syne 400

13px / #9A8E80

No schedule. No pressure. Just yours.

Label / Caps

Syne 700 Uppercase

11px / ls 0.14em

Your anchor · Creative · 3 min

Caption / Italic

Syne 400 Italic

12px / #9A8E80

Come back whenever.

Nav Label

Syne 700 Uppercase

10px / ls 0.08em

Home · Tasks · Rooms · Self

Spacing Scale

XS · 4

4px — Icon gaps, tight elements

4px — Icon gaps, tight elements

S · 8

8px — Icon-to-text gaps

M · 12

12px — Component padding

L · 16

16px — Card padding

XL · 24

24px — Section gaps

2XL · 40

40px — Screen edge margins

40px — Screen edge margins

Border Radius

4

4px

Badges

4px

Badges

8

8px

Small cards

8px

Small cards

10

10px

Chips/Tags

10px

Chips/Tags

14

14px

Cards

14px

Cards

20

20px

Sheets

20px

Sheets

∞

Pill

Buttons/Tags

Pill

Buttons/Tags

Shadow System

Card

0 2px 12px

rgba(28,24,16,0.06)

Float

0 8px 28px

rgba(28,24,16,0.12)

Button

0 4px 16px

rgba(196,98,60,0.25)

Icon Set — Navigation & UI

🏠

Home

✦

Tasks

🔭

Rooms

🪴

Self

🌱

Growth

🪶

Gentle

🕯️

Warmth

🫧

Quiet

⚓

Anchor

🎨

Creative

✍️

Write

🎵

Music

🕐

Duration

←

Back

→

Send

✓

Done

Flow 01

Onboarding — Identity before anything

Flow 02

Home Screen — Identical every time

Flow 03

Task Flow— Micro-action library

Flow 04


Self Tab— Personal space

Flow 05


Activity Rooms— Social as a side effect