Background
Viu was uniting all regional platforms under one platform. During our this project, the design team took the opportunity to improve the experiences for our users. We recognized that the Search function had pitfalls and could be improved for our users.
Preliminary Research
In order to better understand the problem, goal and task itself, I conducted primary and secondary research:
1. Competitive and Comparative Analysis
I compared the search and discovery function across other streaming platform competitors, such as Disney+, Netflix and Apple TV to get a sense of what the industry leaders are doing for their search experience. Additionally, I conducted some comparative analysis on search bars in other successful applications that deal with presenting and sorting a lot of data, such as Spotify and Youtube. We do not necessarily have to reinvent the wheel if it is already being done well.
2. Hotjar Tracking and Heat Mapping
I observed our users' search behaviors as they entered the site and searched for a programme to watch. What I noticed was that a majority avoid the search bar all together and opted for the site categories or a third party site (Google) to reach the video they were searching for. This made me wonder, "Why would they avoid the search bar?"
3. 'Keyword' Analysis
I observed our users' search behaviors as they entered the site and searched for a programme to watch. What I noticed was that a majority avoid the search bar all together and opted for the site categories or a third party site (Google) to reach the video they were searching for. This made me wonder, "Why would they avoid the search bar?"
4. User Interviews
My team and I conducted user interviews with live users to get more insight on search behavior. As previously suggested, people preferred to search incomplete titles and phrases to save time. We also realized that our hot search suggestions in the search bar drop down were not really used. Furthermore, we learned that users got stuck between languages due to the fact that each language was actually a different site and the search bar was not multilingual.
Collaborative Stages
With my team, we conducted a team workshop to share ideas between the web and app experiences, come up with solutions that work across both platforms, and continue to understand what our users need.
By conducting a user empathy mapping exercise, as well as How Might We's and Crazy 8s for low fidelity solutions, we came away with solutions on how to address the search side of the experience and the discovery side.
To structure our solutions, I worked under the following How Might We... questions:
1. How might we help users reach their target results?
2. How might we make users feel clear about what they are searching?
3. How might we help users find the most relevant results in the easiest way?
4. How might we keep users from getting stuck on the no-results page?
Solutions
Keeping in mind our four HMW questions and the typographical constraints (size and length) of languages like Arabic and Burmese, these are the solutions. Apart from what we could do with the design, I also suggested to redo how we tag our content in CMS in order to improve the results and the priority of which they are displayed. The first step to a successful search is showing the right results!
Old search landing page
Proposed search landing page
When users start typing, now the words entered in the search bar will appear highlighted to give the user a better sense of how accurate their search query will be. Rather than keeping the side by side columns for series and actor results, returning them to the standard, vertical alignment makes for simplicity. Lastly, categorical icons now accompany the results to help the user distinguish what type of results they may get.
Old typing state
Proposed Typing State
In the proposed search result page, the user now has an "All" category to get an overview, rather than starting off in movies. Remember how Viu in different languages are considered different sites? Since it was not a feasible feat for developers to combine all the different sites, by adding a chip for a language switch, users can access multilingual results.
Old search results page
Proposed search result page
Proposed search result page
(multilingual)
When users enter a query with no results, Viu would simply say "No matches found. Try a different keyword." This is not help and gives users no insight or path to continue on. Rather than this, a suggestion on how to continue the journey should be present. By offering hot tags, hot search and trending suggestions, users can find another path to discovery. Additionally, they can tap into the more extensive search tips to continue their search. When there are results in another language, users are presented with the option to explore options in another language.
Old no results page
Proposed no results page
Proposed no results page- multilingual
