Search by Algolia
Building a performant search bar in Nuxt with Algolia & Storefront UI
engineering

Building a performant search bar in Nuxt with Algolia & Storefront UI

In today's highly competitive e-commerce landscape, providing customers with a seamless and efficient search experience can make all ...

Jakub Andrzejewski

Senior Developer and Dev Advocate at Vue Storefront

How to use AI to build your business
ai

How to use AI to build your business

The world of technology is constantly evolving with generative Artificial Intelligence (AI) currently leading the charge. We’re suddenly surrounded ...

Abhijit Mehta

Director of Product Management

Haystack EU 2023: Learnings and reflections from our team
ai

Haystack EU 2023: Learnings and reflections from our team

If you have built search experiences, you know creating a great search experience is a never-ending process: the data ...

Paul-Louis Nech

Senior ML Engineer

What is k-means clustering? An introduction
product

What is k-means clustering? An introduction

Just as with a school kid who’s left unsupervised when their teacher steps outside to deal with a distraction ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Synonyms
product

Feature Spotlight: Synonyms

Back in May 2014, we added support for synonyms inside Algolia. We took our time to really nail the details ...

Jaden Baptista

Technical Writer

Feature Spotlight: Query Rules
product

Feature Spotlight: Query Rules

You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...

Jaden Baptista

Technical Writer

An introduction to transformer models in neural networks and machine learning
ai

An introduction to transformer models in neural networks and machine learning

What do OpenAI and DeepMind have in common? Give up? These innovative organizations both utilize technology known as transformer models ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What’s the secret of online merchandise management? Giving store merchandisers the right tools
e-commerce

What’s the secret of online merchandise management? Giving store merchandisers the right tools

As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...

Catherine Dee

Search and Discovery writer

New features and capabilities in Algolia InstantSearch
engineering

New features and capabilities in Algolia InstantSearch

At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...

Haroen Viaene

JavaScript Library Developer

Feature Spotlight: Analytics
product

Feature Spotlight: Analytics

Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...

Jaden Baptista

Technical Writer

What is clustering?
ai

What is clustering?

Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is a vector database?
product

What is a vector database?

Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Unlock the power of image-based recommendation with Algolia’s LookingSimilar
engineering

Unlock the power of image-based recommendation with Algolia’s LookingSimilar

Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...

Raed Chammam

Senior Software Engineer

Empowering Change: Algolia's Global Giving Days Impact Report
algolia

Empowering Change: Algolia's Global Giving Days Impact Report

At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...

Amy Ciba

Senior Manager, People Success

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve
e-commerce

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve

In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Algolia x eTail | A busy few days in Boston
algolia

Algolia x eTail | A busy few days in Boston

There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...

Marissa Wharton

Marketing Content Manager

What are vectors and how do they apply to machine learning?
ai

What are vectors and how do they apply to machine learning?

To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...

Catherine Dee

Search and Discovery writer

Why imports are important in JS
engineering

Why imports are important in JS

My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...

Jaden Baptista

Technical Writer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

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. 

About the author
Craig Williams

Director of Product Design & Research

Curious about what Algolia can do for your business?

Get a free and personalized demo of our search and discovery solutions

Request a demo
Curious about what Algolia can do for your business?

Recommended Articles

Powered byAlgolia Algolia Recommend

Good API Documentation Is Not About Choosing the Right Tool
engineering

Maxime Locqueville

DX Engineering Manager

Why we recommend Recommend to make recommendations
product

Pauline Lafontaine

Sr. Product Marketing Manager

Why you should capture click and conversion events from day one
engineering

Jaden Baptista

Technical Writer