Olipop Flavor Wheel

Improving Product Discovery Through an Interactive Flavor System

A visually engaging, informational interactive product showcase that helped over 100 attendees discover their ideal Olipop soda flavor during a health and wellness presentation.

Project Overview

Figma and Content Creation

A nutritionist needed an informational yet fun, engaging showcase for a presentation. They wanted a way to present gut-friendly tips and products accessibly for event attendees while highlighting not just what Olipop had to offer, but prebiotic and probiotic health overall.

Platforms

Figma

Deliverables

Smart animate carousel animation

My Role

Sole Designer
I handled the entire design process, from sketches to final execution, ensuring the final outcome aligned with the client’s vision of representing health in a fun way.

Results

The Olipop soda carousel was a hit at the event, drawing attention with its interactive and colorful design. Attendees learned about gut health at their own pace, associating it with the fun and flavor of Olipop sodas rather than a typical health seminar. This carousel successfully demonstrated how smart animation and thoughtful design can make wellness content more digestable (ha!).

View project

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Design Process

I decided to create an interactive carousel featuring Olipop's popular soda flavors: Cherry Vanilla, Strawberry Vanilla, Peaches and Cream, and Cherry Cola. I created an interactive playful carousel where users could click on any of the four soda cans to reveal additional information about the flavor and its gut-friendly benefits.

Sketches of what the animation could look like.
Top left- all the info that we felt was necessary to represent the drink. Top right- what we decided on! Represented everything very well. Bottom left- nice, but didn't end up with it in the end. Bottom right- circle felt like it was taking up a lot of the page, didn't care for the visual.

I wanted to explore different layouts of can and content placement and hierarchy. Top left was what represented all the info that felt necessary while not overwhelming viewers with educational content.

I used Canva to create custom backgrounds and complementary elements that reflect the unique energy and personality of each product. The key decision: using each flavor's signature color and names as the background color and items created instant visual association with Olipop's vibrant brand identity.

To ensure visually accessibility, I intentionally reduced the saturation of background fruit imagery and softened the color palette. This let the text and interface elements to remain clear and easy to read, even over visually busy backgrounds.

Key Insights

Intentional color and motion enhance user engagement as interactive elements make people an active part of the experience. Too much information at once overwhelms users, so progressive disclosure is key as they prefer visual exploration over traditional dropdowns for decision-making.

If I were to expand this project, I would add flavor recommendation quiz based on taste preferences or mocktail recipe suggestions that highlights the drink's aesthetic.