Designing Search UX: How To Get Started

As simple as it might seem, helping users find what they’re looking for is surprisingly complicated. Here’s what I learned from taking on our own search project.

Jul 15, 2022

Hey there! I’m Nicole, and I’m a product designer. I write this newsletter to share my experiences and lessons learned through my work as a product designer.

One of my first projects in my new role was to improve an existing search functionality we had. We knew that users — both internal and external — had trouble finding the results they were looking for. The current search UX wasn’t helping with that; it was hindering it.

In the past, I’ve designed experiences similar to search, like improving information architecture and navigation. But I hadn’t yet designed a pure search UX, so I needed to do some research to figure out how to get started.

So I scoured the internet, trying to find any resources that would help me understand what goes into making search itself a useful and effective experience. I dug into dozens of articles on best practices and visual examples. I fiddled around with every search experience I could think of, from ecommerce sites and marketplaces to the reliable Google.com. And as I did this investigation, I realized that search requires a few things:

Thoughtful logic, to connect users with exactly what they’re looking for
Scalable architecture, to grow and improve the system over time
Flexible design, to account for myriads of pathways and interactions

After a lot of digging, I found a handful of helpful resources. That was useful for the practical side of the project — filling in the gaps of what I needed to know. But what I had a harder time finding was information on how to tackle the project itself, especially when considering the expansive nature of search.

So in this article, I’ll be covering both of those areas — the resources I found helpful plus my own approach to our search project. Let’s get into it 👇

Getting started

Because my project was focused on building a search experience from scratch, the hardest part was figuring out where to start.

When I find myself in a situation like this — designing in a domain that you don’t have much prior experience in — I’ve found it helpful to have a “next few steps” mindset. Rather than trying to learn about all the things I currently don’t know, which can lead to feeling stuck or overwhelmed, it’s better to focus on what feels most top-of-mind and immediately needed. After seeking out information about that, you’ll usually then find the next few things you need to learn about.

My first few steps were to focus on identifying search best practices. The resources that I found, included below, outline those best practices in various forms.

Short-form resources

Search Patterns by Jeff Callender

❓ What it is: A quick read on the tenets of successful search. Despite the visuals being pretty dated (like, I never knew Twitter used to look like that 🤯), the content still stands.

🍎 Helpful for: If you’re short on time and you need something quick, this provides an introduction to the fundamentals of search.

UX for Search 101 by Gabriela Gentile

❓ What it is: A more visual coverage of some of the same topics as Search Patterns.

🍎 Helpful for: Understanding what the terms mean (but not so much if you need to figure out how to implement these techniques).

20 On-Site Search UX Articles from the Baymard Institute

❓ What it is: Articles with various search UX examples. Some cover search at a high-level, whereas others dive deeper into a specific pattern or use case.

🍎 Helpful for: Seeing a variety of examples to illustrate different search patterns, analyzed by the experts at Baymard.

I found the following articles especially helpful for my project:

Long-form resources

Designing the Search Experience: The Information Architecture of Discovery (1st Ed.) by Tony Russell-Rose and Tyler Tate

❓ What it is: A deep-dive into the nuances of search; the authors aim to “weave together the theories of information seeking with the practice of user interface design.”

🍎 Helpful for: Understanding each of the complexities involved in search in a single, fully comprehensive resource. Highly valuable if a large part of your role is focused on designing around search and discoverability.

Ecommerce Search User Experience Report by Nielsen Norman Group

❓ What it is: A report that covers everything from users’ search behaviors to best practices for search, sorting, filtering, and navigation. Includes design guidelines, screenshots, and charts.

🍎 Helpful for: Seeing best practices paired with examples, specific to the ecommerce industry. If you’re designing for an experience not ecommerce-related, the recommendations will require more thought about how to translate them to your specific industry.

Scoping search design work — how to tackle it in a manageable way

In my process, the resources detailed above were helpful for learning about what goes into an effective search experience. But they were less helpful in the application of it: now that I understood how multifaceted search is, how could I actually include all of those ideas in my new search design? Even after I felt comfortable with the content I had researched, this new ambiguity blocked me from moving forward.

From my research, I could tell that search requires the collaboration of many different fields — data science, engineering, design, and product. As a result, it can be challenging for designers who need to take the first stab at it. But without design doing so, other teams won’t know what the ideal experience should look and feel like — and I had that realization firsthand after discussing the matter with my cross-functional teams.

So in order to move the project forward and begin to identify that ideal experience, I found it helpful to approach it by focusing on setting the foundation for the search UX. My goal was to create the best experience possible, despite constraints like lack of data or lack of existing infrastructure. To accomplish this, my process turned out as follows:

