Rackem

A mobile app for pool players to find and reserve tables + more

summary

I built a billiard mobile app from the ground up using the UX Design process.

I built a billiard mobile app from the ground up using the UX Design process.

I built a billiard mobile app from the ground up using the UX Design process.

deliverables

6 app screens

6 app screens

role + team

UX & Brand Designer

UX & Brand Designer

skills

Web design

Web design

Project overview

Project overview

Rackem was created in 2023 as a capstone study for my UX/UI Design Bootcamp..

Rackem was created in 2023 as a capstone study for my UX/UI Design Bootcamp..

problem

Playing billiards can be a frustrating experience sometimes. Through secondary research and interviews, I uncovered the most common frustrations of playing pool are:
waiting for a table
nconsistency between a pool hall and what is represented about it online.

solution

Craft an approachable, credible brand that empowers in-house strategy teams- positioning Strategian as a trusted AI partner that brings consulting-level insight back where it belongs.

exploring the problem

For the assignment, we were given a scenario in which a company (the vinylist) needs to enhance their browsing and checkout experience to greatly improve their product’s usability.

For the assignment, we were given a scenario in which a company (the vinylist) needs to enhance their browsing and checkout experience to greatly improve their product’s usability.

Two problems presented:

Two problems presented:

The experience of playing pool can be unsatisfying sometimes

problem

Waiting for a table

effect

Low satisfaction levels & dampens the experience of service

solution

Reservation & waitlist feature to reduce time spent waiting for a table

problem

Disconnect of what is being shown online about pool halls and experience of going there

effect

Wastes time, unsatisfied players → gets in the way of overarching goal of playing pool.

solution

Clear icons, user inputted reviews, and verification of information to show users exactly what to expect

For the goal of:

Playing more pool!

but first.. research

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.

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.

secondary research

What are 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. 

primary research

What common pain points do pool players have?

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 waiting for a table, and disconnect of what was shown online about pool halls versus the actual experience of going there.

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.

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?

Mimic Yelp to adopt a familiar map and list format for users

Utilize icons/colors to differentiate between pool halls, pool bars, and pool stores

Implement mini menu when clicking pool place icon for quick glance at the name, location, how many tables, and amenities offered

b) How might we improve the accuracy of what’s being represented about pool halls?

Add pool specific sections such as pricing, league, and amenities offered

Input user-inputted tags & reviews to see what other users are saying about the place

Hours and location verified: like 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

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

Branding

Reliable like your favorite bartender,

Rackem will boast a minimal elegant, yet fun design

to be an effective one-stop resource for all billiard players.

The hues were also adjusted to embody the mood board above. I wanted cool, retro colors to keep the mood classic yet fun.

Moodboard

Reliable

Collective

Fun

Easy

Rackem’s color palette was inspired by real billiard elements such as a lit up green felt pool table, blue Diamond pool tables, and billiard balls. I wanted cool, retro colors to keep the mood classic yet fun.

Color Palette

UI Elements

Typography

For the font, I chose SF Pro as I wanted to keep the font simple and legible.

San Francisco Pro

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

012345789

Tag3

Tag2

Tag1

Tag1

wireframes + high fidelity

wireframes +
high fidelity

I  applied my style guide to my wireframes to create my high fidelity screens.

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.

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.

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

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

iterations

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

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

high fidelity prototype

link to prototype

Reflection

what info is necessary? What type of layout would provide a balanced but experience to lead the user to CTA?

results

Designed a brand and splash page from the ground up for an early stage start up

Received positive feedback from the founder and key stakeholders

Established a clear, conversion-oriented foundation for future product growth

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.

key takeaways

UX Design process is not 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.

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.

Be organized, it will help me

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.