I want to share my experience in redesigning the search flow in Cafe Bazaar (an android app store with more than 40 million active installs).

6 of 10 users who enter the Bazaar app everyday find their content through searching. That is why the search flow is one of the most important flows in Bazaar.

Search flow was designed according to the user needs and behavior in ‘apps and games content’ in Bazaar. In other words, we designed the last version for finding the apps and/or games. After adding the video content, we had to see if the search flow needed to change or not.

Problem Statement: Did we need a change?

In the previous search flow version, we presented our users with the results from games and apps according to their queries. When the video was added to the existing sections, with the slightest change possible, we decided to add another row to each search result that demonstrated the videos close to the query.

This solution had two major issues:

1. Using a lot of space to support the need of 1% of the users
   Search data showed that only 1% of the users entered the suggestions page about the video. It means that only 1% of queries led to tapping on the video content which was presented in search results. So displaying this row was not a good idea and the majority of the users had to spend more time finding their intended content.
2. Similar phrases in different contents
   Presenting the user with two contents of different materials without separation caused some problems. Imagine that the user searches for “game”. How do we recognize that she is looking for a movie which has the word “game” in it or she is entering this query because she wants to see a list of games in Bazaar?

As another example, I can mention the word “Shahrzad”. With this word in Bazaar, we have game content and also video content.

Solution

In the previous design, the way to reach to search was from bottom navigation alongside the app, game, and video bottoms. To resolve the above-mentioned problems, we separated search channels of different contents so that the user would know in which content space she is searching.

While removing search from bottom navigation and changing the location of the search icon we came across 3 problems. Two of which were recognized before launch and during usability tests and one after launch by observing user behavior. I presented each with a solution:

1. Access to search only through the first page
2. Searching for contents in the irrelevant section
3. The back bottom function: according to the path taken or Information architecture of the application?

1- Access to search only through the first page
After removing access to the search page from the bottom navigation, the user didn’t have access to search in all the pages, so she had to come back to the first page for every time she wanted to search something, as opposed to before that she could enter the search process through every page she wanted to. Thus, the search bottom was added to every page that the user might want to use. For example, in the app and video detail pages, in listing pages, and in category pages that the user might want to search for something, search bottom was added.

2- Searching for contents in the irrelevant section
According to data and user research, we realized that the users type their phrases in the irrelevant content section. They look for games in the video section or look for videos in the app and game section. For example, imagine a user wants the game ‘Clash of Clans’ but searches for it in the video section. So no result comes up and she thinks that Bazaar does not have this content. The proposed solution was the design below -which was added to the new version of Bazaar- in which the user can search in her desired content by changing the tab. We tested this solution before development with a usability test and the problem was improved.

3- The back bottom function according to the path taken or Information architecture of the application?
Let’s answer this question together: Imagine the user searches for a phrase but since the result is not what she was looking for, she does not touch any of the results. She might do this over and over without entering the detailed pages of the results. Now after touching the back bottom, she should go back to which page?
When the user conducts several searches in a row and has not reached the desirable result, after touching the back bottom she should get back to the page that she started her search from. In addition, usability results showed that the users expected to reach the main page of an app, game, or video when touching the back bottom and when this did not happen, they touched the back bottom repeatedly or they closed the program and opened it again. This means that after seeing the results and deciding to go back, the user did not need to see the page that she had typed the query in.
To present the user with quick access to the main pages we decided not to show her searches that did not lead to detailed pages. Whereas the back bottom in the previous design took the user back through the pages one by one.

This was how the search process was redesigned according to the contents inside the application in several iterations.

Several million users use the Bazaar search function every day and every little change in the search process has lots of challenges. We try to add new features to Bazaar and at the same time solve the current problems through iterative design.