BEFORE
AFTER
COCA-COLA INT'L ONLINE STORE
PART 02 - LANDING PAGE - UI RETHINK
Client
COCA-COLA INT'L ONLINE STORE WEBSITE
Project
Online Shopping Experiences - Landing Page - UI Redesign
My Role
UX - UI - Senior Experience Design Manager
Duration
8 Days
Methods - Tools
Visual Design - Branding - Interactive Design - Service Design - Design Thinking - Behavior Design - Participatory Design - UX/UI Research - Prototyping - Figma - Photoshop
Deliverables
High-Fidelity Desktop Landing Page Design - Redlines/Spec Documents Design - Presentation
Overview
The task was to quickly Rethink and Redesign the landing page for The Coca-Cola International Store website. After I did the usability testing on the current running website, please visit The Case study if you want to know in detail.
The results of usability testing showed that the consumer's shopping experience wasn't what the team thought. Design Success Ladder indicated that the site at Usable state ( level 2 out of 5) means the website performs at the average level experiences.
For the e-commerce platform to gain more traffic and elevate the shopping experiences, the website needs to perform in a Delightful state and Meaningful level. Therefore, my task is to Rethink, propose the solutions, and prototype the site's landing page in a rapid timeframe.
The problem
The Coca-Cola International Online store got a low score on consumer shopping experiences. The website needs a new look and feel of the UI to connect the Brand with the consumer. In addition, It requires an intelligent and intuitive user experience that will elevate the shopping journey when people visit and shop the website.
The Coca-Cola International Online store got a low score on consumer shopping experiences. The website needs a new look and feel of the UI to connect the Brand with the consumer. In addition, It requires an intelligent and intuitive user experience that will elevate the shopping journey when people visit and shop the website.
My process
Market Research
Brand Study
Creative Strategy
Design
Prototype
Validate
Presentation
User Testing
The existing landing page
Market
research
Brand DNA
Brand study
COCA-COLA IS FAMILIAR & UNIVERSAL, SIMPLE & REAL,
A SHARED GLOBAL CONNECTION.
POP of RED
Red is synonymous with the Coca-Cola brand and plays an essential role in our visual communication. Throughout our history, red has been a clear and recognizable link to the Coca-Cola brand.
​
Keep it simple; remove all extraneous noise ad focus on what is emotionally relevant.
There is a thread of red in everything we do. Big or small. Always.
Creative
Strategy
We learned from the Usability testing that consumers are craving for stories and the messages they can connect. With the social climate we live in, the optimistic Brand promises should be at the forefront and visible. In addition, the exciting visuals can inspire them and encourage them to purchase products.
​
Highlight - the seasonal products
Push forward - Coca-Cola positive messages to people, communities, environment
Educate - Sustainability products process
Curiosity - Special launches, Collaborations
Elevating - Easy to shop, seamless services, Consumer-friendly information, and intuitive user flow
Rememberable - Exciting visual, delight moments, and uplifting brand voice
Visual design
Rethink - Redesign elements
Before - After design
User testing
Testing - Testing - Testing
If you have a chance to read the Usability testing of the current running website,
We know anything we design needs to ask the user to see how they feel, what they see, and how they react to the design intents.
View Design prototype here
Lessons
learned
The landing page is the 1st impression of the Brand to consumers, the invitation to people to explore more, to exciting about the experiences and journey they want to discover.
​
Stories are the keys element to connect to consumers. Delight moments and meaningful messages are real impacts on journey and shopping experiences.
​
We are creating the experiences and journey for our consumers, not for our team. So listen to that BIAS voice and ask ourselves did we design the experience for our consumers? Do we share out knowledge with them and invite them to our Brand?
Next steps
I will continue working on the UI website, rethink the shopping experiences and product presentations.
Rework on the information architecture of online services functions.
Reshape the messages on happiness, optimism, and inclusion
Planning, the timing of relaunch the landing page