14 December 2017 Engineering

How to Build a Site Search UI

By Sam Reid

Note: The original extended post is available on the Swiftype Blog.

Search nirvana: A powerful backend + well-designed UI

Depending on the purpose and scale of your website, search can be a critical feature that enables your users to quickly find the information they need. Elasticsearch makes it significantly easier to architect a search engine that delivers relevant results, but building your search backend is only part of the work of implementing a search experience. Without an intuitive search interface, your users may not get the full value of your search engine.

What we’ve learned as search providers

At Swiftype (an Elastic Company), we provide search as a service to completely handle the backend of your search engine, and we also help you to build well-designed search UIs. Swiftype is built on the Elastic Stack which has enabled us to support over 10,000 production search engines and serve over 5 billion queries a month. It’s safe to say that we’ve learned a thing or two about search over the years as we’ve helped small and large companies like Lyft, AT&T, Twilio, Asana, and Samsung provide top-notch search experiences. If you’d like to learn more about Swiftype’s architecture and use of the Elastic Stack, check out this webinar.

In our experience helping these organizations and many others with search, we’ve been able to see what works well when it comes to search UIs and apply those learnings to both our out-of-the-box search interface as well as our jQuery libraries that we support for creating fully custom UIs. While building a great search interface can take some effort, we’ve consistently seen companies reap the rewards of implementing well-designed search UIs which include revenue growth and better user engagement.

Implementing your search UI

Swiftype can help you to get a jump start on building your next search experience, including the UI (or replace your Google Site Search installation). In 3 steps, you can have a functioning search UI implemented.

Step 1 — Index your data into Swiftype

Step 2 — Tune your search results

Step 3 — Implement your search bar

  • Utilize the Swiftype JavaScript snippet or build your own search UI using the Swiftype search and autocomplete jQuery libraries
  • If you use the JavaScript snippet, you can use the Swiftype dashboard to customize the appearance of your search bar and results container

Read the Full Post