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 into a dynamic user experience for mobile web.
 

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

Team
Danna Puerto, Heather Ryan, Angel Vuong
 

 

Challenge

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.

Goals

  • 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
 

REsearch and discovery

We evaluated the current state of the site on desktop and mobile only to discover static content, inconsistent text formatting, and an unfriendly mobile interface.

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.

Competitive analysis

Competitive analysis

Comparative analysis

Comparative analysis

 

SynThesis

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 showcase the user's selection. 

Site map

Site map

User flow

User flow

IDEATION

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

Prototyping

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 filtering
  • 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.