Identify which principles are the highest priority

You’ll see from diving into the resources above that designing a search experience can get very ambitious, very quickly. Especially if you’re starting from scratch, it might be impossible to create a search UX that ticks every box. Successful product design comes down to making the right decisions about trade-offs — what features make the most sense to include now, versus which ones can wait until later.

To make those decisions, I took a step back to consider the bigger picture that this search experience would exist within. That involved thinking through questions about:

The users: Who are our users, and what are their goals when searching? What are they looking for, and what are the various methods they use to find that? Where does our search experience currently fall in their overall journey?
The business: What are our business goals, and how does this project relate to that? How could improving search support our long-term efforts? How could we measure the improvements made, and how could we relate those back to our business objectives?
The product: How does search relate to our overall product experience? How important is search currently considered, as it relates to the product? How could that change if we make strategic decisions about what features to include?
The resources: What resources are currently available — how much time can we devote to this project and how many people will be working on it? For completion of this project, what timeline are we aiming for?

By considering the context through each of these lenses — users, business, product, and resources — I could start to identify which principles and best practices would be most achievable in the near-term, and which would require more time and work. From there, I could prioritize the design for those more easily-achievable improvements, and maintain the long-term improvements as part of the overall vision.

Outline the ideal user experience, then work backwards into the logic

Our current search wasn’t working as expected, but we didn’t know why. We did know that we didn’t have much existing structure — that was obvious just from using our search. So rather than digging into our current faulty experience and troubleshooting from there, we found it more useful to envision the ideal UX we’d want to aim for, and then start building toward that.

Having identified the best practices to work toward given my research and understanding of our constraints, I was still unsure how to reach that ideal UX through its design. So I found it helpful to play around with functioning search experiences, so I could start to identify those best practices — or lack thereof — in real life examples. I used our current search experience, starting with basic terms that users would search for. Then, I started to increase the complexity and unusual-ness of the terms to see how far the current UX and system would support it. I looked at edge cases like the empty state and other conditions that might render errors, like typos or alternative spellings of common terms. And I spent a lot of time looking at search experiences on other sites, replicating the investigative process I used on our own.

From there, I could start to piece together how different search experiences behave. I considered common themes shared across experiences (like autocomplete or autosuggest) and bespoke touches within certain search experiences (like a personalized approach or recommendation). By getting a better grasp on the tactile behavior, I could start to piece together the structure or logic that exists underneath the surface to dictate that behavior. And by comparing that to what I found in our current search experience, I could start to fill in the gaps — how we could build something similar.

The resources above can tell you more of the esoteric, theoretical side of search, but nothing is better than actually using various search experiences. By understanding the ins and outs, the common uses, and any eccentricities, you can start to feel more comfortable with what expected behavior you’ll want for your own search experience.

Find additional resources specific to your team’s search engine framework

In addition to the UX, search also has another critical side to it — the technical implementation.

Few search experiences are truly built from scratch. Many rely on pre-built engines to accomplish the routine and essential tasks involved in search. Engines allow development teams to focus on fine-tuning the aspects and features unique to their own product and user base. Each engine also often provides resources for utilizing it effectively. If you aren’t sure what engine your team uses, ask your engineers. It could also be helpful to ask other engineering teams to see if there’s any opportunity to source recommendations on possible search engines and platforms.

As an example, our team uses ElasticSearch. To help users (like our team) get the most out of their product, ElasticSearch has a hugely robust set of resources, like blog articles and tutorials, developer documentation, training, and webinars. All of these resources can be helpful when trying to understand what’s possible to accomplish through the platform.

When I was working on my project, ElasticSearch happened to have a webinar about machine learning. They walked through the features on their platform that support machine learning, and they provided guidance on how teams could start to build out their own logic. This webinar was super helpful as both an introduction to the search engine and a forecast on how I could start planning around future machine learning opportunities.

If you familiarize yourself with your team’s engine, you’ll be able to bring those valuable technical insights into the design as well — knowing what the engine will take care of, and what you should focus on instead.

Search UX can be an intimidating project for designers, but these tips should help you tackle it more strategically. As you progress, you’ll hopefully start to see what makes search, despite its complications, a fascinating problem to design around. Good luck! 👏

I hope you found this newsletter helpful! If you’re interested in reading more, subscribe here for free and share it with a friend. You can also find me on Twitter (@wontonface).

Have a topic idea or request you’d like me to cover? Submit it here.

Nicole’s News

Discussion about this post