Corporate Website
Coca Cola Company — Dec '23
My Role
UX — User interviews, SEO Analysis, Competitor Analysis
UI Design — Heuristic Evaluation, Information Architecture, Visual Design, Rapid Prototyping
Team
Lisa Le
Yasmin Bakhtiari
Tools
Figma, Miro, GitHub, and Visual Studio Code
Timeline
3 weeks
Overview
My team and I had the opportunity to redesign and code the Coca-Cola Company's corporate website as part of our capstone project for University of Toronto SCS UX and UI Design program.
This project aimed to enhance the digital presence of one of the world's most iconic brands, ensuring that the website effectively communicated Coca-Cola's values, products, and global reach.
The primary goals of this redesign were to improve user experience, align the design with modern web standards, and maintain a cohesive brand identity throughout the digital platform.
THE HIGHLIGHTS
CONTEXT
CONTEXT
Coca-Cola, a globally beloved brand, had lost its fizz.
Coca-ColaCompany.com was originally intended to communicate Coca-Cola's business objectives, values, and goals when users landed on the site.
However, with the increasing bounce rate and dwindling user engagement, it was evident that the website wasn't achieving its objectives effectively.
Moreover, the website felt like an out-of-place PR campaign that contradicted Coca-Cola's authentic brand identity. It suffered from uninspiring visuals and inaccurate information, causing visitors to feel disconnected from the true Coca-Cola essence.
THE CHALLENGE
Capture the essence of an iconic brand by refreshing the Coca-Cola Corporate Company website to an engaging and seamless user experience.
USER RESEARCH
Finding key pain points.
We engaged with six participants to test the Coca-Cola website's user experience and navigation.
The objective was to conduct a comparative analysis between two websites, Coca-Cola (coca-cola.com) and one of their competitors, Redbull redbull.com).
We wanted to determine how effectively users could locate pertinent information about the company, its brand portfolio, and potential job opportunities within the Coca-Cola Company.
After analyzing the data from our tests, we established three key priorities in our redesign:
-
Elevate Coca-Cola’s initiatives by prominently featuring its portfolio of brands and business practices.
-
Improve user experience by creating a cohesive layout that is readable with high-quality visuals.
-
Intuitive and user-friendly navigation by presenting visible breadcrumbs.
COMPETITOR ANALYSIS
Where fizz meets the facts.
In comparison to Redbull and PepsiCo, Coca-Cola faces challenges in effectively communicating its company culture, ethics, and social responsibility. Users’ experiences with Coca-Cola’s website revealed the following:
UX Experience Score:
-
Hard to read and follow.
-
Ineffective and irrelevant messaging.
-
Unplanned and unorganized content throughout the homepage.
Creativity Score:
-
Inconsistent design throughout the pages.
-
Perceived as Untrustworthy and not credible.
SEO COMPETITOR ANALYSIS
Reaching for a refreshing Coca Cola but finding an empty fridge.
After conducting an in-depth SEO competitive analysis, we made a significant discovery. Coca-Cola, with its impressive organic traffic and soaring page visits compared to its competitors, was not in the lead. The average visit durations were consistently shorter, often less than half of the duration.
This indicated that as users navigated the website, they encountered difficulties in locating the information they sought, leading to frustration and ultimately resulting in premature exits from the site.
We also conducted a SEO competitive analysis on semrush.com and gathered insights on website traffic for all three companies.
HEURISTIC EVALUATION
A deeper dive into the website revealed several critical
issues.
1. Design Harmony: The website lacked a consistent design harmony.
2. Whitespace optimization: The misuse of whitespace made the content cluttered.
3. Text legibility: Short texts that were challenging to read due to busy background.
4. Accelerated loading times: Slow loading pages, often due to pages and links that are either snippets of previous pages or broken links.
TOP ORGANIC KEYWORDS
After familiarizing ourselves with the company and identifying their issues, we needed to determine the specific target audience for the website. Further research revealed that the stakeholders included consumers, investors, shareholders, as well as current and prospective employees.
COCA-COLA
COMPANY
COCA-COLA
PRODUCTS
COCA-COLA
CAREERS
COCA-COLA
JOBS
USER PERSONA
The ideal user.
The website serves as the initial point of contact for prospective employees like Gabriella, offering insights into Coca-Cola's identity, values, and company culture. It's crucial for her to assess whether the company aligns with her own values and aspirations. Similarly, this applies to investors and consumers.
BRANDING & VISUALS
MOODBOARD
Refreshing Coca-Cola.
We began by creating a mood board that encapsulated our collective impressions of Coca-Cola. This included positive associations with their diverse products, their iconic colors, and the messages conveyed through their advertising campaigns.
Next, we honed in on the specific message we aimed to convey, as reflected in the selection of icons and infographics. Despite their strong brand recognition, we aimed to maintain their distinctive colors and brand identity throughout our design iterations.
INFORMATION ARCHITECTURE
Reimagining website navigation.
We recognized the need to streamline Coca-Cola’s complex information architecture. There were a staggering 200 links, many of which were redundant or broken. We were on a mission to declutter, simplify, and make information readily scannable. To achieve this, we engaged users in card sorting excercises, yielding valuable insights that formed the creation of an intuitive primary and secondary navigation system.
MID-FIDELITY WIREFRAMES
Enhancing key website sections.
We crafted mid-fidelity wireframes, addressing user-centric needs and pain points. Based on our SEO analysis, we prioritized the most frequented pages: Homepage, About Us, Careers, and Brands.
MID-FIDELITY USER TESTING
Headed in the right direction.
We executed a round of user testings with three users to reveal any technical issues with content layout, information visibility, and navigation.
After analyzing the data from our testings, we identified two overarching challenges: cultivating trust and refining content layout.
This can be accomplished by:
-
Enhancing infographics for sharper user engagement.
-
Clarifying the footer to improve distinction.
-
Embracing whitespace to enhance scalability and readability.
-
Consistent information delievery.
STYLE GUIDE
On brand, a refreshing and modern twist.
We retained the iconic Coca-Cola font, ‘TCCC - Unity,’ and subtly toned down the brightness of the classic red to create a more soothing and comfortable visual experience during screen navigation.
HIGH FIDELITY PROTOTYPE
A first effort at a revamp.
Our style guide was a tribute to Coca-Cola's brand, a modern twist that stayed true to its legacy. We wanted users to feel at home while navigating the website, finding it refreshing and inviting.
From the testing of the original website, we found most users felt Coca-Cola was endeavoring a publicity stunt centered around racial equity, environmental impact, and human rights. This led to a decline in trust.
In our effort to revamp, we remained focus on our goal to highlight and bring credibility to Coca-Cola’s initiatives.
HI-FI USER TESTING
Last round of testing.
We executed a round of user testing with three participants to pinpoint issues related to content layout, information visibility, and navigation.
We wanted to understand how testers perceived Coca-Cola’s corporate social responsibility initiatives. We aimed to uncover any unintentional perceptions of these efforts as PR stunts without directly asking.
Following a thorough analysis of the testing data, we identified three key challenges:
-
Cultivate a deeper level of trust.
-
Enhance visual appeal and engagement of information.
-
Make the secondary navigation more prominent.
FINAL DESIGN
An engaging and seamless user experience.
Our journey culminated in the final design, with pages meticulously modified to target specific audiences. The Home page was redesigned for career-seekers, the Brands page made more navigable, and the Careers page exuded enthusiasm, positivity, inclusivity, and openness.
Homepage modifications:
1. Restructured content layout to target career-searching audience.
2. Streamlined and reduced text content, recognizing that users often overlook lengthy text.
3. Enlarged infographics to capture and retain user attention.
'Careers' is the second most visited page, with the homepage being the first, the Careers page was redesigned to evoke specific emotions during navigation—enthusiasm, positivity, inclusivity, and openness.
'Brand' page modifications:
1. Introduced subheading and secondary navigation.
2. Refreshed hero image for added visual appeal.
3. Incorporated an option to explore additional brands, currently showcasing 12/200.
'Our Company' page.
REFLECTION
A successful capstone project.
As a team we redesigned and coding Coca-Cola’s corporate company website as new UX and UI Designers by implementing what we learned in our previous projects. We maintained an unwavering focus user centric design. Ensuring our work optimally served our target audience.
Project Takeaways:
