Search Tool

Ever since Google introduced auto-complete in 2004, predictive search has become a welcome part of our internet interactions, helping us search faster, find results quicker, and discover answers to questions we didn’t even know we had.

Predictive search feature uses an algorithm based on popular searches to predict a user’s search query as it is typed, providing a dropdown list of suggestions that changes as the user adds more characters to the search input.

Challenge and Solution

When it comes to apps, in some cases, predictive search may not always be possible, for instance, the back end system it depends on to deliver data content cannot accommodate this type of assisted search service.

In this case study, we address how we worked around this scenario, where predictive search would not be possible for an app that required us to showcase the search tool prominently as it was a key feature. Our challenge was to provide guidance to enable users to understand how the search tool in the app could be used even though predictive search would not be made available.

The images and captions below illustrate the challenges and solutions implemented by MCoE Design team:

Search Tool

ProductScan Main Screenshot

In the app design featured above, the search feature is made prominent as the app itself is a search based tool designed to retrieve medical product information for users.

Ideal Solution

ProductScan Search Screenshot

An ideal solution is to utilize predictive search. Since the backend system could not provide us with predictive search at this stage in the project, we had to use an alternate solution.

Interim Solution

ProductScan Search Screen with Reminder

Our interim solution (until predictive search will be made available through the backend system) is to provide users with search tips so that when they perform a search the content featured above appears to provide users with reminders of the types of searches they can perform.

Unwanted Scenario

ProductScan No Results Screenshot

Because search prediction was unavailable, our goal was to avoid pushing a blank screen when search mode was activated by the user.

Want to learn more? Check out these case studies below:

	Figma Tool Figma is a design platform that features good tools for UX/UI design, prototyping, collaboration, and specifications
	Hamburger Menu v. Tab Bar Determine which navigation style – hamburger or tab bar menu- provides the most intuitive and positive user experience as well which one was preferred by users.
	Sign Out Button Inconsistencies of sign out button locations and design. Provides recommendations for a button standard.
	Zeplin tool MCoE Design team has been using Zeplin for specs and comps. Learn about the Zeplin tool.