Mobile App — UX/UI Case Study

Gluten-Free Lifestyle App

Helping people with celiac disease live freely — one scan at a time.

UX/UI Design Mobile App WCAG Figma Adobe XD
Duration
10 weeks
Year
2023
Role
UX/UI Designer
Platform
iOS · Android
9:41 GlutenFree Good morning, Anna ✨ Search products, restaurants... QUICK ACTIONS SCAN MAP RECIPES POPULAR RECIPES GF Pasta Carbonara 25 min · Easy Rice Bowl 15 min Product Verified Safe No gluten detected · 3 minutes ago Home Search Profile

Designing for daily confidence

A comprehensive UX/UI case study for a mobile application helping people with celiac disease manage their gluten-free lifestyle. Covers user research, personas, wireframing, and high-fidelity UI for diet management, product discovery, and restaurant finding.

The project aimed to reduce the daily anxiety faced by 1 in 100 people globally who live with celiac disease — giving them the tools to make safe food choices quickly and confidently.

A frustrating daily struggle

People with celiac disease face daily frustration: finding safe gluten-free products, deciphering confusing food labels, and discovering restaurants they can trust. Existing apps were either too basic or buried key information in poor UX.

Five phases, one clear goal

01

User Research & Surveys

Conducted qualitative interviews with 15 celiac disease patients, supplemented by 60+ survey responses. Identified core pain points around label reading, restaurant choices, and app frustration.

02

Persona Development

Synthesized research data into actionable user personas representing key user archetypes — from newly diagnosed patients to long-time celiac community members.

View Gluten-Free Persona →
03

Information Architecture

Mapped out app structure using card sorting and tree testing with 20 participants. Simplified navigation to 4 core areas: Scanner, Map, Recipes, and Profile.

04

Wireframing in Figma

Created low and mid-fidelity wireframes for 18 key screens. Conducted usability testing sessions to iterate on critical flows including product scanning and restaurant search.

05

High-Fidelity UI Design

Delivered a complete design system with color, typography, and component library. All screens designed to WCAG AA contrast standards with accessibility documentation.

Built around real user needs

📷

Product Scanner

Instant barcode scanning with real-time gluten detection. Crowdsourced database of 200,000+ products with community reviews.

📍

Restaurant Finder

Location-based discovery of celiac-safe restaurants. Filter by distance, cuisine, and verified gluten-free menu availability.

📖

Recipe Library

500+ fully verified gluten-free recipes with step-by-step instructions, nutritional info, and shopping list integration.

📊

Diet Tracker

Log daily meals, track nutritional gaps common in gluten-free diets (iron, B12, fiber), and view weekly summaries.

Community Reviews

Peer-verified restaurant and product reviews from the celiac community. Real experiences, real safety data.

Accessibility (WCAG)

Full WCAG 2.1 AA compliance. High-contrast mode, screen reader support, and dyslexia-friendly font options built-in.

The design toolkit

Figma Adobe XD Maze Miro FigJam Optimal Workshop

Impact & recognition

124
Behance Views
6
Appreciations
AA
WCAG Compliant
100%
Full Design System

Next Project

Smart Home Persona →