LAVI — Journey Maps & User Flows

LAVI · UX Case Study · Duration: 8 weeks · Role: Certified UX Designer (solo) · Figma VS Code · Section 06 of 12

06: Journey maps & user flows

How users move through LAVI

Journey maps trace the emotional arc of each persona from the moment a health concern arises through to resolution, surfacing design opportunities at each stage. User flows document the step-by-step task paths within the app. Originally created in Figma and documented here for the portfolio.

Marie-Claire · Wakes with chest tightness · Uses LAVI symptom checker in Haitian Creole

	Trigger	Search	Open LAVI	Get result	Share & act
Action	Wakes with chest tightness before her shift. Feels worried but unsure how serious it is.	Texts church WhatsApp group, no reply. Opens Google, gets alarming results mentioning heart conditions.	Opens LAVI. Selects Haitian Creole. Taps the symptom checker tile on the home screen.	Reads plain-language result in Creole: "This may be stress or acid reflux. Rest and monitor for 24 hours."	Shares result to her WhatsApp group. Gets ready for her shift feeling informed, not frightened.
Thought	"Am I having a heart attack? Should I call someone?"	"WebMD says angina, now I'm more scared than before."	"This is in Creole. It looks simple. Let me try it."	"I understand this. It makes sense. I feel less scared."	"I know what to watch for. I'll call my doctor if it gets worse."
Emotion	😰Anxious	😨Scared	🤔Cautious	😮‍💨Relieved	😌Calm
Opportunity	Open with a calm, reassuring tone, not a clinical warning screen	LAVI must be discoverable in Creole community WhatsApp groups	Language selection must be the very first interaction, before any other content	Results must never use clinical terms without an immediate plain-language follow-up	One-tap WhatsApp share must appear on every result screen, no extra steps

Stage 1. Trigger

ActionWakes with chest tightness before her shift. Unsure how serious it is.

Thought"Am I having a heart attack? Should I call someone?"

Emotion😰 Anxious

OpportunityOpen with a calm, reassuring tone, not a clinical warning screen

Stage 2. Search

ActionTexts church WhatsApp group, no reply. Google returns alarming results.

Thought"WebMD says angina, now I'm more scared than before."

Emotion😨 Scared

OpportunityLAVI must be discoverable in Creole community WhatsApp groups

Stage 3. Open LAVI

ActionOpens LAVI. Selects Haitian Creole. Taps symptom checker.

Thought"This is in Creole. It looks simple. Let me try it."

Emotion🤔 Cautious

OpportunityLanguage selection must be the very first interaction, before any other content

Stage 4. Get result

ActionReads plain-language result in Creole: "Rest and monitor for 24 hours."

Thought"I understand this. It makes sense. I feel less scared."

Emotion😮‍💨 Relieved

OpportunityResults must never use clinical terms without an immediate plain-language follow-up

Stage 5. Share & act

ActionShares result to WhatsApp group. Gets ready for work feeling informed.

Thought"I know what to watch for. I'll call my doctor if it gets worse."

Emotion😌 Calm

OpportunityOne-tap WhatsApp share must appear on every result screen, no extra steps

Key insight → Design decision

Marie-Claire's emotional low point happens before she opens LAVI, caused by frightening search results. LAVI's job is not just to inform, but to de-escalate first.

This directly informed the urgency result design: the green "rest at home" state leads with a checkmark icon and calm tone before any detail. The amber and red states were also redesigned post-testing to open with a reassuring sentence, not an alarm. The symptom checker's plain-language output and one-tap WhatsApp share both trace back to this journey.

Carlos · Picks up metformin from pharmacy · Scans label with LAVI in Spanish

	Trigger	Confusion	Open LAVI	Scan label	Understand & act
Action	Picks up metformin from the pharmacy after his diabetes diagnosis. Label is in English only.	Reads the label three times. Still unsure if his late dinner after a long shift counts as a "meal."	Opens LAVI. Selects Spanish. Taps the medication tile and sees the full-width scan button.	Points camera at label. LAVI returns simplified instructions in Spanish within seconds.	Sets two daily reminders directly from the results screen. Closes the app. Done in under 2 minutes.
Thought	"Another prescription. I hope I understand this one better than the last."	"Does a late dinner count? I don't want to mess this up."	"I see the camera button clearly. This looks fast, let me try."	"Any meal counts, even a small snack. That makes sense. I understand now."	"I don't need my son. I don't need the pharmacy. I've got this."
Emotion	😐Neutral	😕Confused	🤔Curious	🙂Hopeful	😊Confident
Opportunity	Surface medication scanner as the dominant primary action on the medications screen	Provide a manual name-search fallback for when camera scan is not available	Scan button must be full-width and labeled, not a small icon next to a text field	Use relatable food examples (tortillas, rice, small snack) not just the word "meal"	Offer in-app reminder setup immediately after instructions, no extra navigation required

