TL;DR
I led discovery, formative, and evaluative research using stakeholder interviews, competitive analysis, reaction cards, & usability testing to rebrand a business & launch their first website.
Project Background
As-is Website
All we had to work with at the moment with at the moment was a placeholder announcement website with some branding that was made by a designer in fiver.
Project Background
RetroEdge Games is a video game and trading card game venue set to open in 2 months.
Roles
UXR, UXD, PM - Me
Graphic Design, UI - Jonny Nava
Engineering - Aaron Rodden
Business Goals
Create a website that represents a 3rd space within the local community that hosts competitive fighting game and trading card game events while also fostering an atmosphere that is welcoming to beginner and casual gamers.
Step One: Understanding The Business
Stakeholder Interviews
Meet Bruce & Dave, the future owners of the shop. Because we're starting from zero, my priorities were knowing who they felt their users were, what context they were using this site in, and what they wanted their users to accomplish.
I also added questions related to branding so Jonny could create a brand new look and feel for the business & site.
Goal
Findings
This site was going to be a mobile first, informational website where gamers, primarily fighting and trading card game players could learn more about the store and the events coming up for the month but also wanted it to feel grass roots and community focused.
We also got key information that helped Jonny nail down their visual style and brand language.
Results
This site was going to be a mobile first, informational website where gamers, primarily fighting and trading card game players could learn more about the store and the events coming up for the month but also wanted it to feel grass roots and community focused.
Step Two: Understanding the User
Competitive Analysis
Goal
Before we embarked on expensive and laborious research, we wanted to see what we could get for free by paying attention to the competition. By using existing gaming venue websites we can answer the question of what do fighting game, trading card game, and casual gamers expect to see in a gaming venue's website.
Study Logistics
We compared 20 different websites of fighting game venues, trading card game venues, and casual arcade venues who are direct or indirect competitors, both local and at the national level.
Findings
1. All players expect to see images of characters and iconography from their favorite games.
2. Trading card game players expect to see a full monthly calendar of events for the current month.
3. Fighting game players heavily relied on discords for match making and last minute event enrollment.
ROUND 1: Generative Reaction Cards
Goal
Here we wanted to take the extant placeholder site and put it in front of users using a reaction cards exercise.
I am of the camp that believes you can and should test whatever you have even if it's a conversation about a concept.
Study Logistics
24 participants
- 8 Casual Gamers
- 8 Fighting Game Players
- 8 Trading card players
Recruitment
Attended competitive events to get
participants and recruited on Discord.
Data Capture & Scoring
1 by 1, participants are asked to read off 60 words and declare whether this word describes the interface or not and why. Yes for positive words = +1, Yes for negative words = -1. They then choose a top 3 that will add weight to those words, and then choose which 3 words would embody the most ideal version of the website they could imagine.
We used this data to assign a total score we could track and also give us a North Star for what we should build.
Analysis
I looked at words that reoccurred the most and focused on why they were coming up so much by listening to the audio for each participant.
I sat down and analyzed these themes and findings with my graphic designer to agree on what assets our prototype needed.
Findings
1. People found the concept exciting and felt the dark theme felt "gamer-ish" (chart on the left.
2. People expected the finished product of this website to feel "Fun", "Connected", and "Exciting" (graph on the right.
Fun = Many pictures of people in store and at events on the website.
Connected = For competitive types means is this place connected to the local competitive scene through its biggest names. And for casuals connected means is this a safe place to go with their friends, significant others, or children.
Exciting = There is a high velocity and variety of events always happening.
Step Three: Design
Sketch, Wireframe, Prototype
Sketching
I worked with my UI / Graphic Designer to sketch out some of the early screens.
Our goal with sketching was to answer...
1. How many webpages do we need?
2. How many graphic assets will we need?
3. How will we organize the information?
4. What parts of the website will satisfy which components of the user and business' needs?
Wireframing
I wireframed out our sketches from earlier and the questions I wanted to answer was...
1. What sizes do the graphic design assets and the photos need to be for the mobile and desktop experience?
2. What do the business owners think about the way we arranged the information?
We invited the business owners to our wireframing session to ensure their feedback was accepted before the hi-fi.
Hi-Fi Prototype
Here I wanted to shoot for something that felt nostalgic, angular, and funky to the youth who long for the in your face design of the 00s while serving up the "Fun, Connected, & Exciting" vibes users wanted in our research.
In our competitive audits, we learned that it was important for users to see logos and characters from their favorite franchises but in many of the websites we saw, the iconography overpowered the visual design of the website.
Here, I made sure that all of our images and logos were corralled into a contained space while allowing the uniqueness of the site to shine through.
The image below is from a competitors website where the amount of logos and iconograhpy throw off the visual harmon and branding of the site.
Major Design Decision
Step Four: Testing
Round 2: Formative Reaction Cards
Goal
We're going to repeat all measures from our first round but this time using the prototype we created to see if we improved from the original concept and see what parts of the design are working and not working.
Again, we replicated all the same conditions as our previous test but with 24 new participants.
The only exception is this time we didn't ask what 3 words they felt their most ideal version of the site was.
Study Logistics
Results
We see a vast positive improvement in the site's desirability. The places where we needed to improve were...
1. Even if acronyms were spelled out, their presence intimidated casuals.
2. The copy was a little over the top and hammy for the competitive audience.
3. We forgot to add a place for the store's location and hours which made us miss out on quite a few points that were related to perceived usefulness and value
Final Round: Evaluative Reaction Cards
For our final round, we wanted to evaluate how far we've come before we implement this design and launch the website.
The goal is to see if we embodied the top 3 words users expected to feel when visiting the site all the way back when we asked in our discovery rounds of reaction cards.
Goal
Again, we replicated all the same conditions as our previous test but with 24 new participants.
The only exception is this time we didn't ask what 3 words they felt their most ideal version of the site was.
Study Logistics
Results
We nailed it!
We can see in the radar charts below that the central mass of the chart on the right indicating the desirability of the prototype is far thicker than the chart on the left indicating the desirability of the as-is site. This lets us know we've made a very desirable and valuable design.
The real magic came here when at the end of the test we asked participants to pick the top three words felt embodied the prototype the most, and as planned, the most frequent words chosen for the top 3 aligned very closely with the top words user felt the most ideal version of the website should embody when asked all the way back in our discovery phase.
As you can see the left side of the bar charts show "Fun", "Connected", and "Exciting", being the most frequently desired words and ultimately our final cohort of users almost perfectly described getting exactly that experience.
And as we tracked the raw scores of each of our iterations we tracked that each time the raw score went up each time (Round 1: 140, Round 2: 217, Round 3: 230). We did see however only a small difference between Round 2 and the Final Round, suggesting that the difference between the two was not statistically significant and we've reached a saturation point that we likely can only overcome once we are able to make more fundemental changes to the design and its purpose.
Step Five: Deliver
Implementation
The website was implemented in WordPress almost 1:1 by Aaron, with some compromises on the calendar tool as the calendar API we were using offered less flexibility than we hoped for.
But the Business Owners Bruce and Dave were stoked and proud to show off the site's new look and feel!
Launching The Website
RetroEdge Games had a successful opening day and a very successful remainder of the year!
Many people commented their love for the website and the branding of the store.
Grand Opening!
Testimonials
With a site like this whose goal is to be informative, entertaining, and represent the experience that awaits users at the brick-and-mortar location, it can be a little challenging to measure success.
A follow-up usability study with 15 participants who visited the store where we asked users to find key pieces of information vital to locating the store and participating in its current events yielded great results, a website and a business that's all about fun should be told the people.
Please enjoy some of the testimonials we received from the business owners and storegoers in person.
Measuring Success
Next Steps
Conversion Rate
At this stage, the design of the website is informative and fun, but I think the next best version of this website will focus on bringing users into the store.
A follow up survey that I conducted revealed that the site may be fun to look at but not enough to actually come into the store depending on the situation.
I wonder if i can fix that.
What I would do next?
Benchmarking
The reaction card studies were really fun and effective.
I think a semantic differential scale survey targeting the keywords we wanted to emody in the site that intercepts every nth user who logs on will allow us to track quarterly progress.
Here's an example of a data visualization in R where I did just that for an indie game that is in development.
