Nutrition — A New Foundation

A broken app. A blank page. And a brief to define what a luxury health platform could become.

UX Design UI Design Design Strategy Systems Design

Client

Pura Health

Location

Dubai, UAE
Pura Nutrition hero

Mission

Reimagine how Emirati users engage with their health — starting with Nutrition

Utilise Pura Health's platform to establish a new design direction, beginning with the module most central to daily behaviour.

Problem

An app that couldn't scale, couldn't guide, and couldn't grow

Each screen built in isolation, no shared components, and data surfaced with no guidance on what to do with it.

Goal

Build a Nutrition module that guides, not just informs

Create a fast, intelligent experience for a busy Emirati user — and a component system that every future module could build on.

Role

Lead Product Designer — from blank page to vision

End-to-end ownership across UX, UI, design strategy, and systems — the first project at Pura Health, and the foundation for everything that followed.

Good data means nothing if it doesn't tell you what to do next.

Pura Health had the infrastructure — what it lacked was a system. Each screen had been built in isolation, with no shared components and no way to turn health data into guidance. This project set out to change that, beginning with Nutrition and ending with a foundation the entire product could grow from.

Understanding the user

This was an early-stage vision project, so formal research was light. The design was driven by senior product instinct and direct insight from Pura Health's existing user base.

Old UI — Diagnosing the problem

Before any new design work began, the existing Pura Health app was assessed in full. The core issue wasn't any single screen — it was a product built without a system.

What We Found

Outdated UI with no coherent visual language. Data was static and non-interactive. Each screen had been built in isolation with no component structure. The architecture made it impossible to add new modules without rebuilding from scratch.

The Missing Layer

Users were shown data but given no guidance on what to do with it. No consistency between Nutrition, Genomics, and other areas. There was no scalable component structure, and no ability to turn health data into meaningful guidance for users.

Old Pura Health UI - Screen 1 Old Pura Health UI - Screen 2 Old Pura Health UI - Screen 3 Old Pura Health UI - Screen 4

Design direction

Apple Health served as the primary visual reference. The design built on those familiar patterns and applied Pura's own brand identity on top.

Four design principles guided every decision — each one filtered through the lens of a busy Emirati user who needs fast, intelligent interactions.

Onboarding flows & screens

A nine-step structured flow designed around zero-frustration onboarding. Leading with Apple Health authorisation was a deliberate structural decision.

By pulling existing data first, we eliminated the majority of manual input later in the flow. The steps: Nutrition landing page, Apple Health authorisation, Confirm data, Diet & goals, Physical goals, Weight goals, TDEE calculation, Overview, and Genomics upsell.

Pura Nutrition Onboarding Flow

Zero Frustration

Onboarding was optimised for zero frustration over minimum clicks — confusion kills completion, step count does not. We tested with users aged 65 and above. Zero frustration was observed. The metric we were optimising for was never time — it was clarity.

Genomics as Extension

The Genomics upsell at the end of onboarding was designed to feel inevitable rather than opportunistic. Having just completed a thorough health profile, users naturally understand the value of deeper genetic insight.

The nutrition module

With onboarding complete, the real work begins.

The Nutrition module is the day-to-day experience — the surface users return to every morning, every meal, every decision. It was designed around a single principle: make the right action the easiest action. Five interconnected areas, each a self-contained component, each feeding into the same system.

Nutrition Module IA

The Information Architecture maps every screen, flow, and data relationship across the Nutrition module — showing how data, guidance, and user actions connect across the entire product experience.

Home dashboard

Everything a user needs to know — before they have to ask.

The home screen answers three questions the moment it opens: how am I doing today, what should I do next, and how am I tracking over time. Every element earns its place by driving one of those three answers.

Meal logging

Four ways in. Zero friction.

Different users log in different contexts. A user at a restaurant needs to scan. A user at home recognises a saved meal. A user recounting a full day of eating needs voice. All four methods were designed as equal entry points — each leading to the same confirmation state, none treated as secondary.

Your data. Your impact. Before you commit.

Every food decision deserves context. The confirmation screen surfaces the full picture — macros, DNA guidance, glucose impact, and remaining daily totals — all before the user commits the log.

Meal exploration

Recipes built around your goals, your diet, and your DNA.

A fully filterable recipe library personalised to the user's dietary preferences, health goals, and genetic profile. Filter by meal type, prep time, calorie range, or toggle to DNA Match Only — surfacing only what works for your genetics.

Impact & legacy

The visual language, data components, and interaction patterns established here are still being built upon today — both within Pura Health and in the wider design programme through Fantasy.co.

What Was Established

Data modal architecture. Spacing system. Data placement patterns. Icon language. Interactive tab system. Dark mode visual language. DNA integration model. Guidance-first philosophy. Every one of these patterns became the foundation for what followed.

What Came Next

Genomics, Care Plans, and the Global Platform — each built on the design system, component library, and interaction patterns established during this Nutrition module. What started as a single module became the blueprint for an entire product ecosystem.

Meal Exploration

Exploration features

Filters

Under 20 min, No oven, Under 500 kcal, DNA Match Only

Recipe card

Meal name, dietary tags, colour-coded DNA compatibility bar

Recipe & Ingredients

Step-by-step recipe with ingredients called out per step

DNA Data

Digestion rating, best time to eat, glucose level, nutrition benefits

Nutrition

Full macro breakdown — carbs, fats, protein with ring visualisation

DNA Match rating

A* to E — genetic compatibility at a glance, with plain-language explanation

Actions

Log recipe, save to favourites

Meal Logging

Confirmation elements

Size / unit and servings

Editable fields — users adjust portion without leaving the screen

Meal and date

Defaults to current meal slot and today's date — editable

DNA Guide

Condition-aware guidance at the point of decision. For Coca-Cola: 'This food may cause elevated blood sugar based on your DNA profile.' For soda water: 'This food type causes no health risks.' Informative, never shaming

Glucose spike indicator

Potential glucose spike shown as a visual scale — immediately readable, tappable for detail

Macro rings

Four rings showing percentage of daily goal — calories, carbs, protein, fats

Consumption vs remaining

Horizontal bars showing how this item moves the day's remaining totals — impact visible before confirming

Confirm Log

Single primary CTA — no ambiguity about what happens next

Dashboard

Dashboard elements

Calorie hero stat

Calories spent and remaining — the number users want most, before they scroll

Macro bars

Live carbs, fats, and protein progress bars sitting directly below the hero stat

Daily & weekly tasks

A structured task list anchoring the user to their daily goals without leaving the screen

Calorie deficit card

Today's deficit framed as a positive metric — progress, not punishment

Next meal countdown

Time until the next scheduled meal — supports timing-based dietary guidance, especially for users with genomics-informed eating windows

Pinned widgets

User-configured data modules — glucose variability, sleep quality, and others — reorderable and expandable

Genomics upsell banner

Woven into the feed as a contextual card — not a pop-up. Framed as a natural next step in understanding your health

Glucose variability

Glucose variability score surfaced as a tappable data block — compact at surface level, full dataset on tap

Sleep quality

Sleep data pulled from Apple Health — surfaced because sleep and nutrition are directly connected in the guidance model

Meal exploration

Recipe discovery at the bottom of the home — personalised to goals and meal timing, filtered by Dinner, Lunch, Snack, Breakfast