Stage 1. Trigger

ActionPicks up metformin from the pharmacy. Label is in English only.

Thought"Another prescription. I hope I understand this one better than the last."

Emotion😐 Neutral

OpportunitySurface medication scanner as the dominant primary action on the screen

Stage 2. Confusion

ActionReads label three times. Unsure if his late dinner counts as a "meal."

Thought"Does a late dinner count? I don't want to mess this up."

Emotion😕 Confused

OpportunityProvide a manual name-search fallback for when camera scan is unavailable

Stage 3. Open LAVI

ActionOpens LAVI. Selects Spanish. Sees the full-width scan button clearly.

Thought"I see the camera button clearly. This looks fast, let me try."

Emotion🤔 Curious

OpportunityScan button must be full-width and labeled, not a small icon next to a text field

Stage 4. Scan label

ActionPoints camera at label. Gets simplified Spanish instructions within seconds.

Thought"Any meal counts, even a small snack. I understand now."

Emotion🙂 Hopeful

OpportunityUse relatable food examples (tortillas, rice, small snack), not just the word "meal"

Stage 5. Understand & act

ActionSets two daily reminders from the results screen. Done in under 2 minutes.

Thought"I don't need my son. I don't need the pharmacy. I've got this."

Emotion😊 Confident

OpportunityOffer in-app reminder setup immediately after instructions, no extra navigation

Key insight → Design decision

Carlos's journey is entirely about speed and independence. He wants one clear answer that lets him move on. Every additional tap is a reason to abandon the app.

This directly informed three design decisions: (1) the medication scan button was made full-width and primary after usability testing showed users missed the icon; (2) food interaction examples use culturally specific items, tortillas, rice, plantains, not generic "with food"; (3) reminder setup was moved to immediately follow the instructions screen, reducing the flow to a single session.

The following flows document the two primary task paths within LAVI's MVP scope, the symptom checker and the medication scan. Both flows were created in Figma and validated through two rounds of usability testing.

Note: User flows also exist for the Find a Doctor and Health Literacy features. Those flows follow the same structural pattern and are available in the full Figma project file.

Symptom checker flow

User identifies a health concern and receives a plain-language urgency result with a clear next step.

User opens the app and selects their language

Language preference (English, Spanish, or Haitian Creole) is set on first launch and remembered for all future sessions. The selection can be changed at any time via the persistent language toggle in the top navigation bar.

User taps the symptom checker tile on the home screen

The symptom checker tile is positioned in the top-left of the 4-tile home grid, primary placement reflecting its status as LAVI's most-used feature.

User describes their symptoms

User taps a body area on the illustrated diagram or types a description in their language. Multiple symptoms can be added.

Decision point

Tap body area on illustrated diagram → pre-fills symptom field · OR · Type symptom description in free text field

User answers 1–3 follow-up yes/no questions

Simple binary questions narrow the result (e.g. "Do you have a fever?"). The flow never exceeds 3 questions, a deliberate constraint informed by the research finding that users abandon flows with more than 3 steps.

User views their urgency result

Result shows urgency level (green / amber / red), a plain-language explanation, and a primary CTA. Color is never the only indicator, icon and text always accompany the color band.

Decision point

Green → tips screen · Amber → find clinic flow · Red → call 911 / nearest ER directions

User saves or shares the result

Result is auto-saved to history. User can share via WhatsApp in one tap, a feature surfaced by user research showing WhatsApp is the primary community health information channel.

Medication scan flow

User scans a prescription label and receives simplified instructions with optional reminders, in their language.

User taps the medication tile on the home screen

Positioned top-right on the home grid. If the user has saved medications, they appear here for quick access, reducing repeat navigation for ongoing prescriptions.

User scans their prescription label or searches by name

The scan button is full-width and clearly labeled, the primary action. Manual name search is the secondary fallback, surfaced as a text link below the scan button.

Decision point

Tap full-width scan button → camera opens → point at label · OR · Tap "Search by name instead" text link → type medication name

User reads simplified medication instructions

LAVI displays: when to take it, how to take it, what to avoid (with culturally specific food examples), and the 3 most common side effects, all at a grade 6 reading level in the user's selected language.

User sets medication reminders

A reminder prompt appears immediately after the instructions, no additional navigation required. Times are pre-filled based on dosage frequency. The user adjusts if needed and confirms with one tap.

Medication is saved to the user's list

The medication and its simplified instructions are added to the home screen medication tile for fast future reference. The user can return to any saved medication without re-scanning.