Web Header & NotificationsOverview
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.
Primary Ux, Ui designer, and QA
Designers, Product Experts, and Front End developers across multiple platforms
Usertesting.com, Sketch, Invision, Hipchat, & Jira
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.
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.
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.
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.
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.
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.