MY ROLE & RESPONSIBILITIES
Lead UI/UX Design, User Research, User Flows, Prototyping & Testing
TIME
3 months
TOOLS
Figma, Photoshop
Tavern is a mobile app that helps gamers find and manage games across multiple consoles and clients. With an advanced search system and user-shared recommendations, it streamlines game discovery without the hassle of browsing multiple platforms. I created Tavern based on my own struggles with finding new games efficiently, aiming to make the process easier and more effective for everyone.
Video games have exploded in popularity and variety over the past two decades, with hundreds released yearly across multiple platforms—many as exclusives. Finding new games requires repetitive searches across different clients, making the process time-consuming and inefficient.
Tavern simplifies game searches across all platforms and consoles, making discovery, purchasing, and downloading seamless. Its social feed keeps users updated with news, updates, and recommendations, creating the ultimate game-browsing experience.
Despite my own gaming experience, I conducted secondary research to analyze existing platforms and user challenges. Interviews provided deeper insights into obstacles gamers face.
My research focused on:
Although I had my own methods for finding games, I analyzed competitors in the industry. Surprisingly, no single platform dominated. While some excelled in certain areas, many lacked features that could enhance the user experience. My main competitors—Steam, Stash, and the web—were evaluated for strengths and weaknesses to identify gaps Tavern could fill.
STRENGTHS
WEAKNESSES
STRENGTHS
WEAKNESSES
STRENGTHS
WEAKNESSES
To identify Tavern’s users, I created provisional personas based on competitor research. This guided participant selection for user interviews and helped define their needs, goals, and pain points.
GOALS
PAINS
GOALS
PAINS
GOALS
PAINS
To understand real furniture shopping experiences, I interviewed 10 participants matching the provisional personas. Open-ended questions provided insights to validate user needs and refine 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)
After analyzing interview data, I created journey maps to simulate how users with different backgrounds navigate the app. Two personas were developed: Joey, who wanted to search for games by category and console, and Megan, who wanted to save time by downloading games remotely. Their journey maps helped identify potential obstacles and frustrations.
With a clear understanding of Tavern’s users, I began identifying the key problems we needed to solve. Using research insights, I defined the main issues and applied them to my initial design concepts.
To gain diverse insights, I interviewed 10 gamers of different ages and occupations about their frustrations with finding new games. Conducted remotely, the interviews highlighted three main pain points: limited search options, the tedious search process, and time constraints.
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
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.
After finding an interesting product, users will have reservations committing to the game. This uncertainty gets amplified especially when considering price.
With a clear approach in mind, I sketched paper wireframes for five pages with different layouts, marking standout features with stars. I focused on incorporating elements that worked well on other platforms, recognizing that there's no need to reinvent the wheel when successful designs already exist.
I then moved to Figma to convert my paper wireframes into digital ones. After refining them, I created a lo-fi prototype focused on three key functions: searching, selecting, and managing games.
With my ideas sketched out, I wanted to test the app's structure and flow to ensure it's intuitive for users. Before focusing on the visual design, I created a mid-fidelity prototype to quickly test the functionality, gather feedback, and make necessary revisions before adding branding and visuals.
Before moving to hi-fi wireframes, I ensured the app was functional and covered all necessary workflows. I categorized the feedback into four areas: functions, tone, visuals, and user flow, with each color representing input from five users. By identifying patterns in their feedback, I pinpointed the key issues to address in the final designs.
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
Initially, I treated the homepage too much like a search page. It should instead cater to the user, highlighting what’s most important and interesting to them. After receiving user feedback, I revised the layout to better prioritize the user’s goals.
2. Optimizing the search flow
Initially, I didn’t consider how seamless the search flow needed to be. I included all the filters without thinking about consolidating the information or reducing user clicks. Feedback from users revealed the screen was overwhelming with too much info. I reworked the flow to reduce both actions and the amount of information displayed.
3. Revisiting the game page
Like the homepage, I overlooked information hierarchy on this page. Focused on the visual design, I didn’t realize the layout was messy and overwhelming, with text cramped together and both a banner and cover image. In the second iteration, I prioritized readability and simplified the design.
After improving usability, I focused on conveying Tavern's brand visually. The branding reflects attributes like inviting, minimal, techy, simple, and modern. Once I settled on the direction, I created a Style Guide to establish the visual elements.
Using the revised wireframes, usability test insights, and the new brand guide, I created high-fidelity wireframes and a final prototype. With Tavern's branding defined, I integrated its identity to shape the visual design of the app.
As someone deeply familiar with video games, I thought my experience would make this study easier, but I quickly realized how much work the research process involves. Both my personal experiences and the data I gathered helped me understand my competitors and empathize with users. Overall, it was a rewarding project, and if given the chance, I’d love to help bring this app to life. I see a lot of potential in it and would personally enjoy using it.
As my first project as a UX designer, I felt pressure to innovate. Seeing flaws in competitors, I thought I needed to completely revamp the way users interacted with game browsers. However, I soon realized that while competitors had weaknesses, they also established many effective elements. I didn’t need to reinvent the wheel at the cost of usability. These platforms have been around for years, and while there are flaws, they’ve also found success in key areas.
The insights from my usability testing were incredibly valuable. They helped me identify careless mistakes, clunky UI, and awkward user flows. A single usability test can reveal so much, and I realize now that I should have used them more throughout my design process. Instead of waiting for long intervals between designs, getting constant feedback would have saved me a lot of time and effort. I’ll definitely keep this in mind for future projects.
1. RE-TEST
2. HAND-OFF
3. PRODUCT LAUNCH
4. ADD FEATURES
