Giving Gamers What They Need

Designing a place for gamers to come and learn where to play

The problem
Who solved it
How I did it

A local game store needs someone to design and implement a new website using a content management system giving them the opportunity to update the information as needed. 

I was the only designer on this project but I collaborated with the primary stakeholders based in the greater Chico area.

Tools that I used were:

  • Sketch

  • Adobe Illustrator

  • Google Suite

  • Zoom

 

Methods that I used were:

  • Competitive and comparative analysis 

  • Wireframes

  • User interviews

  • And more

The Opportunity 
 
  • Heroes Corner is an independent business that sells non-digital games and hosts local gaming tournaments for their consumer base in the greater Chico, CA area

  • I approached the current business owner about this redesign because of my long-standing personal history with the business. Prior to the current ownership, I was a former employee and co-owner of the business during my teenage and young adult years.

  • This community was crucial to my development at this young age, as it provided a creative outlet for me to meet others with shared mutual interests. This type of outlet was not always easy to find in a smaller regional city.

  • My personal mission is to use my technical and design skills to build and strengthen the community. This project was the perfect opportunity to fuse my professional and personal interests together to support a local community and small business.

 
The Challenge  
 
  • Heroes Corner had two primary goals for this website redesign. First, users had to be able to easily navigate the webpage to identify business hours and their robust event schedule. Gaming stores like this one make their greatest profit through in-store events, where contestants purchase everything from gaming accessories to food and beverages. Second, the client wanted an “About” statement that better defined the identity of the business.

The Solution
  • For working on a limited budget for version 1.0 of the website, the client and I agreed to keep the focus on in-store events, information architecture, content strategy, and site navigation. This also meant that I was only going to be designing two separate screens with more to follow in the near future.

Comparing the competitors 

I started with what my client was able to tell me about their primary user group. Being a gamer myself and a regular customer to this store, I had to step away from what I personally wanted to see and design for the community at large. Once I gained further insight on this customer base I moved onto a comparative and competitive analysis of other game stores that currently aren't focusing on online sales through their website. 

I researched multiple websites but I settled on Black Diamond Games and Matrix Cards & Games for ease of use, comfortable feel, and welcoming tone. 

Black Diamond Games

I adopted how Black Diamond Games used their header to let their users know the basic necessities of a storefront, ie the address, phone number, and hours of operation. Allowing users to see the most important information immediately and prominently makes it easy for a user to contact or visit the store.   

Matrix Cards & Games
Matrix Cards & Games Content

I adopted how Matrix Cards & Games set the tone for their written content. It emphasizes being family-owned and community-oriented allowing gaming space for gamers of all skill levels and kinds. This instills the feeling of acceptance in individuals who may not have had a welcoming experience when trying to join or be part of other groups, especially in younger generations. 

Something most share
Featured Brands 1
Featured Brands 2

I adopted how most of the competitors showcase what brands they carried in-store. I put a twist on it by having all the brand images link to their perspective websites, which shows more information about the game and instructions for how to play. This allowed Heroes Corner Games to become an aggregate for learning about new games while also giving information about a convenient place to play.

Gamers talk 

I was actively attending tournaments at Heroes Corner and other local gaming stores while supporting this project, and used this as an opportunity to conduct user interviews. Being a long-standing gamer myself, and knowing the jargon associated with the community, allowed me to quickly build relationships with these game store customers and gain very valuable insights from our conversations. 

Some of the most relevant insights;

  1. Bright and flashy interfaces aren't what they are looking for anymore. Users want something clean and easy to use, "Not like a retro video game interface".

  2. The majority of users are looking for information about scheduled tournaments, hours of operation, and store location/s.

  3. Users want to easily identify if a store provides "free play" (the ability to play in-store without a fee, subscription or membership) or if you can only attend scheduled tournaments.

Designing starts here 

Once I had a firm understanding of user's expectations and needs, I transitioned into creating some low fidelity wireframes. I focused on designing for in-store events, information architecture, content strategy, and site navigation.

Low Fidelity
Home Page Wireframe
Low Fidelity Heroes Home
About Page Wireframe
Low Fidelity Heroes About

One unique challenge in this project was how to navigate regular check-in meetings with my client. Heroes Corner is based in Chico, CA, which is close to 170 miles from my location in San Francisco. We settled on daily communication via email and weekly phone calls so I could keep them updated on my progress.

Additionally, to keep the timeline of the project on-course, the client and I agreed on a limit for the number of iterations per phase of the project. As a result, the development of the high-fidelity wireframes was more similar to the low-fidelity mockups than on longer-term projects. I was able to implement the website using Wix, a content management system.

High Fidelity
Home Page Wireframe
Styled Heroes Home
About Page Wireframe
Styled Heroes About
From designer to developer  

For this project, my client didn't have a website or the means to create one themselves. Instead of handing my finalized designs over to a developer in a spec document, I transitioned from my role of UX/UI designer to developer. However, before that could happen I had to put in extensive research to determine which content management system should be used to allow for the most uninterrupted growth. I researched SquareSpace, Cargo Collective, Wordpress, and Wix. I decided to go with Wix because it allowed for a large amount of freedom, greater than what SquareSpace and Cargo Collective provide (and it was easier to learn than Wordpress!). Selecting an easy-to-use platform was crucial for this project, as I would need to teach my client how to make basic changes to their website by themselves.

 

Having settled on Wix, I started creating the website. As I had prepared all my work up until this point -- research about my client's primary user base, the comparative and competitive analyses, and the informal user interviews and having my high fidelity designs -- I was able to code and launch the live website in a little under two weeks time.

The final deliverables
  • Mid to high fidelity mockups of all the screens included in version 1.0

  • A live website with an interactive calendar. 

  • A short informal introduction on how to use Wix.

 
Thinking back

  • My research gave me a fairly solid understanding of what people expect to see when using a game stores website.

  • I would have liked to do more user interviews.

What I learned

 

  • How to Wix and some of the pros and cons of various types of content management systems. 

  • Better time management skills. 

Thinking to the future
  • I'm looking forward to continuing this project in the future 

© 2018 CJ Zarback | UX/UI Designer - Prototyper - Gamer