Coca-Cola Global Intranet | UX Redesign

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.

Background

This project was completed as one of my projects at The Coca-Cola Company as the Talent Innovation Intern.

My role: UX Designer

Customer/User: Webpage Stakeholders and employees

Time frame: 3 months

Tools: Microsoft SharePoint, Adobe Photoshop, Sumo Paint, LunaPic

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. The mock-ups presented are for the redesign of the Career Center landing page.

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.

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”.

Flow Diagram - Career Center Search

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 this were the importance of ensuring that the landing page is not confusing, and that the contents of the page are clear. With the current design, it felt a little unclear what exactly the page included. I think beginning with the three main pillars/categories of the page makes it a lot easier to navigate.

  • This is more personal preference, but I added a corner border to each of the three boxes just to add a bit of color. I feel like it adds a nice touch and makes the page feel a lot 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, I think it would be nice to have a full calendar for anyone interested in seeing what is going on during the month. This creates an ease of access for anyone on the page. The idea of highlighting events that are coming up soon is something I liked, so in the new version I kept it.

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!