Intake24 Website

The Challenge

Making a Research Method Feel Easy

“Easy way to measure what people eat.”

That headline is where the site ended up — but the starting point was a tool explained mostly in academic language. Intake24 is accurate, free for research where feasible, and used internationally. The website's job was to make all of that obvious to someone who has never heard of a 24-hour recall.

Homepage Design & Build

One Scroll From Curious to Convinced

The homepage moves through definition, benefits, a product walk-through, social proof and a call to action — in that order, on purpose.

intake24.org

• Hero that answers 'what is this?'One clear promise — "Easy way to measure what people eat" — plus a one-line definition and a demo button.
• Why use Intake24?Four alternating feature rows: accuracy, convenience, portion estimation, and the smart search under the hood.
• Here's how it worksFive numbered steps, each paired with a screenshot of the real survey interface.
• Impact & reachOrganisations, research topics, populations and country databases — credibility in one scroll.

Product Storytelling

Showing the Recall, Step by Step

Instead of describing the survey, the homepage shows it — five steps, each paired with real interface screens, alternating left and right as the visitor scrolls.

1. 01Choose the time of the meal
2. 02Add the foods & drinks consumed
3. 03Estimate portions with photo prompts
4. 04Answer custom questions
5. 05Review & personalised feedback

intake24.org

• Real UI, not stock mockupsMeal times, food search, photo-based portion sizes, custom questions and the final review — the actual survey screens.
• Zig-zag rhythmImage and text swap sides on every step, so a long section still reads quickly. On mobile it collapses to a single column.
• Data-driven sectionSteps live in one typed array — adding or reordering a step is a one-line change.

Inner Pages

Depth for Researchers, Without Clutter

Each inner page goes one level deeper for the people who need it. Pick a page to see it.

FeaturesScience BehindAboutResourcesContact

intake24.org/features

Features

A dedicated page for feature depth — nutrient output, localisation, open-source licensing — with downloadable sample CSV output for researchers.

Responsive Design

Built for the Phones Participants Actually Use

Recalls are often completed on a phone, so the website was designed to read just as well there — stacked layouts, a collapsing app bar, and full-width calls to action.

Same story, one column

The hero centres and stacks, the zig-zag walkthrough becomes a single readable column, and the About timeline swaps to a purpose-built small-screen component rather than squeezing the desktop version. Hover or tap the second phone to scroll the full page.

Key Achievements

Ten Milestones of the Build

1. 019-page marketing website designed and built
2. 0231 reusable Vue 3 + Vuetify components
3. 035-step product walk-through from real UI
4. 04Responsive timeline with separate desktop & mobile layouts
5. 05Contact form with field checks & notifications
6. 06Publications & science pages for researchers
7. 0710 country food databases presented
8. 08Image pipeline: 2.34 MB → 0.78 MB (−67%)
9. 09Gzip pre-compression: JS −66%, CSS −88%
10. 10Lighthouse desktop: 95 performance, 96 best practices

Evidence & Measurement

What We Can Measure

Like all our case studies, this one separates what we measured from what we can't show.

Screenshots on this page are captures of the delivered build. Scientific claims about Intake24 (accuracy, usage, localisation) are the platform's own, as published on the site.