Your Hub for Unforgettable Adventures

MY ROLE & RESPONSIBILITIES

Lead UI/UX Design, User Research, User Flows, Prototyping & Testing

TIME

3 months

TOOLS

Figma, Photoshop

00

MY PROCESS

Empathize

Define

Ideate

Prototype

Test

01

OVERVIEW

Tavern is a mobile app that allows gamers to search for and manage games across multiple consoles and clients. A user will do so by utilizing the advanced search system and through the apps ability to view and share other user's recommendations. No more searching online through multiple clients and websites to find the next perfect game for you and your friends.

I chose to create Tavern because of my own personal experiences when it came to trying to search for new games for me and my companions. With so many big games being spread across multiple different clients and consoles, browsing through all of them became tedious and difficult. Not to mention, many of them did not have a search system that allowed me to filter based off of the various types of criteria. I wanted to create a space where discovering new games would be more efficient and effective for everyone.

02

PROBLEM

Video games have rapidly grown in popularity and variety in the past two decades. Thus, hundreds of video games are made annually by hundreds of developers that compete for the most attention. Because of this, these games are spread across dozens of platforms and many of them are even made exclusive to one or a few clients.

Searching for new games required the user to type in the same keywords or select the same filter repeatedly when moving from platform to platform. This process just takes too much unnecessary time and effort.

03

SOLUTION

Tavern makes it easy for anyone to search for the games they want regardless of platform or console.

From searching, purchasing, to even downloading, it turns a tedious process into an easy and efficient one. Users will also be informed about any news, updates, or recommendations through Tavern's social feed - where all users have a voice. Tavern aims the be the ultimate game browsing app.

EMPATHIZE

CONDUCTING THE RESEARCH

Although I was familiar with the gaming industry and had my own experiences/struggles discovering new games, I knew I would need to do some secondary research to gain a better understanding of what other platforms do and understand other people’s pain points and search methods. I then conducted my interviews to get an even deeper understanding of the obstacles different people face.

Through my research, I wanted to:

04

COMPETITOR STUDY

Despite having a lot of personal experiences on the methods I used to find games, I knew I would have to take a closer look at my competitors within the industry. Not to my surprise, there truly were not many competitors out there that were very clearly dominating the scene. While there were many apps and platforms that would perform well in one area, there were a lot of features that I thought could have been implemented to improve the user experience. It seemed like the main three competitors I had were Steam, Stash, and the World Wide Web. Exploring each of these platforms, I evaluated the strengths and weakness of each to see how Tavern could fill in any gaps moving forward.

Steam

STRENGTHS

  • Advanced filter system
  • Wide variety of games
  • Not many competitors
  • Ability to download games
  • Largest user base

WEAKNESSES

  • Only shows PC games
  • UI is extremely messy with too much to look at
  • Only shows games under in the Steam client

Stash

STRENGTHS

  • Modern, easy to follow UI
  • Search function with unique filters
  • Contains games from all consoles
  • Shows reviews from multiple companies

WEAKNESSES

  • Cluttered with ads
  • Features blocked by paywall
  • No social feed
  • Cannot purchase games

World Wide Web

STRENGTHS

  • Wide range of references
  • Can search with specific phrases as opposed to key words
  • Contains games from all consoles

WEAKNESSES

  • Can’t use filters that apply specifically to games
  • No 100% reliable source/site
  • Online resources/articles only focus on popular games to build their reputation

05

PROVISIONAL PERSONAS

To start getting an idea of who Tavern’s users are, I used the information from the competitor study to create provisional personas. This helped me to determine the criteria for participants I would recruit for my user interviews and start understanding what their needs might be based on their goals and pains.

Kids/Teens

Under 18 yrs old

GOALS

  • Keep up with the latest/popular games
  • Find games
  • Find games on they can play on their available console

PAINS

  • Cannot afford games on their own
  • Game rating limitations
  • Difficult finding games all their friends can play

Young Adults

18-25 yrs old

GOALS

  • Find affordable games
  • Find games on they can play on their available console
  • Find a game that’s genuinely interesting

PAINS

  • Game is not as fun as initially thought
  • Finding people to play new games with
  • Games are too expensive

Working Adults

25+ yrs old

GOALS

  • Stay up to date with games that are trending
  • Find games that work around their adult life

PAINS

Not enough time to do research on games
Unaware of the online resources
Can’t find games that reignite the spark as a kid

06

USER INTERVIEWS

In order to learn about the real experiences people have had while furniture shopping, I recruited 10 participants (fitting within the criteria of the provisional personas) for user interviews. Here, I focused on asking open-ended questions about their experiences to learn as much as possible about our users and validate my understanding of them from my journey maps.

“The problem is that the market for games is way too saturated now. Everyone is trying replicate what’s popular and as a result, finding something truly unique and new is extremely rare.”

- Nick (23,M)

07

JOURNEY MAPS

After analyzing the data gathered from the interviews, I wanted to create journey maps for potential users with different backgrounds. I wanted to simulate exactly how people with different motives would navigate through the app to achieve the same goal.

To do this, two personas were created each with their own pain points and goals. Joey wanted a way to search for games based off of his category of choice and the desired console. While Megan wanted to save time by downloading games even while she was away from her computer. Both persona's Journey Maps were plotted to get a better understanding of potential obstacles and frustrations.

DEFINE & IDEATE

IDENTIFYING THE PROBLEMS

Now with my understanding of Tavern's users, I wanted to start thinking about what problems we are trying to solve for them. Taking the insights and needs from the research, I started to dig deeper to better understand what the user's problems are by clearly defining the main issues and applying them to my first design ideas.

08

MAJOR PAIN POINTS

