ETTIN GAMES AND HOBBIES

Client:      Ettin Games and Hobbies - Humble, Texas
Role:         UX Designer  •  Interaction Design • Branding • Visual Design •  UI Design

Tools: 

OVERVIEW

SCOPE:

With the rise of popularity in tabletop gaming and with Houston being the fourth largest
city in the U.S.,  Ettin Games and Hobbies is looking to revamp their website. Houston currently only has a handful of gaming stores where people can come in, buy tabletop games, and also partake in tournaments and casual pickup games.                                                                                                                                                                                                                                                                                                                              Ettin Games and Hobbies has been using the same website for a long time and in order to
keep on top of the competition and take advantage of the handful of stores in the Houston
area they want to create a platform that allows people see all the available events at their store. 

CHALLENGES:

•   Re-design their current website http://www.ettingames.com/ and turn it into a responsive website (desktop, tablet, and mobile) that covers the main functionality:  Search for events and information about the store.     

 •  Design new branding for the store based on  their current logo. 

•  Add additional functionality to the website so that their social media is directly linked to the website    and visible to customers.

ORIGINAL WEBSITE:
The owners of Ettin Games and Hobbies used their website to display event information, store information, games they play, special events, and tournaments. They also displayed their social media content. They rely heavily on social media especially Facebook.
http://www.ettingames.com/

Takeaways

User interviews suggested that the pages on the current website were text-heavy, lacked visual hierarchy, and led to cognitive overload for users. My main priorities were to prioritize the most useful and relevant information through effective visual hierarchy. 
 
Some issues the current website had were:
   •  The website lacked categorization and organization of it's content.   
   •  A lot of the information presented was outdated.
   •  There was no way to officially rsvp to events. 
   •  Social media that was on the homepage was hard to follow.
   •  A lot of their content was linked to another website therefore retention of users was potentially               lost to this.    

"Homepage" and "Games We Play" screenshots 

PROCESS

         Research                                    Strategy                     Interaction Design                  UI Design
     User Interviews                           Empathy Map             Responsive Wireframes             Branding
    Market Research                              Persona                            Prototypes                       Style Guide
   Competitor Analysis                          Sitemap                        Usability Testing                  Visual Design                                                         

RESEARCH

Research Goals:
This store has a niche market and the target audience is their customers therefore I needed to understand what functionalities their target audience expected from the website: 
•   Why people use the website?
•   What kind of issues people have when they use the website?
•   What types of events are people interested in?
•   Understand customers needs and expectations when visiting the website?
•   Via competitor analysis see if there is a better approach to rsvping for an event?

Methodologies Used:
•    Secondary Research
•    Competitor Analysis
•    Interviews

Synthesizing Research
I developed a series of questions for the interview portion of my research. The interviewees were adults ranging from the ages of 18-34 yrs old. 

Key takeaways from my user research:
•    All of the interviewees visit other tabletop gaming websites to find information about tabletop games.    •    Participants agree that you should be able to find basic information like hours of operation, game product information, staff information.                                                    
•    There was a consensus that the current website is hard to read and busy.
•    Participants would be inclined to remain loyal to a particular website based on customer service and staff friendliness.
•    People tend to visit the homepage of the current website the most.

STRATEGY

Persona: With all the information and data I collected from my research I created a primary persona to help define who I am going to design for. 
 

Tony is a Software Engineer. He enjoys a plethora of hobbies but his main interest is tabletop gaming. He has made several friends at the local tabletop gaming store called Ettin Games and Hobbies but finds that he is really frustrated with the current state of the website. He enjoys the store but due to lack of attention the website receives, he misses out on a lot of great events. He really wants to be able to search for events and be able to navigate the website effienciently. 

Empathy Mapping: After creating the persona, I created an empathy map to understand the user's needs, wants, perceptions, and motivations and gain empathy with our users. Interview findings helped me identify their pain points and expectations.

Site Map: With these results I went on to create a site map that would show the relationship between the content within the website and establish navigational categories.

INTERACTION DESIGN

Prior to designing the low-fidelity wireframes on the computer,  I did some brainstorming. Keeping the project scope in mind, I grab manila paper, my moleskine notebook, and a pencil and I sketched out some ideas of what I visualized the  homepage might look like. After this, I translated these ideas to low fidelity wireframes. When sketching out ideas, I looked at current tabletop gaming store websites as a reference to see what potential competitors are currently designing keeping in mind my own target audience, my user flows, and my previous user research. 

Low-Fidelity Wireframes

Style Tile: I made a style tile for Ettin Games. I kept the logo they wanted to reuse and worked around that for the colors and the hero image I wanted to use. Initially I had several images planned for the hero image but when I went to execute it, it looked a little too busy so I went ahead and adjusted it to 4 images but the background hero image. The images pertain to the games they play. I reused the red in the logo as a header color. 

High fidelity responsive wireframes were designed for desktop, tablet, and mobile.

The UI kit and branding specifications were used to finalize high-fidelity wireframes. I used Invision for my prototypes. 
High Fidelity Prototype
Pages that were created: Homepage, Destinations, Product Detail Page, Registration, Check Out