Meet Bruce & Dave, the future owners of the store.
My first order of business is to find out what they need from me and to gather user and system requirements to meet their business objectives.
Below are the findings.
Step 1: Business Alignment
Users
-
Competitive Fighting Game Players
-
Competitive Trading Card Game Players
-
Casual Gamers
Branding Needs
-
Evoke nostalgia
-
Embody the culture of the surrounding city
Stakeholder Interviews
Design Criteria
-
Mobile first
-
Store Location
-
Store Hours
-
Upcoming Events
RetroEdge Games:
A Case Study Showcasing Deep Qualitative Research and Viscerally Beautiful Design
About
RetroEdge Games is a 3rd place for video gamers and trading card game players and they are going to open a brick and mortar locations soon.
Business Goals
Create a website that represents a 3rd space within the local community that hosts competitive fighting games and trading card game events while also being welcoming to casual gamers.
Roles & Timeline
Roles
UI/UX - Me
Graphic Design - Jonny
Engineering - Aaron
Timeline - 2 Months
As-Is Website
The as-is website that we started the project with was a simple placeholder website that had branding that the owner was open to changing and some social media handles.
Step 2: Understanding The User
Competitive Audit
I compared 20 competitors to understand what gamers expected to see on a website.
Users Expected to See:
-
Images of franchise characters
-
A full calendar of events
-
A Discord link for event scheduling
Round 1/3: Discovery Reaction Cards
Defining the website's functionality was easy, but creating an evocative experience required in-depth qualitative research.
Using the as-is website, we conducted the first of three discovery-focused reaction card sessions with 24 participants (8 per user group), asking which keywords described the current interface and their ideal version.
Step 3: Define
I worked with the other designer to pinpoint the mode of positive and negative feedback to understand what users expected to feel when visiting it.
And we honed in on what "nostalgia" meant for a younger generation.
Findings 1:
People expected the future interface to evoke -
-
Fun
-
Lively imagery with people enjoying themselves in the store
-
-
Exciting
-
A high variety of events
-
-
Connected
-
Competitive users sought owner credibility, while casuals valued safe connections with friends and family.
-
Findings 2:
"Retro" & "Nostalgic" to our typically younger user base echoed more 00s than it did late 80s and early 90s contrary to the owner's beliefs.
Our demographic of 18 - 34 year olds sited retro and nostalgic being things like MySpace, 00s Games and cartoons.
Analysis
Step 4: Design
Here we sketched out screens and user flows.
My goal is always to answer the most questions at the lowest fidelity.
We worked out roughly how we would incorporate all of our finding.
Sketching
Wireframing
Here I do some wireframing to answer technical questions about word counts and asset dimensions.
And a monthly calendar for competitive types which is something we learned during our competitive audit.
Hi-Fi Prototyping
Here's how I incorporated our research findings into a final prototype that felt angular, retro, fun, exciting and connecting.
New branding that is angular and vibrant like 00s art but also funky and hip hop inspired like the city that the business is in.
Satisfying "fun" & "connected" by showing people having fun in store as indicated in our reaction card study.
Showing franchise logos and branding as indicated by our competitive audit study.
Making space to tease upcoming events to build "excitement" as revealed from our reaction card study.
And much much more to discuss if you invite me in for an interview :)
Step 5: Test / Retest
Testing & Retesting
After the prototype was completed and delivered to the business owners for approval I conducted two more rounds of reaction cards across 48 more participants recruited from video game tournaments and snowball sampling.
The second round of reaction cards was meant to sus out minor issues. The issues we found:
-
Missing store times
-
Overly "hammy" AI copy
-
Typos
The third and final round of reaction cards only saw a marginal increase on the previous iterations but was still nearly double the initial as-is website score, meaning that we had reached a point of saturation and additional testing wouldn't be necessary until more major changes were introduced.
Step 6: Delivery
Launch
The website was implemented 1:1 through close collaboration between myself, the engineers, and the owner.
And the store opens to a wonderful success complete with the branding I designed on display
The website was implemented 1:1 through close collaboration between myself, the engineers, and the owner.
And the store opens to a wonderful success complete with the branding I designed on display
Testimonials
"This took our store to the next level! The website would have never come this far without help from this team!"
-Business Owners
-Gamer Dad
"Man! This hit me right in the childhood!"
-Competitive TCG Player
"A lot of these local game store websites usually suck and this is CLEARLY not one of them!"
