Olipop Flavor Wheel

A visually engaging, informational interactive component that helped 30 attendees discover their ideal Olipop soda flavor during a health and wellness presentation.

Project Overview

Figma and Content Creation

My friend, a nutrition student, needed an informational yet fun, engaging component for a presentation. They wanted a way to showcase 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. 30 attendees were able to learn 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 the prototype was visually accessible to all users, I intentionally reduced the saturation of background fruit imagery and softened the color palette. This allowed the text and interface elements to remain clear and easy to read, even over visually busy backgrounds.

Takeaways

Color and motion enhance user engagement when used intentionally. Interactive elements makes people now an active part of the learning 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 fall in line with trends.