Enhancing the video game search experience
SwitchSearch
While I was in my UI Design Course at Columbia University, I decided to take my midterm project - creating a CRUD application (create, read, update, delete), and turn it into a redesign UX project, centered around the Nintendo Switch. Over 3 weeks, I designed and developed a platform where users could effectively see and add information about their favorite switch games.
The Solution
-
Create a website with a backend database that allows users to fully interact with content (create, read, update, and delete).
-
Design an improved experience of searching for video games (in context of Nintendo's website).
How might we help users efficiently learn more about the different multiplayer games they can play on the Nintendo Switch Console?
The Problem Statement
Project Overview
UX, UI Designer
Front-End Developer
Role
3 Weeks
Feb. - Mar. 2022
Time
Figma
Flask (Python)
HTML, CSS, JavaScript
Tools
Design Process
Final Product
User Testing & Iteration
Prototyping
Ideation
Context & Pain Points
• Context
& Pain Points
For my midterm project, I was tasked with creating a website with a database that users could create, add, edit and delete information from. The theme could be anything we wished it to be.
A lot of my family and friends were in console gaming, so I decided to turn my regular web dev assignment into a UX redesign project, centered around Nintendo's Switch console games.
Before I got to doing any designing or coding, I decided to take a look at how Nintendo handled their large database of games and their user experience behind searching and browsing. This helped identified pain points that I could improve on in my re-design.
Aside from less at-a-glance info, some other notes:
-
Filters on the side make it easy to find games based on interests. But, most games on the switch currently are single-player, so for multiplayer games, users HAVE to filter.
-
Search is hard to see in the top-left. This means this site favors browsing vs. searching, which can be a disadvantage to those who want to find games to their tastes efficiently or quickly.
Overall, Nintendo's website emphasizes on graphics of all their games - leaning towards viewing images as much as possible. There's a lot of white space in each of these game cards, giving a lot of emphasis to the cover images.
However, aside from price & game title, there's not much else about these games that users can view before clicking in to view more information.
Pain Point #1: Simple Game Info for Browsing
Notice all the game results above have "racing" in the title. However, for a list that's considered as 'featured', we don't see some of the more well known racing franchises, like Mario Kart.
Suppose a user wants to look for racing games. In the realm of Nintendo, there are lots of racing and car-related games out there, some more recognizable than others. When a user searches for a game on Nintendo's site, the keyword only applies to the game or product's name, not the genre or descriptions of that game.
Pain Point #2: Searching only by Title/Name
Pain Point #3: Digging for Game Information
For seeing individual game information, emphasis is placed on gameplay, graphics and price for purchase. However, other relevant information is only seen after users scroll.
If a user is just sees the gameplay and buy a game, this layout is pretty ideal.
For users who want to see more information about the game before buying, this format isn't easy to read clearly. The statistics like no. of players, genre, play modes and rating aren't easily discoverable and could be easily missed compared to the eye-catching visuals at the very top.
• Ideation
Since the project was on a short 3-week timeline, I sketched out quick ideas for the home and game info UI pages, taking into consideration the pain points I found. During this process, I thought about what information could be seen as important for at-a-glance versus supplemental information. After doing sketches I designed mid-fi mockups in Figma to better visualize possible solutions.
Initial Sketches
Mockup v1
Mockup v2
• Prototyping
After coming up with initial designs, I created a working web prototype with HTML, CSS, and JavaScript - no database attached. The goal was to create a mockup to take to users for testing.
Key Finding #1
Just because it's at the top, doesn't mean it's easy to glance
Visual hierarchy is very important when presenting information, and for 3/5 users, the layout of having all the information about a game across the page didn't really make it easy to process. Plus, the star of the game, the graphics, now took a back seat, which users wished wasn't the case.
Solution
Place game info on one side, highlight graphics on the other
First Prototype
Iteration
Key Finding #2
The power of contrast - light mode vs dark mode
Light vs. Dark has been a common motif everywhere, not just in stories. Most sites start out with a white or off-white background - the same is true of Nintendo's original site. However, when viewing my initial prototype, 4/5 said they preferred for a dark mode, especially in the context of games. Why?
-
Dark mode puts less stress on the eyes. Not that everyone will be searching in the dead of night, but having dark mode makes it less straining to read information.
-
For games, a lot of users thought the visuals popped out a lot more against a dark background, almost as if they were cinematic.
Solution
Cinematic Visual Theme - change white background to dark
First Prototype
Iteration
Key Finding #3
Search results need to be clear and efficient
Being able to search by more than just title is great, but sometimes games don't explicitly relate to search term. Going back to the racing example, games like Mario Kart Deluxe 8 don't explicitly say "racing" anywhere, yet, it's genre falls under racing.
3/5 users wished to see how their search term related to the results.
Solution
Add indicators to search results to highlight searched term
First Prototype
Iteration
Top half of the game info page contains
at-a-glance information that users might want to know:
-
Game Images
-
Ratings (Consumer + Age)
-
Genres
-
# of Players based on Game format
Viewing Game Info
Bottom half contains a textual description of the game and a video of what some gameplay looks like from real players - not necessarily promotional materials
When searching for games, users can search by any keywords they wish. Those are then applied to search through three categories: title, genre, and description. Through this, users can find games that suit their interests or by features they remember from talking with others, rather than remember only specific game titles.
Game Search Results
• User Testing & Iteration
I recruited a total of 5 participants to view and provide feedback on the prototype.
The goal of testing was to determine 2 things:
-
Test discoverability and comprehension of search - were users able effectively find for what they were looking for?
-
Learn about how users browse for games - what information do they prefer to see at the top vs. scroll.
I then compiled the user feedback into key findings and did a round of iteration. Here's what I found:
• Final Product
The final design of SwitchSearch encompasses 3 main features for anticipating gamers to interact with Switch Game information. I improved on the search experience - allowing users to search for games not only by title, but by genre and description as well. For the other 2 features (creating & updating a game info entry) I was able to get creative with how users could envision game info for themselves - outside of the official game documentation.
The entire application was developed using the Flask frame work - Python backend with HTML, CSS, and JavaScript as the front-end.
Reflections
-
Designing for users is important, but so is technical feasibility. This was the first time I had to constantly think about how my Figma designs translated to HTML, CSS, JavaScript and there lots of trials in finding the right balance of a beautiful UI and functional prototype within the time limit.
-
The first iteration is never the last one. Getting feedback from peers allowed me to reflect on my designs and make improvements to the user experience.
My Takeaways
For me and my friends, looking for good games to play has always been a challenge, especially when there's so many factors to consider: How many can play? Can I play online? Is it the type of game that we'll all like? Not everyone has time to go and check out gameplay or have the things needed to play a trial.
For this project, I focused on what visual aspects I could bring to make searching for and choosing games easier - within a 3-week sprint. As this was for a class project, there were some features that were outside the scope of a pure Nintendo website redesign, and the differing purposes behind SwitchSearch and Nintendo's website definitely have an impact on how the design of common features were done.
To help more obscure games gain visibility, users can add games to the database by entering game information.
Users can also edit the info of a game to include information that may not have been included the first time it was added.
This allows for users to creatively contribute to game info that everyone can view - from game genres and description, to new features and gameplay.