Andy Kaiser — CEO at Ninetailed
The Power of Personalization in the Digital Customer Experience
September 4, 2023
12:00
Personalisation
🇬🇧 English
Personalisation
The Sweet Taste of Success: Launching Augmented Reality Experiences with Low-Code
About
Join us to hear how we used low-code technology to design, build and launch an unforgettable activation for a popular global confectionary brand. / As 3D and augmented reality become ubiquitous in modern web design, it’s becoming more important than ever to understand how these technologies can be embedded into your work. / In this talk, discover how we blurred the line between physical and digital, how we created a fun, educational experience to launch a brand new retail product, and learn about the benefits of using tools like Webflow to launch quickly and iterate often in this space.
Watch the full talk
Watch this WaysConf session, then continue with related talks or explore the current programme.
From the recording
Talk in brief
Tim Janes and Dan Foster present a case study in creating a mobile augmented-reality experience for a confectionery product with a small team and a low-code stack. The project begins by replacing a technology-first request with three experience goals: entertain families, teach them about animals, and give the brand something distinctive. The speakers then trace the work from jelly-inspired 3D characters and an on-screen coloring tool to Webflow, Model Viewer, and targeted JavaScript. The result shows where low code can accelerate an ambitious concept, while the uneven behavior of web AR across phones makes extensive device testing and graceful failure states essential.
Key takeaways
- 01
Define experience goals before choosing AR
The team tested the initial technology request against clear goals for entertainment, education, and brand innovation before committing to a solution.
Watch from 2:55 - 02
Let the physical product shape the digital world
Jelly sweets inspired the characters, materials, and visual language, while added anatomical details supported the educational content.
Watch from 6:06 - 03
Design unfamiliar mobile interactions through prototypes
Coloring a 3D model on a small screen required bespoke controls and repeated experiments rather than an established interface pattern.
Watch from 8:19 - 04
Combine low code with focused custom code
Webflow handled content and motion, Model Viewer delivered 3D and AR, and JavaScript covered the distinctive drawing and texture behavior.
Watch from 13:06 - 05
Test web AR across real devices
Compatibility varied across operating systems and phone models, so device coverage and useful error messages were part of the user experience.
Watch from 16:59
Read edited transcript highlights
These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.
The technology brief became a user-centered challenge
The client arrived with augmented reality already in mind, but the team paused before treating AR as the answer. A workshop defined three outcomes instead: the experience should entertain families, teach children and parents something about the animals, and help the product feel innovative. Those goals created a basis for judging every later design and technology choice.
Watch from 2:55Character design connected packaging with learning
The first digital touchpoint came from the sweets themselves, so the 3D creatures needed to remain recognizably jelly-like. At the same time, a completely abstract shape would not support facts about tusks, movement, or habitat. The team therefore worked with specialist partners to add selective detail while preserving the playful material and form of the physical product.
Watch from 6:06A tiny screen needed its own creative tool
Allowing a child to decorate a model on a phone meant building a compact drawing application rather than copying a desktop editor. Brushes, stickers, patterns, rotation, and saving all competed for limited space. With no suitable standard library or established pattern, the designers iterated on bespoke icons and controls until the creative task remained understandable and playful.
Watch from 8:19Low code worked because the stack had clear boundaries
Webflow supplied the CMS, hosting, layout, and motion needed for a rich browser experience. Model Viewer embedded the 3D assets and triggered augmented reality, while a limited layer of JavaScript turned drawings into textures applied to each model. The approach was not code-free; it concentrated custom engineering on the behavior that made the product distinctive.
Watch from 13:06Compatibility testing was part of the product design
An AR feature that succeeds on one phone can fail on another operating-system version or device. The team bought and borrowed representative phones, tested the complete flow repeatedly, and investigated both technical fixes and understandable failure states. For unsupported combinations, a clear explanation was more respectful than leaving families with an apparently broken interaction.
Watch from 16:59
Explore WaysConf 2026
