Versus Gaming
Redesigning a Local E-Commerce Store for TCG Community Engagement
Deliverables
3 Product Designers
Nov 2024
Context
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.
My Contributions
The Challenge
Versus Games is aiming to improve their checkout process to increase purchases made and help users find and purchase tickets to relevant events faster.
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
A glance at their current website and the heuristic violations.
Their current site map was convoluted and caused confusion in user navigation.
Versus isn’t missing that many features, but it lacks the capability to do them well.
Research
Interviews:
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.
Key Insights
I discovered there were 2 main groups of users:
The Collector
Interested in collecting certain cards, whether they’re rare or unique etc. Often buys booster packs in bulk or specific cards for aesthetic reasons.
The Player
Interested in playing and versing others in the tcg, whether its casual or competitive. Newbies tend to collect pre-built decks, while more experienced players look for specific cards at best prices.
Why bother going to a Local Game Store (LGS) instead of Amazon?
Community builds loyalty and engagement
Players are typically loyal to multiple LGSes, but only around 2-3
Players usually go to events to socialize with the regular player base and employees.
Ok. but why visit their website?
Check out what new events there are, or double check the details on known events
Check stock of item before heading into the store
“I love my LGS & just hanging out there has made me spend a lot more money than I intended.”
User A
“I go to be social, and go to buy a pack. I like to support them, especially because they’re local.”
User B
forge player loyalty and better guide users to relevant events and items to increase purchase conversion?
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.
Mid Fidelity Wireframes
Usability Testing
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.
Final Designs
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.
A snapshot of the components created.
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 :)