UX DESIGN & VISUAL DESIGN
Coca-Cola Product Facts Mobile Site
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.
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.
“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.
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.
Our improvements to the mobile site allow for easier navigation and product discoverability while leveraging the Coca-Cola Journey.
Mobile-friendly web design
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
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.