Background
Where my games at? 🕵
How do you search for something on your favorite online platforms? Typically, you would use a search bar, enter your query, and related results would pop up.
My individual project aimed to improve findability, usability, and discoverability on the Battle.net app, by designing a search bar feature, which I will refer to as a “type-ahead filter” because search is a loaded term.
Current Experience
A not so simple search 🔎
The Battle.net desktop app does not have this kind of feature currently, limiting browsing functionalities and a player’s ability to find the games they are looking for in the platform.
Going into this project, I thought that this would be a simple task, but throughout the design process, a lot of design aspects and technical constraints that I did not consider at first, made the process more complex than I originally thought.
Future findability improvements to Games page
Current Games page experience
Competitor Analysis
You can't sell a product customers can't find 🛒
From competitor analysis, I found that ways to improve findability were to: include autosuggestions and autopopulation of search results, the search feature must be highly visible for users to access, and ensuring users are redirected when they receive no search results.
User Journey
From a visual to a functionality mindset ⚙️
Although this project was for me to design a new feature, I initially did not map out how this new feature would work. I instantly jumped into visual design of the search bar, but soon after realized that visuals were not as important at this stage: functionality was.
After discussion and feedback with my team, I sketched wireframes and created user flows to map out the user journey, from when they first interact with the search bar to when their results appear. This process allowed me to think of the different use cases of the search bar, how results would populate for the user, and what happens when there were no results.
From a visual focus…
… to a functionality focus!
Design Feedback Management
Presenting and evaluating my designs 🔎
I designed two different functionalities for a phase 1 of this feature, where I created user flows, and low-fidelity prototypes to demonstrate how a user would navigate through each functionality. I presented them to the entire Battle.net and Online Products design team to gain valuable feedback on which direction I should go with.
Managing all the feedback from the designers was one of the hardest parts of my project, because there was a lot of different opinions and I had to make the decision independently. After deliberation, I ultimately decided to go in the direction of functionality 1 because:
The large majority of the designers preferred this direction as the user flow was much simpler than functionality 2, which was much more complicated.
The flow of functionality 2 felt like “the pages were competing with each other”.
There are technical feasibility issues with search history, as currently search history would be saved locally on a player’s machine instead of on their account.
Additionally, the game library does not have a lot of games, so functionality 1 makes more sense for the current library size.
Designer Collaboration
Design is not in isolation 🖌
Another full-time designer on my team was designing filters that were going to be on the same Games page. I was asked by my design team and PM to also consider how her filters and my type-ahead would work together on the same page (if at all). After communicating with the designer, I decided that for a more short term solution, the type-ahead and filters would not interact because they are different types of discovery (active vs. passive).
This obstacle demonstrated to me that features never work in isolation. The design process is not linear, and requires me to be adaptable and flexible.
The interaction between type-ahead filter and search filters
Cross-Functional Collaboration
Happy Paths, Edge Cases 🗂
After finalizing the functionality and user flows of the type-ahead filter, the next step was to do story mapping where I made screen flows for Phase 1. I created 5 use cases:
A user searches for a game with the correct spelling.
A user searches for a game with incorrect spelling.
A user searches for a game that does not exist in the game library.
A user searches for a game, but then wants to filter out a genre of games.
A user has filtered out a genre of games, but then wants to search for a game.
I successfully presented these flows to a team of engineers and lead principal PM, where I clearly communicated my design decisions, including: how I intended for the type-ahead filter to work in each use case, how results would populate, blank states for a user, etc. During this session, the engineers and PMs started writing JIRA stories to build this feature, and started work on it during a sprint towards the end of my internship.
Storymapping of all use cases for the type-ahead filter
After further feedback from other designers, engineers and product managers, I designed high fidelity screens to demonstrate the feature in action.
Improved findability and discoverability 🧭
New and current users are able to efficiently search for game titles they are looking for, as well as discover suggested games as they interact with the type-ahead filter.
Personalization 🧑💻️
The addition of this feature adds another level of personalization to the app for players that was already seen in other competitors, and will help the design team gain data on what players are actually searching for.
A starting point ▶️
This phase 1 design would act as a starting point for a wider range of player use cases in the future, such as searching for game genres, in-game content, news, etc., and understanding what users are actually looking for within the platform for a more personalized experience.
On top of these more feasible designs, I also had the task of designing what my ‘ideal search feature’ could look like across the entire app (not just within the games page) if there were no technical or political constraints.
I designed wireframes to explore how results would populate on a larger scale, and how an ‘All Results’ page would look like. This was a fun task to allow me to be more creative and think more long term.
Larger Scale Search
In the future, I believe a more global, powerful search would elevate the entire findability and discoverability experience within the app. Users could have the ability to find things on top of just game titles, such as in-game content, news, game genres, etc.
All Results
Users can browse through an 'All Results' page, so users are not just limited to a small window and can explore all content that is related to their search input.
That's a wrap!
Overall Key Learnings
Importance of designing for functionality
Design feedback management
Cross-functional collaboration and communication
If I had three more months I would…
Work with the desktop app design team, engineers and PMs to:
Implement the phase 1 version of the type-ahead filter, focus on the visual design of the type-ahead filter
Conduct user testing to identify strengths and weaknesses of my type-ahead filter, and make improvements based on the success metrics.
Team picture!
The famous orc statue!
This was my first design internship in industry, and my time here has solidified my decision to continue a career in UX design. This is all thanks to the amazing people I’ve met and the incredible experience I’ve had over the past 3 months!