Client Work — 2019

Xbox

Overview

My client, the Xbox marketing team had a general request to improve their search experience. Within 2 weeks, I brought clarity to the design problem, evaluated the site, and made recommendations to improve the usability of the search bar and search results page.

MY ROLE

Designer

CLIENT

Xbox

AGENCY

Wunderman Thompson

RESEARCH / PROBLEM DISCOVERY

A user can be looking for many types of information when searching a term like“Minecraft” on Xbox.com.

Minecraft is the top 1 most popular search term that appeared in the data. Even though it generally refers to a game, there is a lot of other information associated with it, including the game editions, add-ons, devices, services etc. I learned that due to the diversity of types of information, it is challenging to help the user find desired results efficiently.

RESEARCH / HEURISTIC EVALUATION

Evaluating the the current search bar and search result page.

First I evaluated the current site experience by going throw a typical user flow of searching "Minecraft" on Xbox.com. I used Jacob Nelson's Heuristic Evaluation and caught a few usability issues that can be improved.

RESEARCH / COMPETITIVE ANALYSIS

Discovering best practices and identifying the helpful ones for Xbox.com.

To understand where Xbox search stands in the market, I conducted a competitive analysis of the search experience of competitors, leading companies, and streaming media companies. After seeking general best practices, I explored what practices can benefit Xbox particularly.

1. A sample search query can be helpful

 For sites with diverse products such as Nintendo and Netflix, they inform the user what types of information can be searched by giving a sample query. Xbox has games, devices, accessories, community, and more. This can be helpful.

Example from Nintendo

2. Allow the user to choose sub-section  

Because whether the search bar is for Microsoft or Xbox is confusing, allowing a user to make the selection can give them more control.

Example from PlayStation

3. Related results are helpful to other sites, but it's not appropriate for Xbox

Xbox includes too many types of information, from product information to news blogs. It’s challenging and unnecessary to associate information in the search result level. This can be achieved better in the end result page.

Example from Netflix

DESIGN / WIREFRAMING

Iterating for the best solution.

After getting the insights from the initial evaluation and the competitive analysis, I went through a long process of exploration and iteration. In the end, I delivered mockups for the search bar and wireframes for the search results, since the results page requires more changes in the overall structure instead of details.

Final Design

After two client reviews, my design recommendations received positive feedback from the client and was planning to run usability testing next.

Knowing what you can search right away

Added sample search query
Allow the user to switch between searching Xbox and Microsft
Added popular links to quick links

Refining search terms easily with suggestions

Added labels to suggested searches and quick links
Used a new layout for quick links when the user starts typing, so they know these suggestions are tailored