Headless Website for a Personalized Meal Plan App
BRAND
Calo
Client
Calo Inc.
Stack
Headless WordPress
Budget
Confidential
PROJECT AT A GLANCE
A modern, scalable platform presenting Calo’s meal plans with clear UX, smooth motion, and full EN/AR support. Built on Next.js, headless WordPress, GraphQL, and Vercel for speed, reliability, and easy iteration.
DISCOVERY WORKSHOPS
We ran briefings and remote workshops to lock goals, user journeys, and visual direction. Outputs included sitemap, content model, component inventory, and animation priorities aligned to conversion paths.
WIREFRAMES
We mapped all pages and flows: onboarding, plan comparison, meal details, quiz, and newsletter capture. Wireframes resolved plan hierarchy, modifiers, and localization needs before UI and development.
INTERACTIVITY FIRST
Framer Motion powered micro‑interactions for cards, filters, and transitions. We set motion guidelines (duration, easing, distance) to keep animations crisp on desktop and mobile. Lenis Scroll delivered smooth, accessible scrolling.
CUSTOM MEAL BUILDER
A “create your meal” flow turns inputs into a clear plan preview. We designed responsive cards, portion selectors, and price updates. GraphQL provides only required data per step, keeping the UI instant and stable.
MEAL QUIZ
A lightweight quiz narrows options by goal, cuisine, and schedule. Progress indicators and inline validation speed completion. Results link directly to prefiltered plans, cutting decision time.
ARABIC VERSIONS
We implemented mirrored layouts, logical ordering, and locale‑aware components. Typography, spacing, and icons adjust per direction. Content parity across EN/AR ensures identical features and interactions.
MULTI‑COUNTRY OFFER SWITCH
A country switcher updates currency, availability, and logistics rules. The CMS models markets and plans separately. The UI reflects changes instantly, avoiding duplicate templates and reducing maintenance.
MOBILE OPTIMIZATION
Layouts use mobile‑first breakpoints with larger tap targets and simplified headers. Critical content loads first. Animations adapt to device capability to protect frame rate on lower‑end phones.
PERFORMANCE OPTIMIZATION
Server‑side rendering and static generation reduce TTFB. We optimized images, implemented code‑splitting, and pruned animation on low‑power devices. Result: faster first paint, smoother interactions, and better crawl efficiency.
Calo Inc.
The team is highly transparent, well-organized, and communicative; they manage the project well through weekly meetings. Overall, they stand out for their friendly and collaborative approach.
Sr Marketing Specialist
