Share a Coke Freestyle
create & share a unique drink for your loved ones
OVERVIEW
This project was all about bringing the magic of Share a Coke to Coca-Cola Freestyle Machines. Through the website we designed, you can create a unique Coke drink for a loved one and share it with them so they can try it!
Client: The Coca-Cola Company
Timeframe: Fall 2024- Winter 2025
MY ROLE – LEAD UX/UI DESIGNER
I focused on UX, UI, and graphic design for multi-device specs and flows, contributing to both the visual direction and the overall user experience. At the start of the project, I participated in ideation and moodboarding sessions to establish the creative vision. My proposed concept was selected as the final direction, which allowed me to take the lead in the design aspect.
To make the experience more engaging and fun, I pitched the idea of incorporating a Coke Heritage Glass that users could "decorate" with stickers representing personality traits. I designed the stickers from scratch, using skills such as sketching, typography design, and graphic design to bring them to life.
SKILLS & TOOLS
The Starting Point
The client provided us with a basic flow to start us off, with the intention that we improve the user experience overall and provide a creative direction for it.
Here are the steps the core experience consisted of:
Establishing a visual direction
By creating moodboards and quick mockups that illustrated each concept, we started trying to find a visual direction that resonated with the Share a Coke brand and the experience as a whole. Client ended up deciding on the Sticker Concept amongst my proposed directions.
Sticker Concept (Selected)
Paper Concept
Ribbon Concept
Enhancing the quiz taking experience
Answering personality questions about your loved one is a straightforward way to go about collecting the information needed to customize the drink, but how can we make it more fun and engaging? We started brainstorming some ideas on how to make this portion of the experience more interactive. One of my proposals– decorating a Coke Heritage glass with stickers, was selected by the client for us to move forward with.
Cup Sticker Decorating (Selected)
Catching Mini-Game
This or That
Emoji Personality Quiz
Nailing the look and feel
After settling on a visual direction and the main interactive point of the experience, we moved on to defining and fleshing out the look and feel.
This involved doing plenty of exploration to design icons, freestyle machine screens and the visual treatment for the elements within the creative direction we aligned on. As well as creating short flows to test out how the experience will happen.
Designing the stickers
We went with the idea of decorating a Coke glass with stickers but maintaining the input being personality traits to describe your friend with.
To make it feel more playful, we made the call to have the stickers' design match the adjective it represented. This involved a lot of sketching and testing out designs on my part to nail the perfect look for each one.
Refining key moments
Selecting Coke brand
-
Change in copy to be more precise & intuitive
-
Glass color adjustment as per client request
-
Remove Share a Coke sticker to save space
-
Change of bottlecap design for Coke brands as per client request
-
Placed instruction copy inside sticker tray to make it more prominent
-
Made sticker tray opaque and white for better contrast & to resemble a sticker sheet
After doing guerilla testing with a handful of participants and presenting the latest version to the client, we garnered their feedback and started polishing important moments throughout the experience to make it more seamless.
Placing stickers
-
More specific instructional copy
-
Smaller sticker placement area to avoidd going off the glass
-
Placement are outline from white to black for better visibility
-
Added a handle for the tray to indicate it can be pulled up
Share or Pour screen
-
Relying on CTA buttons rather than copy above
-
Changed the shape of Share button to resemble a text message with the custom glass to be more clear
-
Changed icon and copy in Pour button
-
Stickers in the background frame around buttons instead of taking over full screen
Pouring drink
-
Improved page hierarchy by rearranging and redesigning elements on screen
-
Added secondary CTA for sharing drink since that is the main goal of the experience
-
Added nutritional information showing calorie count as per legal requirements
The Experience
How It Works
Making it all about sharing a Coke with loved ones, we made this experience easy and fun steps.
-
Starting off with Scanning – by scanning the QR code on the freestyle machine, you access the website where you can create a unique coke beverage for a loved one.
-
Then when Creating – the first step is to search for your loved one's name or find a nickname that suits them. After selecting, you get a Coke glass with their name on it, which you're able to decorate with stickers representing different personality traits. Pick 3 that best describe your loved one, and get a unique flavor based on it!
-
Lastly, Sharing – after the drink is generated, share the drink with them, and give it a try yourself! Your loved one will be able to go to a Freestyle machine near them and try their unique flavor you created for them.
Learnings & Reflections
Taking ownership of my work and being confident
Being the main designer for this project and having my proposed creative direction and product ideas selected by the client definitely made me feel proud my work and helped me be confident when needing to make creative decisions.
Doing multi-device design
Since this involved not only design for a mobile experience but also for the Freestyle Machines, it was a learning experience to design for a device that comes in various sizes and each have different limitations.
Exercising my graphic design & illustration muscles
I'm grateful I got the chance to design the stickers and to flex my graphic design and illustration muscles. I had a great time sketching and playing with typography & color to create the stickers.