UX DESIGN & VISUAL DESIGN

COCA-COLA PRODUCT FACTS MOBILE SITE

Coca-Cola has an existing Product Facts website to help consumers find nutrition information and discover ingredients about their favorite Coca Cola beverages. We were tasked with redesigning Coca-Cola Product Facts from a static information site to a dynamic user experience.

Through research and iterative testing, 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. Our improvements to the site allows for easier mobile navigation, product discoverability, and leverages the Coca-Cola Journey.

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. How might we improve the site so Coca-Cola is more successful in communicating this information and providing alternatives that fit users' lifestyle needs?

Goals

  • Keep consumers purchasing Coca-Cola products
  • If a visitor is concerned with a particular ingredient in a beverage and considering leaving the brand, we can direct them to a different product.
  • Design that will optimize SEO
  • Adhere to existing brand guidelines
  • 2.5 week development period

Methodologies

surveys, social media polling, guerrilla interviewing, contextual observation, competitive and comparative analyses, usability testing, A/B testing, digital prototyping

My Role

Team collaboration within an Agile Development Process, project management, user research, user flows, information architecture, produced shared digital design assets, usability testing, low fidelity comps, high fidelity visual design, interface design, wire framing, digital prototyping, presentation deck, Keynote presentation

Tools

Axure, Sketch, Adobe Illustrator, Keynote

Discovery and research

personas

User flow based off of primary persona (Shopper Mom)

User flow based off of primary persona (Shopper Mom)

SKETCHES and wireframes

We evaluated the current state of the existing website and found static content, inconsistent text formatting, and an unfriendly mobile interface. My team designed three different interfaces with mobile accessibility in mind and A/B tested the sketches to select the most user-friendly design. Variations included a mobile interface with a hamburger menu and a web interface with dynamic interactions; my design was chosen by testers for best usability. My sketches moved the navigation away from a hamburger menu, leveraged the Coca-Cola Journey, utilized a circular motif to match Coca-Cola's whimsical, bubble images used in marketing, and emphasized a customizable user journey. The rough sketches were then rendered in higher fidelity in Sketch for prototyping. 

prototyping

Prototype.012.jpeg
Existing mobile site and evolution of menu design

Existing mobile site and evolution of menu design

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.