The goal of this initiative was to design a simple, intuitive, FTE-friendly navigation for our new team-centric approach.
TL’DR
- Before redesigning the product navigation, I built a solid data-driven information architecture with intuitive copy. I then tested different layouts according to success criteria.
- The insights proved invaluable in building a navigation that has lasted the test of time, but also in surfacing many unexpected UX issues.
Results
- The main reason given by Officevibe detractors was the "complex navigation". The redesign completely eliminated the issue and increased NPS by 29%.
- The new information architecture improved the discoverability of product features during the onboarding stage of the customer journey.
Context
As the Officevibe product evolved, the Product team continually added new features to the main navigation. However, Customer Support began to receive numerous comments about the difficulty users faced when trying to access core functionalities. Consequently, a tension arose between showcasing the new features and maintaining the ease of use of existing ones.
Furthermore, the product had shifted from being solely HR-focused to being team-centric. Although the current navigation layout was suitable for some users, it provided a subpar experience for managers, our new target audience. The product strategy was clear: we needed to restructure the product to become "The Home of the Team".
The sidebar allowed for selecting the organisation / a team or subteam / a team member, while the features appeared as tabs. We were going to run out of space for new features quickly!
I compiled a list of success criteria
- First-time experience (FTE) friendly
- Most intuitive by far / perceived as more simple than the current nav
- Coherence between the different personas, so that we can scale easily
- Feels like the “Home of the Team”
- Entry-point for a high-priority task should be immediately visible on the landing page
- Works responsive
- Fits customer expectations
List of known navigation issues
Our own managers and HR were using the product, so we were able to collect a lot of feedback on everything that was confusing.
- Managers sometimes think they are looking at the team’s report, but they are looking at the company’s.
- In its current form, most of the sidebar content is useless for the executive manager of a large company or manager of many teams.
- The manager of multiple teams wants to see his 1:1s, action items, feedback, goals across all teams, not one team at a time.
- Back is confusing, orientation not always clear.
- Switching to the team member view causes duplication of content (action items) and creates additional cognitive load for managers to learn two interfaces.
We also had some performance issues to address. Like Slack, we displayed all company employees in the sidebar. For enterprise clients, this resulted in lengthy load times.
Additionally, we identified several issues with the mobile version. However, given that mobile usage was less than 13%, these issues were low priority.
The CEO also raised aesthetic concerns, such as the visually heavy sidebar that added to the app's perceived complexity.
I developed and implemented a research plan. The initial step involved creating an information architecture that would be straightforward and intuitive for managers. Subsequently, we constructed two alternative prototypes and evaluated their performance against our existing navigation.
Each table row is a different test.
🎯 Information Architecture that is simple and intuitive to managers
Objective | Audience | Technique | Output |
Discover the most intuitive labeling for users. | Users | Hybrid card sorting | Expectations for content organisation |
Discover the most intuitive content groupings for managers. | Non-users | Open card sorting | Common groups, new labels |
Discover the most intuitive labeling for users (2) | Non-users | Closed card sorting | Validation for content organisation |
Evaluate findability of content for key tasks (current vs new). | Non-users | Tree testing | Final iA, baseline for findability, simplicity score
Better understanding of mental models when multiple paths are possible for a task |
Once the information architecture was defined, different visual interpretations could be tested.
🎯 Simple, intuitive, FTE-friendly navigation
Objective | Audience | Technique | Output |
Select the most intuitive layout (A/B/C) for FTE/onboarding. | Non-users | First-click testing | Most FTE-friendly option (success, time taken, confidence, simplicity)
|
Select the simplest nav for key tasks | Non-users and users | A/B/C testing on click-through prototypes
| Simplicity score, time taken
|
Emotional response on redesign (A/B/C).
| Users | Interviews with interactive prototypes | Preference, simplicity + Home of the team score
Qualitative feedback for iteration
|
I built the card sorting tests in Optimal Workshops, and embedded them into userstesting.com. It was essential to collect feedback from non-users, to make sure the product would be intuitive to anyone.
I made sure to create cards and categories for features that were not yet on the roadmap but that Product would release eventually.
Hybrid card sorting
Participants were invited to sort the cards in existing categories or create new ones. It revealed that there was no obvious placement for most cards, except for a few exceptions (Custom Polls, Teams, Members and Learnings).
- “People” category should be kept
- No categories were created by participants, except for Action items. An open sort study should be done.
- Next time, remove cards that we don’t intend to keep in the main nav.
- Next time, request for participants to read the tooltips before completing sorting.
Open card sorting
In this experiment, participants were asked to categorize the cards based on their own classifications.
A similarity matrix revealed the proportion of participants who grouped any 2 cards in the same category.
👈 This was the most popular sorting strategy, but only 3 out of 10 participants had similar sorting.
- “To do” was a frequent label, yet always with different content.
- Kudos, action items and 1-on-1s did not have clear grouping. This may indicate that each should be its own category.
- Base groupings on the most popular strategy
- Avoid grouping the nav as much as possible, as there is no grouping that seems intuitive to all users. Further testing is required.
Closed card sorting
This study aimed to validate feature grouping based on the findings of the open card sorting.
The placement of cards was more similar across participants than in the Hybrid study, suggesting a more intuitive labeling. “Engagement” however was the least popular category. A follow-up test was run to find an alternative category for “Reports”, “Custom polls” and “Comparison”. We settled on “Analysis” which had been suggested multiple times by participants in the Open sorting study.
Most cards (except for Custom polls), were now placed by participants inside the same categories. Success! 🎉
To continue testing the navigation, we needed to identify the most important tasks for users.
We conducted a survey with 49 product users to understand their habits, and verified the collected data using Mixpanel.
We now had our final task prioritization, skewed towards managers, our target persona.
By Few | By Many | |
Frequent | Create/edit a 1:1 agenda
Remind members to answer survey
Share team survey report
Edit team settings
Try to improve results with suggestion | Read Pulse Survey feedback
Reply to Pulse Survey feedback
Read Pulse Survey Report
Reply to Custom poll text answers |
Rare | Create an action item for myself
Add a team goal to an agenda 1:1 | Read Learnings
Edit/archive team goal
Assign an action item to a member |
$ Financial | Upgrade to Premium
Fill out payment form
Invite a new team member |
Tree testing
In this test, we assessed the ease of locating content for 10 key tasks.
Two trees were built, one with the current navigational elements (navigation by team), and one with the new categories.
For each tree, we measured task success, how long it took to find the content, and if participants “backtracked”.
Interestingly, the study revealed that many participants had difficulty completing the "Send survey reminder", a problem not initially included in our list of navigational issues. Our Customer Support team confirmed receiving numerous inquiries about this issue. Consequently, I logged the problem as a separate UX debt ticket and included potential solutions.
Across the 10 tasks, nav A and nav B have very similar results. On average, B provides more directness (100% vs 60%) and is more time efficient (13 sec vs 17 sec).
Our information hierarchy was validated. We could now design and test various layouts for first-time experience, simplicity, efficiency, and personal preference.
First-Time experience
The goal of this study was to find the most intuitive layout during the onboarding stage of the customer journey.
Interface 1 Current navigation
Interface 2 Menu items on the left
Interface 3 Features at the top, team selection on the left
From the homepage, participants were asked to click on the right item. We compared the task success and time for each of the 6 following tasks:
- Suppose that you just signed up for Officevibe. Where would you click to check out the Pulse Survey report feature?
- Were would you click to check out the feedback feature?
- Where would you click to check out the 1-on-1 feature?
- Where would you click to check out the team goals feature?
- Where would you click to invite team members?
- You want to setup an integration with Bamboo HR to import your team members. Where would you click?
And finally, “Between interface 1, 2 and 3 which did you prefer and why?”
- Interface 1 (current) performed the weakest for all tasks. “Overview” was not a menu item that participants intuitively clicked to explore the product.
- The success rate for tasks greatly improved on interface 2 and 3 when the menu options were visible at first glance.
- 8/10 participants preferred interface 2. The other 2 preferred interface 3. Performance on tasks was similar.
This study highlighted a significant issue with our onboarding. All features were concealed behind a button that new users found unintuitive.
The thought of improving not just the user-friendliness, but potentially our conversion metrics as well, through a more intuitive navigation, was exhilarating!
Before the study, I slightly preferred Interface 3. However, I had to admit my mistake when Interface 2 turned out to be the overwhelming favorite among participants!
Key tasks click-through
The aim of this study was to determine the most efficient navigation layout and the one perceived as simplest.
I developed three interactive Figma prototypes and set up a test on usertesting.com. Ten participants were required to complete four tasks and then evaluate the intuitiveness of each prototype. After completing all the tests, they voted for the prototype with the most intuitive navigation.
Qualitative feedback:
Navigation 2 had the most success and was the preferred one followed closely by 3.
This study revealed many unexpected findings. For instance, users preferred to create a 1-on-1 agenda from the 1-on-1 list, instead of selecting the team member first. Despite the CEO's insistence on emulating Slack’s sidebar, user research indicated that it didn't align with the users' mental model.
Finally, I presented the three options to five Officevibe clients to gather their impressions and qualitative feedback.
As expected, they all responded favorably to Navigation 2, which had all teams and features on the sidebar.
Navigation 2 was superior in terms of FTE-friendliness, simplicity, and scalability. This gave me strong arguments to include a navigation redesign in the product roadmap. The squad designer and I revamped the navigation in the subsequent weeks. As predicted, it scaled well as the product evolved, year after year.
Numerous UX improvements stemmed from this initiative. Reflecting back now, I can see its significant impact on our projects for years to come.
