Screen Shot 2021-07-10 at 9.47.30 PM.png

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
Screen Shot 2021-07-23 at 9.34.26 AM.png

The existing landing page

Market
research 

Screen Shot 2021-07-17 at 2.18.16 PM.png

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