UI/UX Design, Graphic Design, ios design, Product DesignRailbird.ai Alpha Release
UI/UX design for the alpha version of Railbird.ai, a pool statistic analytic application designed to help players improve their performance.
Role
User Researcher
UI/UX Designer
Graphic Designer
Timeline
August 2024 - Ongoing
Tools
Figma, Adobe Illustrator, Adobe Photoshop
Team
Independent designer in a team of 5 engineers
What is Railbird.AI? What am I doing here?
Mastering a skill is no easy feat, whether it’s art, coding, or sports. We've all heard that it takes 10,000 hours of practice to reach mastery, but getting there requires persistence and dedication. As an artist, I've learned that as you reach higher skill levels, progress becomes harder to see, making it more challenging to stay motivated. Mastery isn’t just about time spent—it’s also about identifying weaknesses and focusing on improvement. However, recognizing those areas on your own can be difficult, and not everyone has access to mentors who can provide expert guidance.
Therefore, Railbird.AI was created to help pool players gain mastery by using AI to identify flaws, show progress, and provide the necessary encouragement to keep improving. Users may record their gameplay with a phone and receive essential data that helps them improve.
Before I joined the team, Railbird’s engineers were able to build a backbone for the app. Powerful as it is, it lacks a human-centered aspect. Railbird presents player performance data through monotonous graphs, which can be overwhelming to interpret for the average user. With so many complex features such as a unique filtering system that shows the video clip and data of specific types of shots, accessible and intuitive navigation of the app became a challenge.
Early version of Railbird before any design work
I was brought onto the team to shape the app into one that is well-loved and intuitive to use for the average pool player. My focus was on making the app accessible to players of differing abilities, some of whom are of an older generation. Here are some things I did to achieve this goal:
Identify the needs of pool players by interviewing potential users.
Find the best way to help pool players consistently practice.
Present data in an easily understandable manner.
Design a video player (the main selling point of Railbird!) that is easy to navigate at first glance.
Simplify complex filtering system into one that is easily navigatable by users.
Discover methods to make the app “sticky.”
Create appealing visuals and UI that follow industry standards.
Main challenges I faced while designing Railbird
As an early-stage startup, Railbird’s main priority is to secure funding by quickly getting users who are willing to pay for the service. As a designer, I have to set a balance between what users need and what the business requires. This often leads to addition of features that users do not feel strongly about, but adds to the stickiness of the app. It also means constantly stashing ideas to the backlog that meet user needs but require a significant amount of time and engineering work to implement that would not fit into the strict timeline to launch.
With limited resources, the Railbird team needs to push to get a feature out in the fastest way possible, often resulting in deviation from a reviewed design. Being the only designer in a full team of engineers, I’ve learned to adapt and work around situations such as this, but still push for my designs when it is absolutely necessary. Pushing for my designs becomes especially important when the deviation impairs an accessible user experience.
Design Challenge #1: Users have a hard time understanding Railbird’s data.
Presenting users with their performance data that they may use to improve their gameplay is one of the core functions of Railbird. However…
!
?
Early user research shows that users think the graphs in Railbird are difficult to engage with and overwhelming.
Graphs show important data, but it doesn’t mean anything to the user
>> Although bar graphs are easy to understand, users stated that the cut angle degrees do not mean anything to them. Pool players judge the angle of their shots visually while playing; the numbers here do not let them know which shot it is indicating.
>> The data is presented clearly and simply, but users stated that this graph can be intimidating due to its “math-ness” and an overwhelming amount in the types of data. This causes them to ignore the data section of the app completely.
>> Users wish that the data can be synthesized for them to apply in their practice sessions; they suggest adding an AI coaching function that the Railbird team does not have the resources or time to implement.
How might we present Railbird’s data in an interesting, intuitive, and useful way?
Solution: Graph design unique to Railbird that caters to pool player’s visual perception of shots and condenses the necessary information.
To make performance data more easily accessible and engaging, I decided that the best solution is to break out of conventional graphs to create one for the specific needs of pool players. Through active discussion with a pool player on the Railbird team, I designed a graph that presents data intuitive to pool players.
>> Taking inspiration from diagrams in pool tutorial websites and videos, I designed the graph to be more in tune with pool players’ visual perception of shots, thus solving the issue of having numbers that mean little to users.
>> A large amount of data is extremely overwhelming. I condensed the data in this design (such as showing both distance and angle, along with color-coded make rate) to reduce the number of graphs needed in the app.
>> A unique graph makes the app appear more engaging and reduces the perceived connectedness to math. This makes the app appear less intimidating.
Impact: Decreased User Churn
Creating a unique graph from scratch presents a heavy workload for the engineers and creates a learning curve. However, user needs make this design an improvement in user experience from the simple bar graphs, with the pros outweighing the cons. Inventing a new graph in this case is a necessary investment in time and resources.
The implementation of this design resulted in a 62% reduction in user churn as users can now engage more easily with a main feature of the app.