FUNCTIONALITY FOR FILTERING
Duration:
June - Sept 2024
Company:
Blizzard Entertainment
Role:
UX Design Intern on Battle.net Application Design Team
Enhancing usability and findability within the Battle.net desktop app, by designing a search filter feature.
Seemingly simple search feature...?
Current Experience
Future findability improvements to Games page
Current Games page experience
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.
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.
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.
Going into this project, I thought that this would be a simple task, but throughout the design process, a lot of design aspects that I did not consider at first made the process more complex than I originally thought.
With cross-functional collaboration between other designers, engineers, and PMs, I built a type-ahead filter to improve the player experience on Battle.net, considering aspects such as its functionality, technical feasibility, and use cases. As a player types into the type-ahead filter, the search results will automatically populate on the games page based on user input. Users can refine their search and efficiently find the games they are looking for.
The Solution
An efficient path to find game titles 🔎
At the beginning of my design process, I did competitor analysis to better understand how similar platforms have designed their search features. I looked at not only direct competitors to Battle.net, but also platforms where I found search features useful, like Netflix and Amazon.
From my research, my proposed ways to improve findability were:
Autosuggestions and autopopulation: most competitors provided autosuggestions - a user typically knows what they are looking for, so the platform should provide a quicker way to find the game/product they are looking for
The search feature must be highly visible for users to access
Redirecting a user when they get no results in a search.
Competitor Analysis
You can’t sell a product that your customers can’t find 🛒
Design Process
From visuals to functionality ⚙️
After competitor analysis, my initial approach was to sketch out wireframes and focus on the placement of the search bar on the Games page for a phase 1.
After presenting these initial designs to my design team, I received feedback that suggested that the different placements of the search bar communicates different functionalities to the user: by placing the search bar on the left, a user may assume they can search across all games, regardless of the category. By placing the search bar on the top right, users may assume that they can only search within the current category they are on.
My first key learning for success: I did not think about the functionality of the search bar before sketching out the visuals. This feedback transformed how I approached the rest of the project, as I shifted my mindset from designing for visuals, to designing for functionality.
Visual focus
Functionality focus
Design Feedback Management
Searching across all categories vs. within categories 🔎
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
Incorporation of search filters 🖌
Interaction between type-ahead filter and search filters
Cross-Functional Collaboration
Happy Paths and 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.
(Future work) A user searches for a game, but then wants to filter out a genre of games.
(Future work) 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.
Simple way to search for games
Final P1 Design Solution
Previously, there was very limited ability to actively search the Battle.net game library. My type-ahead filter improves player findability and discoverability on the desktop app platform, and as a result, will increase player engagement with the Battle.net desktop app platform. 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, and if there were no technical or political constraints. I explored 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.
Future Ideation
My ideal global search feature
Conclusion
Overall Key Learnings
Importance of designing for functionality
Design feedback management
Cross-functional collaboration and communication
Interaction between type-ahead filter and search filters
Team picture!
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.
If I had 3 more months I would...
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!
The infamous Orc statue!
SAMANTHA SAYSON