Redesigning navigation with a user-centric approach
In the first semester of 2022, the Product team started to experience difficulties integrating new features in our Welcome to the Jungle Solutions B2B product. Indeed, our product architecture no longer met our needs. Several issues were observed: The product architecture was no longer aligned with the brand architecture and the business offering, and new features, like job boost (for increasing the visibility of some jobs), company featured posts (for publishing company-related content), and the profile editor (for updating a company’s profile), did not fit rationally into the navigation menu, affecting their discoverability by users.
So we set up a dedicated team to design a new navigation menu component, using tools like Maze to consult panels of users along the way. Between the first workshops and the component going into production for all users, it took us a whole year. Rather than working on the design immediately, we spent time during this unique exercise validating the navigation architecture first, which was quite a new approach for us.
In this article, we will detail every step we took in designing this new navigation menu component, describing each phase’s validation with users, and share our main takeaways about the whole experience.
Our starting point
If you aren’t familiar with what Welcome to the Jungle (WTTJ) does, we actually make work exciting. We achieve this by building innovative employer branding solutions that make companies attractive to workers and by creating inspiring experiences and content that empower workers and companies to build new rules for more sustainable working practice. Using our WTTJ Solutions product, companies can publish job postings, follow up applications (if they use our internal applicant tracking system, or ATS), and promote their brands.
The old information architecture isolated features in independent environments, presenting them either via top navigation or sidebar navigation. “Switch app”-type dropdown navigation made it possible to navigate from one environment to another, but its main weak point was that it hid these first-level navigation items of the solution by making them only visible when you clicked on the dropdown menu. In addition, the navigation context differed depending on the macro-feature you were viewing.
Applicant tracking system (ATS) — #Top navigation
- Jobs
- Candidates
- Statistics
- Settings
- Career website
Employer brand — #Sidebar navigation
- Analytics
- Featured articles
- Job boost
Homepage and management of organizational settings — #Top navigation
Personal settings — #Top navigation
Step n°1: Organizing open card sorting within the company
Our first step was to set up an open card sorting exercise with the Product team, but we didn’t stop there. We also included Product Marketing and representatives from diverse teams (account managers, sales, tech, customer care, and human resources) to minimize bias as much as possible. We formed small teams to categorize the existing and potential future key features of WTTJ Solutions into groups. The categories were defined by the participants themselves since it was an open card sorting session. A similarity matrix was then used to analyze the results and define which categories should be kept on the menu. Alongside this, competitors’ navigation menus were benchmarked. With the organization of a 6to1 workshop, we also began discussing what the design should look like.
At this stage, the following first-level categories were considered for the new navigation menu:
- My account
- Admin
- Employer brand
- ATS (our internal one)
- Jobs
- Integrations (with external applications)
Step n°2: Conducting open and closed card sorting sessions with users
Using the categories defined in the internal card sorting exercise, a panel of 16 users conducted a closed card sorting exercise using Maze. Features had to be sorted into categories.
The categories we defined internally were also challenged in another open card sorting session with a different panel of 11 users, where they were asked to group features into categories and to name those categories. To make sure each type of user was represented, these participants were selected based on a personas study conducted a few months earlier. Segments were chosen based on business usage (CEO, recruiter, employer branding role, etc.) and various company sizes. By doing this, we made sure that WTTJ ATS users were represented as well as those using an external ATS.
Following both card sorting events, similarity matrices were generated.
This two sessions of card sorting with users resulted in three interesting results:
- Having “ATS” and “Jobs” categories was confusing for users: They didn’t know where to position features during the closed card sorting sessions.
- Users intuitively grouped the features related to job management, applications, job boosts, the candidate pool, and associated parameters in a category called “Recruitment.”
- The analytics were instinctively sorted by users into one global section rather than distributed among different categories.
The first result illustrates how internal company organization can impact on product architectures and cause confusion for users. WTTJ has two dedicated teams — one for ATS and one for jobs — and it had clearly been a mistake to maintain this distinction when working on the navigation menu.
At this point, the following first-level and second-level categories were chosen for the new navigation menu:
Home
Employer brand:
- Showcase editor
- Featured
- Career website
Recruiting:
- Application tracking
- Jobs
Analytics
Integrations
Help
My account/Organization:
- Account settings
- Organizations (switch)
- Organization settings
- Members
- Recruiting settings [shortlink to recruiting section]
Step n°3: Running tree tests on the new architecture
To determine the new architectural information model, we designed a new tree structure. A technical constraint quickly arose: Since the WTTJ ATS architecture and interface could not be changed, its structure needed to be incorporated into our new architecture as it was. In the “Recruiting” category, we ended up with the two second-level categories we had wanted to avoid (because they’re confusing for users): “Jobs” and “ATS.” While this wasn’t the ideal solution, it was a compromise considering the legacy we had to live with.
Afterward, tree tests were conducted with three panels of users: 289 individuals using the WTTJ ATS, 5 individuals using an external ATS, and 6 employer brand managers. Using Maze, we were able to create a simulated navigation from our MVP to test different scenarios. Various actions were presented to users, including publishing a new job posting, boosting a job posting, and reviewing the analytics. To perform these actions, testers had to guess the path in the navigation menu.
Using tree tests, we were able to assess the understanding of the architecture in terms of path and wording. Overall, our architecture scored 6.7 out of 10 in terms of comprehensiveness, which was a pretty good result. We were able to validate our choices, even if some details needed to be adjusted.
Step n°4: User testing on prototypes
We tested our prototypes with users by providing them with main task scenarios on Maze to carry out, such as “consult the latest application for the data analyst position” or “edit the profile editor.” We evaluated the path’s effectiveness based on the success/fail criteria defined previously. This mainly allowed us to remove risk from the handling of this new navigation from a user experience point of view and the implementation of a new job page in parallel with the ATS section.
A score of 72 out of 100 was achieved for the global system usability (SUS score). Overall, it’s a good score for usability performance in terms of effectiveness, efficiency, and ease of use.
The UMUX-LITE (usability metric for user experience) rates were as following:
Rating 5.3/7 (The functionalities of this navigation system meet my requirements)
Rating 5.3/7 (This navigation system is easy to use)
The development began, with some back and forth on QA while simultaneously defining the animations, to transition between the reduced navigation menu and expanded one, and vice versa.
Step n°5: Deploying progressively
To test the new navigation menu component in real life, we chose to deploy it to 5% of our users, which represented approximately 400 individuals. A Typeform survey was proposed so that users could provide feedback. To be completely honest, we didn’t receive a lot of feedback at this stage, but we didn’t receive any big warnings or complaints either.
The component has now been in production since the end of September 2023.
Here is the latest version of our new navigation menu component:
Taking a step back
So what were the main takeaways from our journey?
Our good moves to replicate
Validating the architecture with card sorting and tree tests before designing the experience was definitely a good decision. Information architecture can be overlooked because it does not produce immediately visible results. Our time spent validating it allowed us to proceed with the confidence that we were heading in the right direction and gave us legitimacy when discussing the topic with management.
The process of checking every step with our users is also something we intend to follow in the future. The experience helped us to transcend our biases in a very positive way. Obviously this requires having user panels readily available, which is not always easy to achieve. To be fully transparent, it was hard to convince people to participate without gift certificates.
Communication with other squads was also crucial to the creation of this new component. Providing assistance with the design interface and documentation was required to help other teams integrate the component.
Things to do differently next time
It’s true that the change management for users could have been handled better. The new navigation information was included in a global email (along with other news) that was sent out on the same day the new navigation was put into production. Several users complained that this didn’t provide enough time.
Looking back, the beta (progressive rollout) didn’t have enough users. We know now that we weren’t able to catch enough bugs by involving only 5% of our users. Next time we will definitely engage more people.
During the process, we also lost track of who was using WTTJ Solutions. Recruiters (which make up most of our users) complained that we overemphasized employer branding in the new navigation menu component.
Finally, there was also some frustration about the lack of improvements to the ATS (which we couldn’t make better). This resulted in duplicate views for users of our ATS, which we were not happy about.
Stepping up
Having worked on the navigation menu component, we now intend to redesign the homepage, which is the first-level page users see. Our goal is to make our users’ experience better on this page by providing them with more value. And we definitely want to replicate the user-centric approach in this new task!
Co-written by Pauline Arnaud, Senior product designer @ WTTJ, Emmanuel Rafitosoa, Senior product manager @ WTTJ & Anne-Laure Civeyrac, Tech editor
Illustration by WTTJ
