GutQuest is designed to guide users through the three phases of the low-FODMAP diet: elimination, reintroduction, and personalisation.
I designed and built it, from user research to deployment: product design, UI/UX, information architecture, interaction patterns, micro-interactions, mascot, data model, encrypted local-first architecture, testing.
The problem
The low-FODMAP protocol most often fails for lack of support. No existing app covered its three phases.
🧪 Product
Three-day food test with increasing doses. If something does not sit well, the threshold falls back to the previous day’s dose.
Symptom journal in three gestures, decoupled from meals.
Personal path: a trace of every completed test. A badge, once earned, is never lost.
The app: home, explore, food page, symptom journal
Information architecture: three tabs at the same level, sheets and modals on top
Activity diagram: testing a food
🎨 UX and mascot
One accessibility rule for the mascot and the UI: no red or green, no streaks, no scoring, no comparison, no clinical language.
UI design for a mobile app: layout, visual hierarchy, bottom sheets and modals, visual polish down to each state.
Gut, the mascot: one silhouette, five states
The contour grammar: the line gives the source, the wave gives the level
Design system: navigation, food families, phase label, buttons, controls, milestones and the state colour scale
🔒 Architecture and engineering
Local-first: the app works fully offline, health data stays in an encrypted SQLite database on the device.
Design system: design tokens defined once in tokens.json and propagated to a responsive UI.
GDPR by design: health data as special-category data (art. 9), erasure (art. 17), portability (art. 20), processing register (art. 30).
CI and acceptance testing with GitHub Actions.
AI-assisted development with Claude Code, framed by a versioned rules file. Every decision reviewed.
Supabase backend, Expo (React Native) client.
Data model: two worlds, no foreign key between them
Dissertation
A 99-page dissertation documents the research, design decisions, architecture and compliance work.
Below, a few spreads: user flow and moodboard, Gut’s states, data specification, design system annex.
Low-FODMAP mobile app: UX research, UI/UX, information architecture, interaction patterns, accessibility, mascot, design system, from research to deployment.