We’re excited to share a behind the scenes look at our newly redesigned navigation. The redesign is the result of lots of research and hard work, and it’s still evolving. We’ve been listening carefully to feedback and now that it’s launching, we’ll continue to listen and make it better.  

Algolia is growing

There were many good reasons to rethink the way our users navigate around our Dashboard. We’re constantly conducting research with our users, and we had amassed a growing list of issues they were encountering with the existing navigation. Choices that made sense back when we had fewer features were no longer working. At certain screen sizes, our navigation was disappearing off the bottom of the screen. 

For instance, we were using the sidebar to handle:

• Managing and switching between applications
• Navigating around different search features
• Managing billing and team roles
• Managing personal account settings

Our navigation was practically bursting at the seams!

… and growing!

On top of all of that, we’ve recently released our second product: Recommend (psst, more about that here. It’s super cool!). So, along with all the other things competing for attention in the navigation, now we needed a way for our users to move between the two distinct products, Search and Recommend, easily. It had to be crystal clear where they were in the dashboard at all times, and they needed to be able to understand why they should use one product over the other. And we needed a solution that would scale as more products come along.

Rethinking the hierarchy

One of our first steps was to give each separate function a home. As you can see in the old design, we were asking the sidebar to carry a heavy load. Application switching, search navigation, personal settings, and help all lived within a shared space. The unfortunate result was that the mental load was transferred to the user, who was expected to make sense of it all.

So we devised a new model where each type of action has a defined place. Now, the sidebar is reserved solely for navigating through the dashboard. Want to change or add an app or index? That will always be right at the top center of the screen. By defining these spaces more concretely, we’re allowing users to make assumptions about where to find things based on their past experiences. When we need to add something new, there’s no question about where it belongs.

We also dedicated space in the top right corner for Support, Documentation, and Help-related items. If you need to get to the Docs quickly, you’re always just a click away.

Designing an intuitive navigation

Separating out our products

When it comes to navigating through the Algolia dashboard, we’ve made some changes to help you find what you need. The most obvious change is that we’ve given each of our products its own place in the navigation. It’s a small shift in the way we think about working in the Algolia dashboard, but it allows us to surface more specific features right when you need them.

For example, if you’re using Recommend, you’ll only see features that are relevant to Recommend. The same goes for Search. Time and time again we watched our users become frustrated and confused during tests because they were seeing navigation that wasn’t relevant to the product they were using. 

Creating a single platform

Offering multiple products brings some new complexities that we needed to solve. Many things that had always been tied to Search, like an index, might now be used elsewhere. It’s entirely possible to have indices that are only used for Recommend, so we suddenly needed a place where you can see both Search and Recommend indices together. So we added a third section called “Platform.”

Initially, we added the Platform to house navigation items that crossed multiple products. It sat at the same level as our products, but served to aggregate shared elements. I say initially, because, well, it’s not there anymore. But I’ll get to that in a bit. 😉

Grouping related features

To me, this is where things started to get really interesting. An important thing to realize about Algolia’s dashboard is that our users aren’t all technical. Lots of them are, but some of them really aren’t. We see lots of PM’s, merchandisers, and even designers, and it’s equally important to us that we support them all. 

So with this in mind, we knew that certain terms that are obvious to one type of user are often completely baffling to another. User testing had shown that there was a bit of a cliff in terms of technical understanding–basically non-technical users were getting stumped by the same terminologies over and over again. We needed to build a bridge.

We added feature groups to help us solve this problem by rearranging the items into groups based on their functionality. Over and over, we saw testers use the group headings as clues to figure out where something might live in the navigation. As a designer, it was exactly the type of thing we’d hope to see them do. 

Within each product, we’ve grouped features so that they connect better to the user journey. For example, within Search you’ll find “Configure,” “Observe,” and “Enhance” groups.

As seen here, Enhance groups together ways to “enhance” relevance. Configure is where you can do things like add an index, or make query suggestions. In Observe, you’ll be able to check search analytics or launch an A/B test. 

And More!

Of course, we didn’t stick with just those updates. We also took the opportunity to make some adjustments to the UI in preparation for planned updates. In general, we’ve cleaned things up as much as possible and made a lot of subtle improvements. Now we have a cleaner slate for what’s coming. 

The last big change I want to mention is actually the first thing you’ll encounter when you come to the Algolia Dashboard: a revamped Overview page. I know this sounds crazy, but we wanted the Overview page to actually be an overview. So now you’ll have a bird’s-eye view across everything you do in Algolia, not just search. We’ve added quick links for the things you’ll need most, and we have lots of interesting plans for how this screen can be even more useful for you. What you see today is really just a first step for this screen.

 

Beta Testing

For me, the best part of the design process happens after people start using the interface. The truth is, all of the changes I’ve just talked about so far were guesses. We go through a design process to make them well-educated guesses, but they’re still guesses all the same. That changes when real users start telling us what it’s like to use Algolia to do their job.

And when we released our public beta in July, we found some issues right away. People had trouble finding some really important things like API keys, Billing, and Team Settings. And the reason they had trouble finding them is because putting them all in a section called “Platform” didn’t make sense. With the help of some really insightful user interviews, we ended up splitting Platform into three new sections in the navigation: API Monitoring, Data Sources, and Settings. I love it because we never would have come to that solution without the help of our users.

Though not as big and noticeable as that, we also made some other important changes during the beta. We made adjustments to the UI contrast to make the hierarchy a bit more obvious. We iterated on how the secondary navigation opens and closes. And we tightened up the tooltips that appear when the product navigation is minimized. They’re not something that the average person might notice, but taken as a whole they make a big difference in the way it feels to use the navigation. 

Let’s go!

I’m incredibly proud of the team that worked to make the navigation what it is today. The role teamwork plays in rethinking a long-standing navigation can’t be overstated.

There are a lot of great product updates coming on the heels of this navigation. To be honest, it really feels like the navigation is a gate that we’re opening, allowing everything else we’ve been working on to come roaring out. It’s a really exciting time here at Algolia and I can’t wait for you to see what’s next.