Navigating change

At the end of the summer, we shipped a project that is very dear to me. Wave’s NEW navigation. It’s dear to me because it’s proof that sometimes changes — initially perceived as minor — can considerably impact the overall product experience. It’s also dear to me because it was my first big project with the design systems team, it took a while to ship (for many exciting reasons), and when we finally released it, my mind was flooded with memories of all the fantastic people that had worked on the project.

This post is meant to mark the occasion and also share what we learned while navigating the waters of navigation.

The project

The (now) old Wave navigation felt like it gave us an itch we wanted to scratch every time we looked at it. Today, we have a new product vision and new features coming up, and it would be ideal to have some of them implemented and accessible everywhere, from the navigation. It all starts there.

The design systems team then took the opportunity to start scratching that itch and decided to dive deeper to rethink the navigation so it could accommodate those features, which left me pretty excited — the word "re-design" is like music to my ears.

Composed of one left-aligned menu, the old navigation needed more real estate to house what we had planned in our product vision. Making the navigation scalable was the main trigger to start this project, but what else could we improve? 

Everybody on the product design team had hypotheses about the navigation and its pain points, so the first thing we did was test those hypotheses and hear what our users had to say about it.

We ran card sorting exercises internally within our team and externally with Wave users to check if the current navigation taxonomy still made sense. We then gathered feedback from customer support tickets and ran usability tests with the current navigation. Those tests gauged how easily users could find different features in the desktop and mobile responsive navigation.

We also needed a way to compare old versus new. We chose a tool known as the System Usability Scale (SUS), a 10-question survey that measures the usability of systems. SUS scores range from 0 to 100, and 68 being considered the industry average. A SUS survey was included at the end of every baseline test with the old navigation and after every new nav prototype we tested.

We got a lot of insights from the discovery process. Here are the main takeaways:

The difference between business and profile settings needed to be clarified, and the fact that they are not snuggled together in the same place makes things worse.

During the usability tests with the old mobile responsive navigation, users could open the menu from an icon at the top but had a hard time closing the menu. The expectation for users is that a hamburger menu works as a toggle, and usually, menu toggles stay in the same place. In our case, the toggle shifted to the right when the menu opened, and users had a hard time finding it.

The current taxonomy still holds with our user base. When asked to sort Wave features into buckets, users grouped features in a similar way to what we have on the left menu bar, and the names of the buckets were similar as well. There was no need to make any immediate changes, but some interesting insights came up, and we are investigating those for a future update.

The new navigation

We then started the ideation process. We did a two-week swarm where we came up with ideas and prototypes and tested them. For this phase, we did a little bit of everything: brainstorming sessions, reference research, Crazy 8's, and more. That was the really fun part, where we started jamming, trying completely bonkers ideas, and mashing them up against more conservative approaches. Taking everything apart, stitching the best pieces together, and fine-tuning them, trying to find a harmonious composition, blending out-of-this-world with down-to-earth, and expanding our horizons.

We built ten low-fidelity prototypes in one week using those bits and pieces. We tested them with over fifty-five users, optimizing each prototype until we landed on the navigation system we've since shipped. 

Here's what changed:

We added a new top bar that can support and house future features (part of our product vision), and a settings dropdown menu in the top-right corner where we grouped business and profile settings together, making it easier for people to find what they need.

We removed the background colour and reduced the width of the left bar to reduce the cognitive load of information-dense areas (like invoices and transaction lists). Users can now collapse the left navigation bar to free up space (like clearing your desk).

On the mobile responsive version, we moved the navigation bar to the bottom of the screen and included the menu on a sheet that keeps all options at thumb's reach. In this version, users could open and close the menu without any issues because the toggle button stayed in the exact same place, no matter the state.

User feedback speaks volumes

Remember the SUS score I mentioned earlier? Here's how the new navigation performs compared to the old version. Even though some Wave users who tested the new navigation mentioned they didn't see much change at first, their responses to the SUS survey told a much more positive story:

• Old navigation Mobile 62 (Below average) 
• New navigation Mobile 85.5 (Excellent)
• Old navigation Desktop 74.8 (Good) 
• New navigation Desktop 90 (Excellent)

Still fresh from the recent launch, we’re monitoring the new navigation’s performance in the real world. But one thing is certain: this data-driven design process gave us a navigation that is future-proof and will enable us to deliver a product vision that is in tune with small business owners' needs, helping them navigate through their journey from start, survive, and thrive, to grow and scale (with Wave alongside them!). Change can be scary, fun, and sometimes barely noticeable. Either way, it's 100% worth it. Both personally and professionally.