HeaderComponent_v1.jpg
 

Web Header & NotificationsOverview

Overview

The products team OKR (Objectives and Key Results) centered around convergence of the product ecosystem. This goal included moving CareerBuilder close to a consistent and professional Ui that best represents the brand. One big win for the products would be a consistent header component that would allow users to navigate their products with ease.

 

 
Icons_Role.jpg

My Role

Primary Ux, Ui designer, and QA

The Team

Designers, Product Experts, and Front End developers across multiple platforms

The Tools

Usertesting.com, Sketch, Invision, Hipchat, & Jira

 

 
 

Our Challenge

SlideBG_UH_Problem-1.jpg

One of the main challenges was to create a consistent component that was flexible enough to address the varying functionality across the 4 product verticals. These products included our legacy job posting tools, candidate search, data portals, and applicant tracking system.

 

 
 

Header Component Audit and Functionality Solutions

Our proposed solution included a 2 tier header treatment that accommodates product and account related navigation. Main account navigation lives in the top right corner and the product specific navigation lives below the CareerBuilder logo. Also, this treatment is responsive and will work on mobile and tablet devices.

New universal functionality includes the ability to hide the search bar, switch between the product verticals, switch between accounts, and a product notifications panel. Also, we introduced a responsive header for multiple device (mobile & desktop) screens.

 
Universal-Navigation-Desktop-1a.jpg
Universal-Navigation-Desktop-1b.jpg
Universal-Navigation-Desktop-1c.jpg
Universal-Navigation-Desktop-1d.jpg
Universal-Navigation-MobileBrowser-1.jpg
 

 
 

Mobile Web Notifications

Multiple teams have discussed the importance of notifications and through user testing this was a repeated ask from our users. During our initial notifications audit we wanted to explore what kind of notifications our users would find helpful.

 

Notifications

IMG_1335.jpg

During our initial notification we found that our notifications fell into 4 categories: Something that affects you, something that affects an association, something the system thinks you care about, and something that affects the system. With a general idea about notifications we designed a few examples and tested them with users.

 
interview_Final.png

Usability Testing

We did 2 sets of testing that included 5 to 6 participants. All participants were based in North America (US and Canada), recruiting or hr professionals who perform searches for candidates, and all use search tools like linkedin, indeed, monster, etc.

These were unmoderated user sessions on usertesting.com. We uses open-ended questions and task-based questions. Questions mainly focused on the search drawer functionality, notifications, notification functionality, the app-switcher (bento box), and the account dropdown.

 

Validation & Insights

During our initial testing users had difficulty finding the search drawer functionality since it was clearly labled in our menu navigation. All users requested flagging functionality within the notifications panel.

 

“The flagging function is important to me because it reminds me to come back and revisit that notification.”

“This seems to be a universal notifications icon. I think most users would be able to recognize and understand that this is notifications especially with the green dot.”

“I definitely want to click the See All Notifications so I can manage things better.”

 

Users want the ability to delete notifications and the kebab functionality was very popular with users. They would prefer more functionality to less.

Users don’t want to interrupt their workflow by having to visit another page to see all of their recent notifications. We should give them the ability to scroll within the panel and to easily access all of their notifications through the notifications page.

Many users mentioned that notifications should live on a dashboard.

 

 
 

Implementation

Working with multiple development teams allowed us to implement the universal header across multiple platforms. We spent a fair amount of time working with marketing to better understand the subscription tiers, and then adjusted our information architecture to match. We created a master header component within our component library, packaged the styles, and shared with the teams not using the preferred platform.

Another implementation challenge included implementing the same consistent styling across 4 different platforms that included .Net, Node.js, PHP, and Angular. Also, teams spanned across 2 coasts and 2 continents.

 
SlideBG-UH_2.jpg
 

 
 

Future Recommendations

We would have liked to have spent more time working on the information architecture instead of leaning on product and marketing’s suggestions. A simple card sort (moderated or unmoderated) would have revealed insights that would have strengthened the user experience.

Also, the header brought attention to the lack of personalization of our products and the importance of a global account tool. This account tool would allow users to personalize their experience with features that could include notification settings, accessibility controls, email settings, managing accounts, etc.