Product Designer



UX/UI Design



Coca-Cola Product Facts Mobile Site


Project Overview

Coca-Cola has an existing website to help consumers find nutritional information and discover ingredients in their favorite Coca-Cola beverages. Working directly with internal stakeholders, my team was tasked with redesigning the Coca-Cola Product Facts site — transforming the site from static information pages to a dynamic user experience for mobile web.

User research, stakeholder interviews, information architecture, producing shared design assets, wireframing, UI design, prototyping, user testing, final presentation and deliverables

Danna Puerto, Heather Ryan, Angel Vuong


  • Keep consumers purchasing Coca-Cola products

  • Present alternatives to detractors

  • Design that will optimize SEO

  • Adhere to existing brand guidelines

  • 2.5 week development period


We observed that Coca-Cola's existing product nutrition page wasn't effectively communicating nutritional and ingredient information to consumers. In its current state, the website is fully operational but not mobile-friendly. Our goal was to improve the site to help Coca-Cola successfully communicate nutritional information and provide alternatives to fit customers' lifestyle needs.

Research and Discovery

We began our research with a stakeholder interview to understand the business goals. Next, we performed a heuristic evaluation of the current state of the site on desktop and mobile to understand what was and what was not meeting user needs. We discovered that static content, inconsistent text and image formatting, and an unfriendly mobile interface discouraged users from exploring the range of Coca-Cola products.

Through combined surveying, polling and guerrilla interviewing of over 200 individuals, we discovered the following user pain points: complicated information architecture and site navigation, a convoluted ingredient glossary that does not invite discoverability or exploration, and the lack of a customized user experience. Coca-Cola customers needed access to ingredients and suggestions for new beverages. 

In doing competitive and comparative analyses, we discovered solutions that thoughtfully approached the difficulty of discoverability. Comprehensive ingredient indexes, product searches, in-text references, filtering, and customizable experiences were among those that we wanted to implement in our redesign.


Understanding Users

Synthesizing our findings and years of internal consumer research, we created three personas and focused on the Shopper Mom persona as the primary user. We restructured the site map to simplify the product selection process and to showcase the user's selection. 


Design Question


“How might we improve the site so that Coca-Cola is more effective and successful in communicating nutritional information and providing alternatives to fit users' lifestyle needs?”


Ideation and Iteration

Our 2.5 week development period and time constraint compelled us to generate many sketches and ideas at a blistering pace. 
My team designed variations of interfaces with mobile accessibility in mind. Since we could only move forward with one design, we A/B tested our wireframes to select the most user-friendly design that lent itself to discoverable products.

Ultimately, we chose a design that moved the navigation away from a hamburger menu, leveraged the Coca-Cola journey, and utilized a circular motif that matches Coca-Cola's whimsical, bubble imagery used in marketing. The final design emphasized the most customizable user journey. Adhering to Coca-Cola's style guide, I was responsible for creating the user interfaces in Sketch and creating a clickable prototype in InVision. 

 Drawing inspiration from the Coca-Cola Freestyle machine: "A World of Choices"

Drawing inspiration from the Coca-Cola Freestyle machine: "A World of Choices"

 Screen walk through

Screen walk through


Design, Test, and more Iteration!

The rough sketches were then rendered in higher fidelity in Sketch and transferred to InVision for prototyping and tester feedback.

 Existing mobile site and evolution of menu design

Existing mobile site and evolution of menu design


Final Design

Our improvements to the mobile site allow for easier navigation and product discoverability while leveraging the Coca-Cola Journey.

  • Mobile-friendly web design

  • Personalized filtering

  • Clickable Journey content

  • All products listed on home page

  • Ingredient pop-up (less clicking)

  • Suggestions based on selection

  • Most viewed nutrition facts highlighted

  • Nutrition facts label populates based on size

Next Steps

  • Product comparison feature for two or more product ingredients

  • Smartlabel/ QR code for additional nutritional information

  • In-text references in the ingredients list

  • Social media sharing

  • Redesign A-Z Glossary

Please contact me for the complete case study.