Explaining a New AR Cooking Kit for Vodafone Under an “Impossible” 2-Week Timeline

Context

Giga-AR is a hands-free cooking experience: a bundle that combines an AR cooking app, a pair of Nreal smart glasses, and a physical kit. Vodafone wanted a website that could clearly explain how all of these pieces fit together—what's in the box, how to set it up, and what the experience looks and feels like in real life.

At Mondia, we already had a long-standing partnership with Vodafone and had previously built a Vodafone-specific design system. That familiarity with their brand, tone, and digital standards allowed us to move quickly into framing the story rather than spending weeks on alignment.

The constraint: we had just two weeks to design and develop the entire website. That included explaining a completely new AR concept, educating users about the kit, and shipping a polished, animated experience ready for public launch.

The Challenge

The kit: Nreal glasses, phone, and accessories.

The main UX challenge was educational: the website had to explain how the Giga-AR kit worked end-to-end. Users needed to understand what they would receive, what the Nreal glasses are, how the cooking app works, and how the experience looks in practice—without overwhelming them or creating false expectations about the AR interface itself.

We also had to structure the story so that someone landing on the page for the first time could answer a few key questions quickly: “What is this?”, “What do I get?”, “How do I use it?”, and “Why is this better than just cooking with my phone?” Solving those questions in a clear, visual way under a two-week build window was the core design problem.

Team & Collaboration

As UX lead, I structured the project so the team could focus on high-leverage research while I owned the overall experience and implementation. The UX team helped with quick competitive research and workshop facilitation, and they contributed patterns and components from the existing Vodafone design system I had previously created. This gave us a solid foundation to build on without reinventing the basics.

I then took full responsibility for the website's experience: defining how we tell the story of the kit, designing the UI, shaping the motion and interaction patterns, and developing the site end-to-end. Owning both design and code meant every detail—from scroll pacing to hover states to section reveals—was tuned to support the narrative.

Research, Personas & Survey Insights

With roughly a week for discovery, we ran a quick survey (57 responses) and internal interviews with people who cook regularly at home. The goal wasn't to over-engineer the research, but to understand how users currently follow recipes, what devices they use in the kitchen, and what might confuse or excite them about an AR cooking kit. From this, we shaped three lightweight personas that guided the structure and language of the website.

The survey results revealed three main challenges: 76% had never used AR in the kitchen and couldn’t picture the value, 58% didn’t know what Nreal glasses were or what the kit included, and 71% said they needed a clear, visual walkthrough of a full cooking session before considering the product.

These insights shaped the website into a guided walkthrough of the product rather than a traditional marketing page. Instead of leading with abstract benefits, we framed the content around a concrete journey: unboxing the kit, understanding the glasses, connecting the app, and seeing a recipe play out step by step in AR. Each section was tasked with answering one key user question at a time, reducing cognitive load and making the experience feel more tangible.

UX Flow & Story Structure

Based on the research, we treated the website as a story about how the kit works from start to finish. Instead of dumping all information in one place, the page progressively reveals the experience in a sequence users can follow: what Giga-AR is, what comes in the box, what the Nreal glasses are, how the app fits in, and what a real cooking session looks like once everything is connected.

A key UX decision was how to “show” the AR experience without pretending we had designed the headset UI. We avoided fake in-headset screenshots and instead focused on over-the-shoulder visuals and illustrations: a person wearing the glasses, glancing at floating steps, and following guidance while cooking. This allowed us to communicate the experience honestly while still making it feel concrete and aspirational.

Throughout, we kept a close eye on cognitive load. The story is broken into focused, visually-led sections that answer one main question at a time, with copy that stays short and direct. Motion and transitions are used to guide attention through the flow rather than to impress; if an animation didn't help someone understand the kit, it didn't make the final cut.

UI, Motion & Responsive Design

The visual language built on Vodafone's existing design system—typography, color, and spacing—but adapted it to tell the story of a physical kit plus AR experience. Large photography blocks highlight the Nreal glasses and kit contents, while clear hierarchy and spacing make it easy to scan what's included and what each element is for. The goal was to make the product feel futuristic and premium, but also understandable at a glance.

Motion was treated as functional, not decorative. Section transitions follow the implied flow of using the product: you scroll from unboxing into understanding the glasses, then into how the app behaves, and finally into what a cooking session looks like. Subtle animations visually connect elements—for example showing how the phone, the glasses, and the kit relate—so users can build a mental model of how everything fits together.

The website needed to work seamlessly across mobile, tablet, and desktop. I designed mobile-first to ensure the story could be understood on a small screen and then expanded the layouts for larger viewports where we could show more detail. This kept performance and clarity intact while still allowing a more immersive visual story on desktop.

Development & Implementation

I implemented the website using Gulp for build automation, SCSS for modular styling aligned with the design system, and GSAP to drive the key animations tied to the story. Designing and coding in parallel meant I could adjust timings, easing curves, and animation triggers directly in the browser until the interactions felt both smooth and meaningful.

This end-to-end ownership made it possible to keep quality high despite the deadline. There was no gap between the UX intent and what shipped: if something didn't feel right in motion, I refined both the design and the implementation in the same loop, keeping the experience coherent from first draft to final build.

Outcome & Reflection

We launched on time with a website that clearly explains how the Giga-AR kit, Nreal glasses, and app work together. Vodafone was extremely happy with the outcome—both in terms of visual quality and how effectively the experience educated users about a new type of product.

This project demonstrated my ability to lead UX under pressure while still protecting the quality of the experience. Collaborating closely with stakeholders and engineers, and owning both design and development, allowed me to bridge the gap between concept and execution. The website doesn't just look futuristic; it reliably teaches users what they're getting, how to use it, and what to expect from the AR experience.

It also reinforced how much I enjoy working at the intersection of interaction design and implementation. Thinking in flows and motion rather than just static screens—and then bringing those ideas to life in production code—is what ultimately made this extreme deadline achievable and turned a complex AR kit into something users can actually understand.