WhitePages
UX Design Lead
@Celestica
Overview
WhitePages is a repository of current employees at Celestica. My role was to lead a team of developers to redesign the outdated interface, adding features to improve user experience and to give it a more modern feel.
This was a simple project in terms of UX design, as the user flows have already been defined from the previous interface. The main goal of the design is to present the information more efficiently and to access information more quickly.
Access the prototype here!
Team
Timeline
Tools
1 UX Design Lead
2 Developers
2 IT Business Leads
Jan 2021 - Apr 2021
FIGMA
Miro
Before & After
Research
Before problem identification, I conducted interviews with 5 Celestica employees with various roles in the company (a senior manager, an executive, a senior developer, a junior developer and a director).
Below is a screenshot of the interview results grouped in different categories.
Interview Responses in Categories
From the interview results, the users indicated that they use WhitePages as supplementary tool to Google Suites (Hangouts and Gmail) to search for contact information about employees and their direct reports/manages information.
Most users spend no more than 5 minutes on the web application; however, WhitePages is a tool that's used almost every day.
The Problem
From the interviews and a user experience analysis of the current interface, I narrowed it down to three problems that had a feasible solution for a re-design.
Outdated feel
All respondents during user interviews indicated how outdated the current interface looked.
Difficult to search employees
There was a lack of available widgets to help narrow down their search when looking for an employee. Any misspellings when searching for a particular employee won't appear upon clicking the search button. There is also a lack of filters available.
Too many clicks to achieve goal
Profiles, Organization Chart and About Me are the most frequently visited pages on the WhitePages web app. Extra clicks have to be done in order to switch between the three pages.
Wireframes
I created the following wireframes/flows with the goal of optimizing the number of clicks to accomplish a task. Using these scenarios, I conducted user-testing sessions with 5 participants to test its efficiency and effectiveness.
USE CASE 1: Check My Profile
Description: User decides to check their profile
Trigger: User logs in to check their WhitePages profile
The "Check My Profile" task takes 2 clicks from the Home Page.
1. Click on the drop-down button
2. Select My Profile from the drop-down menu
3. Arrive at My Profile
Results
Modernized Interface
The following are high-fidelity prototypes I submitted to the team for development. The final prototype addresses the 3 main problems identified from my research.
A modernized interface that's more readable and easier on the eyes while maintaining a monotone professional colour scheme aligned with Celestica's theme colours.
Added Filter Option
Added filter option with option to select Type of Employement, Region, Country, Site and/or Department
Less clicks to access relevant information
Organization Chart and Personal Information can be seen on one page, there's a tab to choose between "Personal Information," "Manages," and "Peers."
Added "Compose Email" Button
After clicking "Compose Email," everyone on the search results will be added to a Google email draft.
(More useful after clicking "Manages." Must manually delete contacts on Gmail that shouldn't be on the email.