🥤 Designing and building a tool that enables users to create AI-generated artwork for the Coca-Cola brand in partnership with OpenAI

Timeline —

2 months

Role —

Product Designer @ Bain

For —

Coca-Cola in partnership with OpenAI

In action ✨

createrealmagic.com

OVERVIEW

Create Real Magic is a consumer facing use case that jump started Coca-Cola’s AI journey and created excitement for the power of technology. Create Real Magic started in 2023, and has continued to expand two years later with holiday themes

MY ROLE

Working in close collaboration with the design lead, product, and engineering teams, I led the end-to-end design process for the MVP, including prototyping, validation, and seamless handoff to development for launch

🚀 Results & Impact

Designed a first-of-its kind consumer facing tool combining Dall-E and GPT into one platform that can manipulate Coke’s creative assets, inviting winners to Real Magic Academy to engage designers to shape the future of marketing

Thousands of people used the AI tools to create Coca-Cola-themed artwork, with many sharing their designs on social media—amplifying brand visibility and engagement.

Coca-Cola’s revenue grew 5% in Q1 2023 following the campaign, linking creative engagement with measurable business impact

01. Planning & Designing

One of the first things the design team is begin to plan and think through what the experience would look like on a a summary view of all the details through the use of a site map. This sitemaps depicts the layout of wireframes, one square corresponds with one wireframe and we have captured happy flow states, error flow states and loading states

This allowed us to map out the experience and work with developers and the rest of the time to get alignment on what was in scope for this phase of work, and ensuring we didn’t miss any key wireframes

Creating a design system quickly

Put together a design system quickly to ensure consistency throughout the experience

02. Design challenges & solutions

🚨 DESIGN CHALLENGE

Intuitive main canvas page that is feasible in a short amount of time

The canvas page is the main screen that users will be interacting with in this experience, so it was very important that we took the time to ensure that we designed an optimal UX.

💡 SOLUTION

We tested two different design flows. The first being a non-linear flow the goal for this one is to use progressive disclosure elements to reduce visual noise. We started with a toggle functionality that brings up the caption and allows user to easily input caption. A lot of different calls to action, and a lot of buttons that are all visible.

Then that’s how we got to the second version, which is the linear flow. This flow allowed for a simplified interface between the tasks. However, with this iteration we got the feedback that the visuals were not above the fold and you had to click next to get to the text which didn’t allow you to dynamically switch.

03. Understanding user behavior through data analytics

Delving deep into the analytics and site behavoir allowed us to have a deeper understanding of how users were interacting with the tool, allowing us to make changes to improve the experience

Launching global MVP

Our MVP launched worldwide, even being broadcasted in Times Square 🗽

AI art made by Artists around the world using the Create Real Magic tool

Learnings

🗒️ Create systems to keep you organized

Moving at lightening fast speed is only possible if you have the right systems that set up for success. From the beginning we ensured that we were working as a collaborative team, with weekly ideation and collaboration sessions.

🔦 Data as a guiding light

Using data to dig deep into user behavoirs and patterns is a great way to get quick feedback on how users are engaging.