Coca-Cola Global Intranet

Web User Experience Design

This project was one of my assignments during my internship at The Coca-Cola Company in 2023. My scope was within the HR-focused pages of the Global Intranet.

Timeline

Tools

Adobe Illustrator
Microsoft SharePoint
SumoPaint

Summer 2023
3 months

What is Thrive?

Thrive was created by The Coca-Cola Company (TCCC) as an internal tool for employees across the globe to easily find resources that they need regarding Career Services. The Human Resources team is responsible for ensuring that employees have an uncomplicated experience when searching for important documentation, guides, etc. The Thrive pages refer to the HR-focused pages on the Global Intranet that contain this important information. As of now, there are over 80 pages of information, is it is crucial for them to be well-organized for employees.

Before we sip, let’s see what’s in the bottle.

Problem and Task

The issue at hand was that the pages I was assigned to were difficult to navigate, leading to employees not finding important information or resources. Over time, these pages stopped receiving as much traffic due to their navigation difficulty. Since all employees globally use this website, it is crucial to make sure that everyone is able to access what they need. My task was to design a clean, organized, and user friendly experience for the HR-focused pages of the intranet.

Addressing the Need

The need is for TCCC employees to understand where to go to find what they need. My designs address this need by making the page contents very clear, making page elements stand out more, removing features that do not contain any information, and giving the pages a better overall flow.

Validating Assumptions

To validate any assumptions, before jumping into making any changes I took a data-driven approach by looking at the SharePoint (SP) statistics, observing the traffic on each page, what resources were being downloaded frequently/were not, and noting design trends that I found on pages with high traffic versus pages with low traffic. With these insights, I curated ideas for what I believed would drive more engagement across the pages. Additionally, I maintained consistent communication with stakeholders.

Flow Diagram - Career Center Search

The following is a user flow diagram that I created depicting actions taken by user upon arriving at the Career Center landing page using the noted SharePoint analytics. Using this flow diagram, I was able to construct my webpage mockups. The most common path on lower traffic pages is the path ending in “Employee Does Not See Resource”.

Sketching it out

The image showcases my sketch mock-ups that I planned out in my notebook following the creation of the flow diagram. This low-fidelity prototype was the first iteration regarding my UX redesign for the Career Center Landing Page. This initial mockup was used to help me visualize a digital version of the different elements on the webpage and how they could be improved.

I divided the page up by each section, labeling them “Top”, “Mid” (Middle), and “Bottom”. This method of dividing the page by section helped me understand the webpage in the order that an employee that is visiting it would also experience it. This helped me gauge how exactly I wanted the page to flow.

I followed a similar process for each of the pages that I redesigned, but other page designs (including the data to support those designs) cannot be shared publicly for confidentiality purposes.

Mock-Ups

Top Section Design Thought Process & Rationale

  • Links at the very top on the landing page are awkward, I think having the Thrive section as the entrance feels a lot more natural and inviting. I read this article that talks about the importance of a landing page (https://curiouscore.com/resource/best-ux-landing-pages-and-what-we-can-learn/). Some of the main insights I gleaned from the article along with my collected SP data was the importance of a landing page that is easy to navigate and clear page contents. The current design had several users clicking randomly to find what they needed, with many of them exiting the page before finding what they were looking for. Beginning with the three main pillars/categories of the page creates a more organized look and feel that will aid users as they are navigating the page to find their desired resource.

  • I added a corner border to each of the three boxes to add a bit of color and make the page feel more welcoming.

Original Webpage Design-Top section

My Revised Webpage Design-Top section

Middle Section Design Thought Process & Rationale

  • Had trouble finding some high quality images that I felt worked well in replacement of what was there originally, so I used one picture of myself and a photo of TCCC HQ from online. Not picky at all about the photos but my idea was to keep every element including a photo uniform (if there is a picture of an actual person/picture- aim for all of the elements to include an actual person/picture rather than one having a real photo, and another having a graphic).

Original Webpage Design-Middle section

My Revised Webpage Design-Middle section

Bottom Section Design Thought Process & Rationale

  • When viewed in non-editor mode, the “Create an event” element just appears as a blank event box. As an alternative, it be easiest for the user to have a full calendar view for anyone interested in seeing events during the month.

  • The following article talks about the importance of ease of access within UX, and I think this is heavily applicable in terms of the changes to the calendar that I have suggested: https://www.developer-tech.com/news/2022/sep/26/the-importance-accessibility-first-effective-ux-design/

Original Webpage Design-Bottom section

My Revised Webpage Design-Bottom section

Thanks for sipping on this project!

Want to see more of my work? Click the button below!

My Work