Project Background

The goal of Project PING was to create a centralized location for all employees to access information they needed to do their jobs more efficiently. On an existing employee portal we were able to determine through analytics that 3 sections of the site were used most frequently, and confirmed in user interviews that these were the 3 most important features & content to current users:

Search
Daily Challenges
Articles

The main pain points discovered in user interviews were:

Search was missed or not clear enough, often produced no results
They sometimes missed required or critical content
Lacking personalization in notifications

‍

User interviews & Affinity Mapping

‍User interviews were done with 12 employees with varying roles and locations in the UK and USA. Affinity Mapping was done remotely in Miro helped synthesize insights from user interviews.

Sketches & Team Reviews

Taking these insights into account I came up with an initial round of sketches to review with the team. The designs were based on a feed system with an improved search, filters, and added notifications.

‍

Medium Fidelity Wireframes

Next step was to move into medium fidelity wireframes done in Sketch. Then another team review where we started to discuss some visual/ UI elements. Primarily how users would differentiate levels of importance in content and make sure they don't miss the most important information.

These medium fidelity wireframes went into usability testing with 5 employees who currently use at least 1 other employee portal or similar product.

What they liked:

They all loved the shift to a feed based design, they thought it would be easier to see the most recent and relevant information first.
Categorization of content with tags.
Prominence of the search bar, with auto-complete and suggested search results.
Clear visual indication of the most important content.
Notifications in the top navigation that tell you when there are new important messages.

‍

Painpoints:

A few users found the 2 searches confusing. They were not clear on the difference between a site-wide search and a feed search.
About half were not clear on how to use the filters, or not sure when they would use them.
Most were not clear on how to tell if notifications were new or old, or how to dismiss them.

‍

High Fidelity Wireframes

Feedback from usability testing along with team review feedback was taken Into consideration and integrated into high fidelity wireframes. UI decisions were based on the Expedia brand guidelines and adapted for the purpose of this project to fit with visual patterns in other internal tools.