Jell-O Lab

Mixed Reality · Mobile AR

Client: Jell-O · Deeplocal
Role: UX/UI Designer
Timeline: 2023
Scope: Mobile AR · Service design

About

A mixed reality mobile experience to promote family bonding and enable digital transformation for the Jell-O brand. Jell-O Creature Lab is a Deeplocal-partnered project focused on turning traditional Jell-O into a playful mobile AR experience that promotes interactive play among kids and parents.

I was the UX/UI designer on the team, leveraging the playful nature of jello and seamlessly blending physical and mixed-reality interactions into an immersive gaming experience.

Design process

Service Blueprint

Mapping the whole journey

My first step was to map out and visualize the entire user journey, including physical and digital interactions, to ensure a seamless and engaging experience. It helped identify touchpoints, pain points, and opportunities to deliver a holistic, delightful gaming service.

Stage 1 — physical: making jello

Service blueprint stage 1: the physical experience of making jello

Stage 2 — augmented reality

Service blueprint stage 2: the augmented reality experience

Stage 3 — physical & digital

Service blueprint stage 3: the hybrid physical and digital experience

Stage 4 — post-game

Service blueprint stage 4: the post-game experience

UI Design System

Wobbly, but legible

I then crafted a high-fidelity UI design system, adhering to two core principles:

Jello-inspired aesthetics — UI elements resemble the playful, wobbly nature of jello: vibrant colors, soft curves, and organic shapes that evoke fun and whimsy.
Clear visibility in AR — elements are designed to stand out prominently in the AR environment, with attention to contrast, legibility, and sizing.

Final Prototype

The experience, step by step

Step 1 begins with a tactile journey: families receive an immersive experience package, accompanied by captivating 3D animations within the app.

Step 1 — unboxing the experience package with 3D animations

Step 2 dives into augmented reality: scanning the cut-out jello brings it to life within the AR game, inviting users to embellish it with expressive eyes and a delightful mouth.

Step 2 — scanning the jello and personalizing the creature in AR

Step 3 offers a hybrid encounter: users cut out jello in various colors and feed it to their jello creature, teaching their virtual companion different emotions and fostering an engaging bond.

Step 3 — feeding the jello creature and teaching it emotions

The final step invites users to capture a memorable photo alongside their lovable jello monster — immortalizing the bond forged throughout the journey.

Step 4 — taking a photo with the jello monster

Playtests

30 players, one open house

The game underwent extensive playtesting with a diverse audience of 30 participants. A successful playtest was also conducted during an open house at the client's venue, where the game received overwhelmingly positive feedback.

Takeaways

What I'd carry forward

User engagement — jello-inspired visuals combined with physical and mixed-reality interactions made for a highly engaging, immersive experience.
Integration of AR technology — seamlessly blending the physical and digital realms created a unique, captivating experience.
Successful playtesting — testing with a diverse audience identified areas to improve and validated the design, ensuring a polished experience.

Next project