Headless Website For A Leading App Providing Personalized Meal Plans
PROBLEM
Calo needed a website that could effectively serve users across diverse Middle Eastern markets. The challenge was to accommodate a wide range of dietary preferences, support multiple currencies, and provide language flexibility including Right-to-Left (RTL) text orientation. Additional complexities included integrating country-specific social media panels and ensuring seamless currency conversion.
SOLUTION
We redesigned and rebuilt the site over 7 months using Next.js + TypeScript on a headless WordPress CMS with GraphQL. We designed end‑to‑end wireframes, then UI. We implemented Framer Motion animations, Lenis Scroll, and server‑side rendering on Vercel. We delivered full English–Arabic parity, including RTL layouts.
VALUE DELIVERED
The new Calo website offers a seamless, intuitive user experience tailored to diverse cultural and linguistic contexts. By enabling location-specific content and real-time pricing, the platform ensures relevance and trust across key markets. This has led to improved accessibility, higher engagement, and a stronger market presence for Calo in the Middle East.
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.
