UX/UI Designer | Game Narrative Designer
Next-Gen Games Website Redesign
A Better Way to Find Games
When redesigning Next-Gen Games' e-commerce site, my goal was to create a better way for users to discover and buy Next-Gen's tabletop games online. The current site is disorganized and inconsistent with their categories and filters, making it challenging for customers to find the games they want or to find new games they may want to play.
Project type
E-Commerce Website Redesign for Desktop
Role(s)
(Solo) UX/UI Designer - Research, Synthesis, Ideation, Wireframing Visual Design, Prototyping
Tools
Figma, Google Suite
Timeline
October 2024, 3 week sprint
Selecting a Website for Redesign
Next-Gen Games (which I will be referring to in the rest of this case study as “Next-Gen”) is a local game shop near me whose business and space I’ve appreciated, being a Magic: The Gathering player. Since I had also come from a game design background, I wanted to redesign a games-related website.
User Experience Issues with Next-Gen’s Current Site
Homepage Heuristics
During my preliminary research on the site, I found multiple issues with the homepage alone:
​
-
The announcement banner occupied too much vertical space on the screen, which prevented users from seeing Next-Gen’s main products at first glance.
​
-
When I scrolled down, the first thing on the homepage was a hard-to-read banner indicating that Next-Gen did not ship products and offered in-store pickup only (I missed it myself at first glance).
-
Then right under it was a listing for clothing merchandise for Next-Gen Games, which would not be immediately relevant to Next-Gen’s primary customer base of tabletop gamers.
Menu Navigation
The header menu was cluttered with many different categories, which was overwhelming and tricky to navigate. There was no immediately visible search bar, with the user having to click on the search icon on the top right to bring up a search bar.
​
Additionally, there was a format inconsistency in the menu tab names as all of them were in all-caps except for “Gift Cards.”
User Interviews
I found six people for user interviews to learn about their game purchasing habits and what types of tabletop games they played. When sorting my findings on my affinity map, I found that the users I interviewed fell into two groups:
-
Regular TCG/TTRPG/board game players and Next-Gen customers
-
Casual board game players
When interviewing the regular tabletop gamers and customers, I asked them more additional specific questions about their respective games, namely Magic: The Gathering, and experiences with Next-Gen. They typically shopped for games and game materials in-person at Next-Gen Games or online at other sellers like Amazon or Etsy. If a game material, like a binder, was out of stock at Next-Gen, they turned to other smaller local game shops.
Their experiences with going to Next-Gen Games in-person were generally positive as the regulars also went to Next-Gen to play games in their space. One user even mentioned one of the staff members introducing him to the Pokémon TCG and teaching him how to play.
The casual board gamers shopped for games through big online sellers like Amazon and Target. A couple of users mentioned going to Target in-person as well due to their board game sales. They also mentioned sometimes checking local game shops, but not that frequently. A couple of users also noted that they wanted to try playing Dungeons & Dragons, but the main blocker in starting was their difficulty in finding groups to play with consistently.
In order to lead into my main usability test of finding a new game to try out through Next-Gen’s site, I asked all users how they discovered new games, with all of them saying that they discovered new games through friends, family, and word-of-mouth.
Usability Testing of Next-Gen’s Current Site
Following each interview, I had my users conduct usability tests on Next-Gen’s current website. The task I gave all of my users was to find and buy a new game.
Most of my users were frustrated and did not feel like the site was conducive to helping people discover new games to play. The main reasons being the lack of descriptions about the games on the product description pages and the category filters only having options to filter by game company rather than anything informative about the games themselves such as genre, number of players, and play time.
Half of my users ended up selecting games based on box art that caught their eye. One user searched for information on his chosen game on different board game review sites after the PDP did not give him any information about the game. One user even gave up on actively finding a new game and chose a random game that had the Star Wars IP attached because the IP was familiar to him.
I gave my three regular player users additional tasks of finding and buying a sealed Magic product and buying a single Magic card through Next-Gen’s Magic Singles link. All three of my users searched for a sealed product from the most recent Duskmourn set, with two users going for individual booster packs.
However, the users who searched for booster packs experienced difficulty in finding the booster packs because when they navigated to the Magic product listing page and used the Duskmourn filter on the side, the filtered results did not display all available Duskmourn products. This led to them getting frustrated and using the search bar to search with the keyword “Duskmourn,” which gave them all Duskmourn products in the results, including the excluded products. From there they were able to purchase their desired booster packs, but one user noted frustration at how he felt like he had to jump through multiple hoops just to get a single booster pack.
The Magic Singles link led to an external link for TCGPlayer. As most of these tests ended up mainly showing functionality issues on TCGPlayer’s side, I decided to cut the Magic Singles link in my Next-Gen website redesign for simplicity.
When testing the checkout process, the users who were not based in Los Angeles were surprised when the only delivery option available was store pickup and wished that they could have received that information about Next-Gen doing store pickup only earlier in the process and more upfront before they had to enter their personal information (notably showing that they all missed the hard-to-read notice on the homepage giving this information).
Creating the Wireframes for the Redesign
Between my two groups of users, I decided to build my redesign for the TCG/TTRPG regular Next-Gen customer as they were the group that would visit the Next-Gen website more frequently to make purchases. After compiling all my user research data, I created a persona representing this user group called Jordan.
The task flow I decided to pursue for my wireframes was that of purchasing a Magic: The Gathering product since it was specific in its objective. This task flow best reflected a common task of the main customers who would be using Next-Gen’s site since they would know what products they were looking for going into the site.
I researched different game seller e-commerce sites to draw from for inspiration on how they formatted their pages and listed their products. The main sites I used were those of GameStop, Nintendo, and Level One Game Shop (see below). I also added a more legible disclaimer that Next-Gen offered only in-store pickup and did not ship products.​​​​
Game E-commerce Site Inspiration
-
They listed their new arrivals and upcoming preorders on the homepage along with some featured products.
​
-
In their headers, they all had a visible search bar.
-
Their announcement banners under the header took up only a portion of the screen, so some of the new products were still visible underneath it.
​
-
The product listing pages were formatted similarly with all the products displaying in a grid.
My Sketches for Wireframes
I incorporated the designs of the sites I used for inspiration to create sketches before making wireframes in Figma. I moved the map and store information that were at the bottom of the homepage down to the footer to better emphasize Next-Gen’s game products and tournament sign-ups as the key elements on the homepage.
​​​
I mainly incorporated the spacing and surrounding frames to better separate and distinguish the different products from one another into my redesign of Next-Gen’s PLP.
The next major change I made on the PLP was on the category filters on the left side of the page. Focusing specifically on Magic: The Gathering, I created new filters for set and product type as my regular customer users mentioned in the usability tests that having filters for each Magic set and type of Magic product would be helpful in narrowing down their search to the exact product they wanted.
The PDP didn’t experience any drastic changes in formatting, but the most important addition I made was adding a product description below the image of the product. The description provided a brief blurb of what the product was and what materials it contained. I also added the “store pickup only” disclaimer below the add to cart button as part of users’ feedback wishing that information was presented early and was more clearly indicated on the site.
On the checkout page, I moved the delivery section to the second section of the form, with store pickup being the only option and selected radio button available under the delivery section. This allowed users to save their time in filling out the rest of the form, by presenting Next-Gen’s pickup only delivery option early.
Updating the Prototype to Hi-Fi
When selecting my site colors, I incorporated Next-Gen’s logo colors into different parts of the site, so I could make the site colors cohesive and consistent with Next-Gen’s logo and brand. I chose the logo’s yellow for the action buttons and menus and the black for the header and footer backgrounds.
I kept the rest of the colors simple, using black for text and white and varying shades of gray for the site background, product frames, windows, and filters. This allowed the site to have a simple, yet striking look that was unique to Next-Gen and kept their main brand colors.
I pulled product photos from Next-Gen and Google that showcased the full product with clear resolution for my PLP and PDP. I specifically used the tournament registration images from Next-Gen’s current website to coincide with their accurate tournament dates during the project’s duration.
Key Takeaways
Through this project, I learned how to analyze a website for ease of use more precisely by using Jakob Nielsen’s 10 Usability Heuristics and identifying specific ways a website may be easy or difficult to interact with.
When I reached the visual design process, I wanted to maintain Next-Gen’s brand colors even while doing an overall of the original site’s design. I extracted the color palette in Figma and then learned how certain colors can emphasize an object as important on a page.
Possible next steps I have for this redesign in the future is making all the scroll bars and menus functional and clickable to create a different task flow (e.g. registering for an tournament)