I wanted to get insights from gamers of varying demographics. I interviewed 10 people with different ages and occupations to hear about their frustrations when it came to finding new games. All of these interviews were done remotely.

The interviews revealed many issues, but the main three pain points evident had to do with their search options, the process of searching, and the user’s limited time.

Limited Options

Many developers only show their products on their clients. This limits users to only seeing games that are licensed under the search engine they are using

Dissatisfying Process

A lot of the available search platforms have poor search/filtering systems, making is difficult and unenjoyable for users to efficiently find games that suit them.

Decision Uncertainty

After finding an interesting product, users will have reservations committing to the game. This uncertainty gets amplified especially when considering price.

09

WIREFRAME SKETCHES

Once I had a clear idea of how I wanted to approach the app, I started drawing out paper wireframes. I drew five pages with different layouts and put stars next to features that stuck out to me.

A lot of the aspects that I chose to incorporate into my design were features that I believe worked on other platforms. While there is value in standing out and being visually unique, there's no reason to reinvent the wheel when there are already dozens of other successful platforms that have already laid the ground work.

10

LO-FI WIREFRAMES

I then transitioned to Figma to turn my paper wireframes into digital wireframes. Once those were cleaned up, I put them all together to produce a lo-fi prototype. There were three functions I wanted to focus on to solve the user’s problems: searching, selecting, and managing games.

PROTOTYPE & TESTING

SKETCHES TO PROTOTYPE

Now that I had sketched out my ideas, I wanted to test the decisions I made and make sure that the structure and flow of the app is intuitive for our users. Before working on the visual design, I wanted to first make sure that the design was functional. In order to do this, I decided to create a mid-fidelity prototype which would help me quickly test the design on real users and make any priority revisions before integrating the branding and visual design.

11

USABILITY TESTING

Before moving onto the hi-fi wireframes, I wanted to make sure the app I created was functional and covered all the necessary workflows. I separated the information I collected into 4 different categories: functions, tone, visuals, and user flow. Each color represents statements made by 5 different users. With these observations, I identified patterns made by each of participant so that I could isolate the issues I should focus on in the final designs.

12

PRIORITY REVISIONS

Taking what I learned from my usability tests, I began to make revisions to my design based on the recommendations identified.

1. Establish a better hierarchy

When I first started, I found myself treating the homepage too much like a search. The homepage should be a place that’s catered to the user - where the app should be able to show the user what is most important and interesting to them. My first design did not take that into account. After receiving some user feed back, I made sure to lay the homepage out to prioritize the user’s goals.

2. Optimizing the search flow

Going into the search, I had no thoughts nor consideration of how seamless this flow needed to be. I started by just having all the filters be listed out with no real care on how to consolidate the information or the number of user clicks. I had a lot of users tell me that there was too much information being shown on one screen and it was overwhelming. I went back to the drawing board and updated the flow so that the number of actions was reduced as well as the information that needed to be looked at.

3. Revisiting the game page

Similar to the homepage, I didn’t consider information hierarchy when designing this page. I was so tunneled on what I wanted it to look like visually, that I didn’t notice that the information being shown was messy and overwhelming. There was a lot of text squeezed together and both a banner image and a cover image that made the entire page look too busy. In my second iteration, I made sure that the information was easy to read and stuck to the simplicity of the designs.

13

BRANDING

After making the revisions to my design to improve its usability, I now wanted to think about how I would convey Tavern's brand visually. Tavern's branding reflects the attributes: Inviting, Minimal, Techy, Simple, and Modern. Once I settled on the direction I began working on setting up the visual elements and created a Style Guide.

14

FINAL PROTOTYPE

Using my revised wireframes, the information from my usability tests, and my new brand guide, I now worked on creating final, high fidelity wireframes and created a final prototype. With Tavern’s branding defined, I worked on incorporating their identity to craft the visual design of their new application.

15

REFLECTION AND NEXT STEPS

As someone who has been familiar with video games my whole life, I thought I would be able to cruise through this study since I had so much experience. But I quickly learned that a lot more work goes into the research process. Both my experiences and the data I learned from my research were key in getting up to speed with my competitors and help empathize with my users.

Overall, I had an amazing time working on something that was so close to my heart. If given the chance too I would love to work towards making this app a reality. I know I personally would love using it and see a lot of potential in it's future.

Focus on what works, not being the "Next Big Thing"

Since this was my first project as a UX designer, I felt there was a lot of pressure to try to do something new. I saw so many flaws and pain points in my competitors I thought I needed to revamp the whole way users saw these game browsers. However, in time I realized that while the competitors were lacking in some areas, they had already created/established a lot of the working elements. I don't need to create a fancy new way to search for an item at the expense of app intuitiveness. These other game browsers have been active for years and while there are many flaws, there are also a lot of keys to success.

Get feedback as early and as often as possible

The advice and insights I got through my usability testing was extremely helpful. It helped me pin point a lot of careless mistakes, clunky UI, awkward user flows, etc. So much information can be obtained by a single usability test and it's something I should have taken advantage of more during my design process. I would get feedback after long intervals of designing, only to have to change a huge amount of my work after hearing feedback from others. Constantly seeking advice would have saved me a lot of time and is something I will keep in mind for my future projects.

NEXT STEPS

1. RE-TEST

With the new revisions and branding incorporated, I would want to test my design again to ensure the design’s usability

2. HAND-OFF

After validating the design, I would hand-off the design to developers or other stakeholders to work on developing the app

3. PRODUCT LAUNCH

After the app has been built, we will introduce the new product to the market

4. ADD FEATURES

After the first version of the app has launched, I would observe how people are using it and work on updating priorities and adding new features to the app.
Let’s work together!
- Justinzfeng@gmail.com