Reimagining Wavely’s Navigation Bar

Wavely is an AI-based job searching platform that is a two-sided market, catering to both B2B and B2C.

During my time at Wavely, one of the biggest changes that took affect was the decision to change Wavely’s Navbar into a Sidebar.
Here’s how it went down.

1: Background

Wavely’s navbar has been used by thousands of users and talents for more than 4 years, never once revamped. This could be a scalability issue in the future, especially when we decide to introduce a lot more components and features to the app.

2: Investigation and Finding Problem Sweet Spots

To solve the potentially cluttered navigation bar, the design goal is to port the navbar into a sidebar. For this revamp, the metrics are customer satisfaction and adoption (users from older version converting to newer version).

User Segment Research

To create a product that aligns with the users, I conducted multiple seller visits to investigate pain points and observe their behaviour when using products.

User’s Actual Pain Points

None of the users had brought up the Navigation Bar situation. When I asked them about porting the Navbar into a Sidebar, the 10% told me to make sure they had some sort of “instructions” to avoid steep learning curve.

3: Further Mapping and Investigation

Before moving forward with designing, I needed to understand the product’s dependencies, constraints and use cases to achieve consistent, viable and scalable design.

I wasn’t satisfied with the results of the first field research visit — so I decided to spot problems from additional angles. Gathering all product components and insights could assist us in designing the guideline to achieve modularity without compromising the layout’s design.

Below are the type of mappings I’ve conducted and gathered.

1. Information architecture of existing design
   Worked with Product Manager to define logic
2. Common and uncommonly used features
   Through tools such as Mixpanel, interviews and surveys
3. Request to Engineering and Product Team
4. Growth, Marketing, Sales team buy-in
5. Component Audit to add-on to the Design System
   Through tools such as Hotjar to define UX pain points
6. Card Sorting
   Invited Design team to contribute
7. Secondary Research
   Modular vs. Tabular Design

4: The Design Experiments

This is a design that has never been launched before. Therefore, we conducted an iterative multivariate testing.

Test A is an old design, B new design in dark, C new design in light.

A whopping 92% had more engagement on test B. We also conducted a multivariate test on the website that generated 1.5x more leads and CTR when presented the second photo.

Gathering insight, I found that the small businesses (1–10 employees) seemed to be more satisfied with the old design, but the rest (10–25 employees, 50–100 employees) were highly satisfied with test B: new design dark mode.

Additionally, features listed on the sidebar was more clicked/utilized versus the old design.

Here are the list of significant changes made:

1. Copywriting —i.e. “Plans & Pricing” changed to “Go Pro” and “Try Free”
2. Modifying hot-links to feature on the sidebar:
   - Adding “My Company”. In addition to a request by the users, we’ve seen a lot of usage in this feature.
   - “Post a job” URL — better experience because this is also a common feature that is used.
3. Adding a “Help” icon on the new top-nav, opening Zendesk and a Tour design to avoid steep learning curve and quick access to help.
4. UX improvements. Adding badges to “Chat” to increase engagement.
   - Introducing Grid system on Sidenav and open screen space.

5: Final Design and Development

The Product Manager and I both worked closely with FE and BE to develop, QA, and deploy the final design after multiple multivariate testing.

6: And the result?

Metrics
User satisfaction score (feedback):
Week 1, 2 out of 5
Week 4, 3.5 out of 5
Week 8, 4 out of 5

Adoption:
By week 2, 12% decrease in ‘help’ Zendesk on “How to post a new job”
20% decrease in ‘help’ Zendesk on “How to upgrade account”

Additional highlights:
First 30 days of launch, received 4% less account deletion of users

Learnings
- Multivariate testing and iterative releases benefits everyone.
- Involving stakeholders when observing users can speed up and smoothen decision-making process.
- Involving developers in user testing improves their product ownership.

6B: Next steps

• Matching pattern to B2C sidebar.

• Investigating different parts of the Web app and doing a refresher.