LAVI · UX Case Study
·
Duration: 8 weeks·
Role: Certified UX Designer (solo)·FigmaVS Code·
Section 08 of 12
08: Prototypes
From sketch to screen
Three fidelity levels produced in Figma, each answering a specific design question, moving from structural decisions through interaction patterns to final visual polish. The same three core screens (home, symptom input, urgency result) are shown across all three levels for direct side-by-side comparison.
Design question: Is the right content in the right place?
Lo-fi wireframes contain zero color, typography, or imagery, only structure. The goal is to validate content hierarchy and component placement before investing in visual design. Placeholder blocks represent content areas; labels inside blocks identify their purpose.
Screens shown: Home dashboard · Symptom input · Urgency result · Medication scan entry, same screens tracked across all three fidelity levels
Home dashboard
Body diagram
Symptom input
Urgency result
Camera scan area
Medication scan entry
Design decisions validated at lo-fi: The 4-tile home grid confirms all core features are reachable without scrolling. The body diagram placeholder, labeled "Body diagram", tested whether a visual input method above the text field felt natural as the primary symptom entry method. The urgency result uses a full-width color band as its dominant element. The medication screen establishes the camera scan area as the largest visual block, tested against a layout where the text search field was primary, the camera-first layout tested better for discoverability.
Design question: Do the interactions and content flow make sense in context?
Mid-fi prototypes introduce real UI components, typography, spacing, and Haitian Creole copy, but without final brand color, photography, or illustration. This is the fidelity level used in the first round of usability testing to validate navigation patterns and content flow. The body diagram appears as a simplified schematic, not the final illustrated version.
Screens shown in Haitian Creole, the primary underserved language, to validate that copy fits the UI at this fidelity level before any visual polish is applied
Bonjou, Marie-Claire
Ki jan ou santi ou jodi a?
KreyòlEspañolEnglish
Senbòl
Tcheke kijan ou santi
Medikaman
Skan etikèt ou
Jwenn Doktè
Filtre pa lang
Aprann
Glosè medikal
Rapèl medikaman
Lisinopril 10mg, 8:00 AM
Lakay
Senbòl
Doktè
Aprann
Home (Haitian Creole)
Tcheke senbòl ou
Di m kijan ou santi ou
Klike sou kote ki fè mal
Ekri senbòl ou isit la...
Ou gen lafyèv?
Wi
Non
Tcheke senbòl yo
Lakay
Senbòl
Doktè
Aprann
Symptom input
Rezilta ou
Basé sou senbòl ou yo
Repoze lakay ou
Sa ka se estrès oswa refleks asid. Veye pandan 24 zè.
Kisa pou w fè
Bwè dlo, repoze. Si sa vin pi mal, rele doktè ou.
Pataje
Jwenn Doktè
Urgency result
Design decisions validated at mid-fi: The language toggle in the header was confirmed as essential at this stage. Creole labels fit within the nav bar without truncation. However, first-round usability testing at this fidelity revealed that the language toggle disappeared on deeper screens and 2 of 5 participants could not find it mid-session. This led directly to the post-test design decision to move the toggle to a persistent global location in the top navigation bar · applied in the hi-fi version. The simplified body diagram schematic confirmed that a visual body-tap input method was intuitive without requiring the final illustrated version. ↑ Usability test finding. Round 1
Design question: Does the visual design communicate trust, clarity, and calm?
Hi-fi mockups apply the full LAVI design system, the forest green palette, DM Sans typography, iconography, and all post-usability-test iterations. These are the screens used for the second usability testing round and developer handoff. A fourth screen (medication instructions) is included to demonstrate feature range beyond the symptom checker.
Screens shown: Home · Symptom input · Urgency result (green) · Medication instructions, demonstrating range across two features
Bonjou. Good morning
LAVI
Bay Lavi · Give Life
KreyòlEspañolEnglish
Rapèl medikaman
Lisinopril 10mg, 8:00 AM
Senbòl
Tcheke kijan ou santi
Medikaman
Skan oswa rechèch
Jwenn Doktè
Filtre: lang, asirans
Aprann
Glosè ak gid sante
Lakay
Senbòl
Doktè
Aprann
Home screen
Tcheke senbòl ou
Di m kijan ou santi ou jodi a
Estomak chwazi
Doulè nan vant, anfle yon ti kras...
Ou gen lafyèv?
Wi
Non
Tcheke senbòl yo
Symptom input
Rezilta ou
Basé sou senbòl ou yo
Repoze lakay ou
Sa ka se estrès oswa refleks asid. Pa bezwen lopital kounye a.
Kisa pou w fè kounye a
Bwè dlo, repoze, evite manje pwant. Si doulè a vin pi fò, rele doktè ou.
Ale lopital si ou wè sa
Doulè fò · Souf kout · Bra gòch fè mal
Pataje WhatsApp
Jwenn Doktè
Urgency result, safe
Enstriksyon senp
Metformin 500mg
Metformin 500mg
Ki lè pranDe fwa pa jou, maten ak aswè
Ki jan pranAvèk manje, menm yon ti repas konte
EviteAlkòl, reta manje plis pase 6 zè
Efè nòmalVant fè mal kèk jou, sa nòmal
Mete yon rapèl
Lakay
Medikaman
Doktè
Aprann
Medication instructions
Design decisions finalized at hi-fi: The deep forest green header creates immediate brand recognition and communicates calm authority before a word is read. The urgency result screen leads with a green checkmark icon, the color and icon together signal "safe" before any text is processed, a decision validated in post-iteration usability testing where satisfaction scores rose from 4.4 to 4.8 out of 5. ↑ Usability test Round 2 The medication instructions screen demonstrates a fourth hi-fi screen to show feature range: culturally specific food examples ("menm yon ti repas konte", even a small meal counts) replace the generic "take with food" on the original label, directly addressing Carlos's confusion identified in his journey map.