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.
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?
- 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
surveys, social media polling, guerrilla interviewing, contextual observation, competitive and comparative analyses, usability testing, A/B testing, digital prototyping
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
Axure, Sketch, Adobe Illustrator, Keynote
Discovery and research
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.
- 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.