Contribution
100%
100%
Research
100%
UI Design
Product
Role:
Product Designer
Timeline:
2 Weeks, Nov 2024
Background
Local game stores (LGSes) serve as essential community hubs for Trading Card Game (TCG) enthusiasts. Versus Gaming, located in San Francisco, not only sells TCG merchandise but also hosts in-store events, including tournaments and card set releases.
Note: This project was completed for the UX Immersive Bootcamp at General Assembly and is not affiliated with Versus Gaming.
As the sole designer, I had a fun time working with such an amazing local business in mind though, so I hope you enjoy!
Just Interested in the end? Click to skip to the final designs!
Versus Games is aiming to improve their checkout process to increase purchases made and help users find and purchase tickets to relevant events faster.
The Challenge
Learning the Landscape
Goal:
Understanding the target users - the local TCG player base.
Discover Versus Games’s current site functionality and to discover user pain points during the checkout process for items and events.
Methodology:
Heuristic Evaluation, Accessibility Audit, Site Map, Competitive Feature Inventory, User Interview, Usability Testing, Card Sorting
Interviews
I interviewed 3 current TCG players to get a better understanding of the player base, two of which often frequented LGSes. I also conducted 6 usability tests, all of which considered themselves “tech-savy” and frequently purchased hobby items online. The usability test consisted of 4 tasks - purchasing a deck and an accessory, keeping a tab on sold out items, registering for an instore event, and returning a product.
Usability Testing
Usability tests indicated that the current checkout flow was very confusing and often lead to users dropping off before being able to purchase an item.
From all of the needs uncovered in the usability test and interviews, I determined a how might we statement and created a persona of the player type.
forge player loyalty and better guide users to relevant events and items to increase purchase conversion?
How might we...
Design Process
To improve the navigation and labeling, I conducted an open card sort. Key insights were that categories were generally split 50/50 across sorting by franchise versus item type (Ie YuGiOh Vs. Accessories), but users understood the word “accessories” to refer to things like dice, card sleeves, etc. From that, since Versus is geared particularly toward the franchise Magic the Gathering and Pokemon, I created a new site map that focused on the store specialties and ensured a 3 level navigation at most.
After deciding on the site map, I began mapping out the wireframes in Figma.
Mid Fidelity WireFrames
Then came a round of feedback and iteration, where I asked 2 product designers for feedback focusing on 1. if elements were recognizable and their purpose clear 2. if the site navigation made sense . While overall the functionality was well received, some UI suggestions included making the prices stand out more, adding places for captions to the images, as well as removing the advance search due to potential confusion.
High Fidelity WireFrames
Taking into account the feedback, I moved on to higher fidelity wireframes. I picked a color pallet based off of the physical storefront’s theme, with the intention of increasing familiarity and recognition to the users who would frequent both store and site. From there, I conducted another round of feedback from a class of 12 other designers. The users really liked the “vibes and theme” of the redesign, providing positive remarks on the color and font choice. However, a couple mentioned still feeling a little overwhelmed by the amount of activity on the front page.
Thus, I decided to revamp the grids of the design, increasing the margins significantly, as well as increasing spacing between and adding a red gradient on the front page to unify the elements.
Reflection and Next Steps
From the results of the interviews, an essential next step would be improving the account registration and membership flows due to the importance of “feeling like a regular”.
It was really awesome to work on a project for a local business that contributes to the. I look forward to Versus’ continued community :)
Redesigning A Loved TCG Hub for Community Engagement
Versus Gaming:
