Work 作品 About 關於 Creative 創作 Contact 聯絡 Resume 履歷
All Work全部作品
本案例研究以英文呈現
Personal Project Mobile App UX Research Product Strategy In Progress 製作中

The Roots

A mobile app helping first-generation U.S. immigrants navigate the financial, legal, and social systems that American life assumes you already know.

Role
Solo Researcher, Designer & Developer
Stack
React Native · Expo · TypeScript
Timeline
2026 — ongoing
Industry
Civic Tech · Social Impact
Live Demo
2
Distinct personas served
5
Life phases mapped
1
Unified journey
The Problem
"I'm an immigrant. The American system assumes you already know how to open a bank account, build credit, file taxes as a visa holder, read a lease. I didn't. Most immigrants don't."

The U.S. system doesn't fail immigrants through malice — it fails them through assumption. Banking forms assume you know what a checking account is. Lease agreements are legal documents written in fast English. Tax rules for F-1 and H1B holders aren't covered in any orientation. Getting five of these things wrong in the first year doesn't cause inconvenience — it can take years to undo.

The Roots was built to close that gap. Not as a resource directory, but as a structured companion that walks immigrants through each challenge, in the right order, with the right depth.

01 Research — Two Personas, One App

Before any screen was designed, the research surfaced the project's core tension: the people who need this app are not one type of person — they're two, with fundamentally different problems.

Designing for both without compromising either became the central design challenge.

Persona 1
"The Isolated Pioneer"
"I don't know if this is urgent, and I don't know who to ask. I'm afraid of making a mistake I can't undo."
Time in US 0–18 months
English Basic / Conversational
Network None or minimal
Core Needs
Step-by-step guidance · Native language support · Document checklists · Emergency phrases
Persona 2
"The Academic Adrift"
"I aced my grad school courses, but I have no idea how to build credit or file taxes as an H1B holder. I don't know what I don't know."
Time in US 2–8 years (campus bubble)
English Fluent / Professional
Network Peers in the same situation
Core Needs
Surface unknown unknowns · Immigration-aware context · Visa status logic · Verified sources

The research identified five life phases where the system fails both personas — in order of urgency: Financial Foundation, Housing, Healthcare, Transportation, and Social Capital. Each phase contains challenges that hit Persona 1 as immediate survival problems and Persona 2 as invisible landmines they don't know exist yet.

02 Core Design Decision — One Journey

The obvious solution to serving two different user types would be to build two different apps, or a branching onboarding that routes each persona to a separate experience. That approach was rejected early.

The insight that changed the architecture: both personas face the exact same set of life challenges. The differences aren't what they need — they're when they encounter it, and how deep they need to go. Persona 1 needs to open a bank account in week one. Persona 2 already has one, but doesn't know they should have started building credit two years ago.

The solution: a single unified journey, structured as a progressive milestone system. Every challenge is on the path. Users mark what they've already completed and move on — no content is ever hidden, no fork ever creates a dead end. Persona 1 works through it sequentially. Persona 2 skips the basics, ticks them off, and discovers the gaps they didn't know they had.

What they both face
Banking · Credit · Taxes · Housing · Health insurance · Renter's rights · Transportation · Community
What's different
Timeline, depth of context needed, language support, and whether the risk is "I don't know this yet" or "I already got this wrong"
The design answer
One journey. Progressive depth. Checkoff-based progress. No forks, no dead ends.
03 Design System

The visual language was built around a single tension: authority and warmth. An app dealing with legal documents, tax deadlines, and immigration paperwork needs to feel trustworthy. But the users are often in vulnerable, high-stress situations — an interface that feels cold or institutional will be abandoned.

The three-colour system resolves this directly.

Indigo
Trust & authority — signals that this tool handles serious information with seriousness
Lavender
Warmth & approachability — softens the indigo, makes the app feel like a guide rather than a government form
Gold
Milestone & achievement — used exclusively for completed steps and progress markers, so every checkoff feels earned

Typography uses Plus Jakarta Sans for display and headings — modern, confident, legible at small sizes — and Noto Sans for body text, chosen specifically for its wide language coverage. When multilingual support is added, Noto Sans handles non-Latin scripts without a typeface change.

Background tone is #F8F7FC — a faint lavender-white rather than pure white. Warm enough to feel approachable, neutral enough to keep medical and financial content legible at a glance.

What's Next
Visual polish — V2 redesign

The current V1 is a functional prototype. V2 will apply the design system fully across all screens and refine component hierarchy.

Multilingual support

Spanish, Mandarin, and Hindi as first targets — the top three non-English languages among U.S. newcomers. Noto Sans is already in place for this.

AI guide integration

Contextual AI tied to the user's current milestone — not a general chatbot, but an assistant that knows where you are in the journey and what question you're likely to have next.

Community layer — Circles

Connecting users with community members who've navigated the same milestone. Verified answers from people who've been there, not just resources from organizations that haven't.