Rackem
a mobile app for pool players
Product
A mobile app for pool players to find and reserve tables + more
Role
UX/UI Designer, UX Researcher
Tools
Figma, Miro, Google Drive
Duration
Nov - Dec 2023
Overview
Rackem is a mobile app for billiard players to help find pool tables to play on, reserve/waitlist for tables, create matches, meet other players, and learn more about pool.
Rackem was created in 2023 as a capstone study for my UX/UI Design Bootcamp. The project spanned about 3 months and my team was made up of me and my mentor. I went through each stage of the UX Design Process while gathering feedback from my mentor each step of the way to successfully create something I am excited about and proud of.
Project scope
The goal for the vinylist was to improve conversion from browser completion of checkout to increase revenue on the product’s mobile-web experience.
The product manager tasked us with re-designing a web platform to solve the problems shown above. I did secondary and competitive research on how I might solve these problems. After ideating, sketching, creating a clickable prototype, testingm and iterating, I was able to create an impactful website that solved these problems that gained positive feedback from my mentor & potential users.
Target User
25 - 38 years old
User base is 52% men
Med-High income earners
They take their audio experience very seriously. They will spend a lot of money on this investment so are very picky and do their research
01 Exploring the Problem
Playing billiards can be a frustrating experience sometimes. Through secondary research and interviews (I’ll go into depth below), I uncovered the most common frustrations of playing pool are:
waiting for a table
inconsistency between a pool hall and what is represented about it online.
02 Research
Billiards is a historic sport that is long beloved by many. As a pool player myself and as pool gets more popular, I wanted to delve deeper into the obstacles we, as players, face sometimes.
a) Secondary Research:
Waiting
I kicked off the project by researching the effects of waiting. I knew that one major frustration I had was waiting for a table and wanted to explore what waiting does to both customers and businesses alike. I found that waiting time was directly negatively correlated with the satisfaction levels of the consumers. Waiting long periods also dampens the experience of the service being provided and causes businesses to lose revenue and customers.
b) Primary Research:
Interviews with Pool Players
Next, I conducted 3 interviews with other pool players to hear about their pool playing experiences, desires and pain points. Through my interviews, I gained valuable insight into my interviewees’ pain points such as struggling to find somebody new to play with, waiting for a table, waiting in between shots at a table, and parking. With the help of an affinity map, I found the most common pain point among my interviewees was the disconnect of what was shown online about pool halls versus the actual experience of going there.
03 Ideating + Sketching
The first thing I did was delve into research to see how my competitors were attacking the same problem and better understand how of web design may help with conversion.
a) How might we help pool players find pool halls?
→I wanted to mimic Yelp: since I know pool players use Yelp and Google Maps to find pool halls, I wanted to adopt a familiar map and list format.
I also wanted to utilize icons/colors to differentiate between pool halls, pool bars, and pool stores since I found that most pool players prefer pool halls but are willing to go to bars with pool tables sometimes
In the map, I wanted a mini menu when clicking pool place icon so that users can have a quick glance at the name, location, how many tables, and amenities offered before opening the profile
b) How might we improve the accuracy of what’s being represented about pool halls?
In the pool place profile, I once again wanted to mimic Yelp. definitely wanted to add pool specific sections such as pricing, league, and amenities offered
I also thought user-inputted tags and user reviews would be super helpful offers a quick view what other users are saying about the place which helps reduce the disconnect between expectation and reality
Hours and location verified: such as what Google does to improve accuracy of pertinent information presented
c) How might we aid pool players to maximize pool playing time?
Since I found out that pool players want to get on the table and waiting for a table stops them from doing so, I believed a reservation and waitlist feature would be super helpful in reducing lines and overcrowding
Just as Yelp and OpenTable, Rackem could help players reserve tables and also join the waitlist when within a certain radius of the pool spot.
d) How might we connect other pool players together?
I liked the Discord model for social front page as I imagine joining groups and leagues within the app and chatting within those groups.
To look for groups, I liked how Facebook has tabs on top to help filter between categories you may be searching for: In the pool world, I could see the different categories to be groups, leagues, and events
04 Sitemap
I also created a site map to help me visualize what the bottom navigation would look like and what features I would have in the different tabs. I decided to give each of the solutions to my How Might We questions a tab. Then, I thought about what user flows my user would go through in the app.
I knew my app had a lot of features but boiled it down to these four:
Keep score
Look for a pool hall to play at
Join a group
Learn to play 8 ball
05 Style Guide
I wanted the personality of the app to be simple, elegant, yet fun. I created a mood board to capture this personality. I wanted to capture the essence of a night out playing pool with your friends. I was inspired by the colors and shapes of pool balls, lit-up green felt tables, the elegance of pool lounges, and backlit cocktails.
Color palette
I knew I wanted green to be the primary color, representing a lit-up green felt table. I chose the accent color as Old Gold to represent the elegance and of the antique sport of billiards.
The secondary colors (Sienna, YlmMn Blue, and Violet) were inspired by the colors of billiard balls. I chose to have many secondary colors as I knew I wanted different colors to help distinguish different amenities and user tabs. I also chose an almost muted rainbow for these colors as I wanted the app to look subtly colorful and fun.
Brand attributes
Reliable
Collective
Fun
Easy
Font Family
For the font, I chose SF Pro as I wanted to keep the font simple and legible.
Also included in my style guide are Iconography, UI Elements, and Imagery. I decided on using rounded corners for all my UI Elements and Iconography, mimicking the roundness of pool balls and giving the app a softer, casual feel.
06 Wireframes + High Fidelity
I applied my style guide to my wireframes to create my high fidelity screens. During this process, I worked with my mentor to iterate on my designs. I worked to simplify my screens, making sure each element was necessary. I then used the Figma prototyping feature to create a clickable prototype of each of my red routes.
07 Usability Testing
For my Usability Test, I tested four participants and had them complete 4 tasks and answer 3 questions about the UI and flow of the app.
My goals of the sessions were to:
See if the navigation of red routes were clear
Get feedback on the UI of the app
07 Iterations
Based on the valuable feedback I gained from my usability testing, I made a few changes:
Give users option to connect to FargoRate for skill level
Pop-up of “reservation confirmed” to clear ambiguity
Add labels to icons on social page to clear ambiguity
Improve UI and readability of 8-ball page
09 Final High-Fidelity Prototpye
Key Takeaways
1
UX Design process is not a linear.
I discovered that UX design process isn’t linear because creating great experiences often means jumping back and forth between steps. I found that adapting as you learn more, rather than following a rigid path will make the final design more user-focused and effective.
2
Research is key.
I found that research and the steps before the design process are key to building a great design. They help you understand who your users are, what they need, and the problems you're solving. It ensures your design choices are informed and user-focused, not all hollow aesthetics.
3
Be organized, it will help you.
I learned being organized and labeling all your files yourself ensures you can quickly find what you need, save you from the chaos of hunting through random folders. It keeps you focused on the task at hand and eliminates any disruption of flow.
Reflection
I learned a lot creating Rackem from the ground-up. I learned that the UX Design process is not a linear process and there is a lot of iteration after each step. I also learned that research and the steps taken before designing is imperative in designing a useful and well-received product. After completing this project, I learned to be better with labeling my files in Figma, setting up my interviews sooner, and managing my time better when designing. I look forward to completing more projects in a team in the future.