TwinSpires
-
iOS & Android Applications
An Introduction
TwinSpires is the leading online ADW (advance deposit wagering) that offers a comprehensive platform that combines a vast selection of races with cutting edge technology. TwinSpires is the official ADW for the home of the Kentucky Derby, Churchill Downs. TwinSpires had a record handle of over $90 million dollars on Derby day 2024 alone!
As part of my work on the twinspires applications, I’ve been focused on creating a seamless, engaging experience that evolves with the needs of the players. The app is continuously updated with new features and improvements based on user feedback and performance analysis. From refining the user interface to enhancing betting options, I’ve prioritized optimizing functionality and usability in every update.
As part of my work on the twinspires applications, I’ve been focused on creating a seamless, engaging experience that evolves with the needs of the players. The app is continuously updated with new features and improvements based on user feedback and performance analysis. From refining the user interface to enhancing betting options, I’ve prioritized optimizing functionality and usability in every update.
Personas
We group all of our users under one of the following personas:
Casual
The big day casual loves going to the race track on big race days like the Kentucky Derby, enjoying gathering with friends and family to watch the horses run and maybe even enjoy a bourbon. Although the technical aspect does not interest them as much, they enjoy placing some bets and casually learning about horse racing. They have had previous experience with smartphones, and in person betting kiosks
Rookie
The eager rookie is a younger user, around 18 to 25 years old that has placed wagers on sports in the past but is interested in learning about horse racing. They have had previous experience with Smartphones, Computers, Social Media Apps and Sports Betting Sites.
Great at knowing the ins and outs of parlays and prop bets, pick-5's and exotics are something completely new. Reading past performances, learning trainer-jockey combos, paying attention to changes in class, and even analyzing workouts; this user jumped into the deep end and wants to learn as much as possible about the world of horse racing.
Core
The core player is an experienced and high-stakes horse racing bettor who places large amounts of wagers based on detailed research and expert handicapping. They value sophisticated features, real-time data, and a seamless user experience to optimize his betting strategy. As a seasoned bettor, they appreciate the intricacies of race dynamics and enjoy the thrill of high-stakes competition. They love getting into the nitty-gritty of past performance data, and focus mostly on ease of betting.
VIP
VIP's are usually locked in their betting ways and don't like drastic change to their betting process. Often they are into a 'No-Frills' experience, and only want to see relevant features to how they wager. VIP's are important to the business because of the amount of wagers placed and how they consume wagering products like past performances and racing forms.
Tutorial Portal
-
Helping users understand the intricacies of horse racing and wagering
Duration
2023
-
2024
Tools
Adobe CC, Figma
My Role
UI Designer, UX Researcher
Horse racing is a very intricate sport and more complex that one would initially think. There are many different types of races, bet types, and ways to handicap (predicting the winner of a race). On any given race, there are a dozen or more factors to consider when picking a winner. For a newbie to horse racing, it can be overwhelming when using an online application to place a bet.
I had a few goals with this feature; increase the overall satisfaction of our customers, increase user retention, increase brand reputation, help long-term growth and revenue, and ensuring competitive advantage
The Problem To Solve
How do I reduce friction for new users? How can I alleviate some of the load that is put onto TwinSpires customer service representatives on high traffic days from new users asking for help with our applications?
The Process
Research and Findings
For months, new player surveys were sent out weekly asking a range of questions to new users. These surveys accounted for thousands of new users over this time frame, and a large portion of users surveyed have little to no prior experience with betting on horse racing.
In the surveys users continually sent responses that said that they couldn’t understand how to bet on horse racing or that they needed help to better understand horse racing in general. Not that this is necessarily a design flaw of our app specifically, but it is definitely a shortcoming of the horse racing industry. The sport is intricate in many ways, and is intimidating for new users.
User Submitted Responses
These are just a few of the responses that stood out to me:
"(I have) Difficulty finding races, I don't understand tips on horses."
"I didn't know there were promotions!"
"The betting system is highly confusing."
"The wagering process is kind of confusing for a first time horse track gambler."
User Personas
From the data gathered, I wanted to target two specific audiences and create a list of goals and frustrations for each:
Casual
Goals:
The Eager Rookie is looking to learn intricacies of horse racing as well as the TwinSpires app, like a sponge absorb as much knowledge as possible. Finding a betting app that can also teach them about the industry is a big selling point to them.
Frustrations:
Despite being a technologically savvy and younger person, the Eager Rookie lacks the first person experience with horse racing. The subtle nuances of this sport only come with familiarity. Credibility is key in this industry, and finding somewhere that has all the information in one spot that is also a reliable source can be difficult.
Rookie
Goals:
Casual fun is most important to the Big Day Casual, betting for them is only to add some excitement to the day at the track. It is a fun way to engage with horse racing and to connect with friends, family, and other people at the track. Even though betting is purely for fun, the Big Day Casual still wants to make informed decisions and doesn't want to feel like they are just throwing away money. Learning about track conditions, pool sizes, and other things are still important to them. Convenience and usability is important, fumbling around with a clunky app might as well feel like they are reading a dictionary.
Frustrations:
Time is a factor to the Big Day Casual, they want to access the information they are looking for in a quick and concise manner so that they can get back to enjoying their day at the track. They want to learn about the best way for them to bet on their smartphone without it being too complicated like other apps can be.
The Strategy
User Flow
Next I worked on defining a user flow that was:
Targeted to all types of users
Easy to get in and out of
Easy for users to go back and reference when needed.
Ideation
With my initial iterations, I was exploring what the best way of organizing the information in a way that made sense for the user.
Low Fidelity Wireframes
My thoughts started at segmenting the topics by sections, I also explored displaying a 'Featured topic' grouping to further cater to a user's potential habits.
Prototyping
Finally, I ended up at this sectioned drop-down view. Once a user taps on the drop-down, they can select any of the topics and it will link to that specific slide in a slideshow. This is important so that a user can find the exact topic they would like to reference if they needed to find the information again at a later time. Users can also navigate through an entire section from start to finish, which is beneficial to newer users.
Native Home Page Redesign
-
iOS and Android Applications
Duration
2023
-
2024
Tools
Adobe CC, Figma
My Role
UI Designer, UX Researcher
A home page is an important component to digital applications. It is critical in the user flow because it guides users to key features and content, while also giving a glimpse into what the apps provide.
The implementation of a brand new home page experience was quite a big update to the TwinSpires mobile apps. Before, users would just be dropped into a large list of active and completed races for the current day. This wasn't an ideal beginning to a user's flow for a number of reasons; it didn't provide any context for what the app offered, it didn't guide users toward any sort of action, and it was particularly confusing for users less experienced with horse racing.
But, before I started on the journey of helping create a native homepage experience for the TwinSpires apps, A few questions needed to be answered first.
The implementation of a brand new home page experience was quite a big update to the TwinSpires mobile apps. Before, users would just be dropped into a large list of active and completed races for the current day. This wasn't an ideal beginning to a user's flow for a number of reasons; it didn't provide any context for what the app offered, it didn't guide users toward any sort of action, and it was particularly confusing for users less experienced with horse racing.
But, before I started on the journey of helping create a native homepage experience for the TwinSpires apps, A few questions needed to be answered first.
How Can We Better Serve Our Users?
By implementing a proper home page experience, we could help solve some of the issues within the iOS and Android TwinSpires applications while also adding new features and functionality.
We needed to better help guide users to different places in our app, and we could accomplish this through a call to action a number of ways, like; homepage widgets, carousels, articles, or even video. These intuitive and easy to use pathways to content can help users get to where they want to go faster, or help them figure out where content is to engage with.
The current interface was very information heavy, repetitive, and afforded the user no visual break in most of the flows. A home page could be designed as a dashboard of sorts, giving user's a condensed and clutter-free view of TwinSpires, with little morsels of content that they can peruse, or content that they can directly control through favoriting specific tracks and horses.
We needed to better help guide users to different places in our app, and we could accomplish this through a call to action a number of ways, like; homepage widgets, carousels, articles, or even video. These intuitive and easy to use pathways to content can help users get to where they want to go faster, or help them figure out where content is to engage with.
The current interface was very information heavy, repetitive, and afforded the user no visual break in most of the flows. A home page could be designed as a dashboard of sorts, giving user's a condensed and clutter-free view of TwinSpires, with little morsels of content that they can peruse, or content that they can directly control through favoriting specific tracks and horses.
What Business Value Does This Have?
This home page implementation has more than just benefits for our users. By providing areas for call-to-action's, the potential to drive handle (the amount of money wagered in the pari-mutuel pool on a race, a program, a meeting or a year.) goes up. Marketing would be able to control the advertising on the home page through banner carousels that showcase offers, events, tournaments and more, as well as push social content through integrated story video widgets.
Through this clutter-free interface, we can also display condensed betting content as soon as a player logs in so that the time spent before placing a wager is minimal. I like to think that the integration of the home page in the TwinSpires apps is like a signpost that eventually helps the user along to the end goal of placing a wager, but they decide which direction their journey goes.
Through this clutter-free interface, we can also display condensed betting content as soon as a player logs in so that the time spent before placing a wager is minimal. I like to think that the integration of the home page in the TwinSpires apps is like a signpost that eventually helps the user along to the end goal of placing a wager, but they decide which direction their journey goes.
Ranking Component Hierarchy By Priority
To help drive the design thinking around this feature, I wanted to gather opinions from stakeholders on what the priority of things that could be displayed on the home page.
Eventually I landed on the following list:
Eventually I landed on the following list:
- Marketing/Product Banner Carousel
- Offers
- CTA for big race events (Bet the Kentucky Derby, etc.)
- Condensed Favorite Tracks Widget
- Featured Tracks Widget
- Upcoming Races Widget
- Top Pools Widget
- Expert Picks Widget
- BrisPicks Widget
- ReadyBets Widget
- Public Betshare Widget
The Process
How Do We Get There?
Due to the construction of certain areas of the app, the teams had to build around limitations. So, when we proposed this feature idea, we needed to use a staged approach to accomplish our goals.
Phase 1
Specifically for iOS, we would need to migrate the deposit function out of the bottom nav and into the page header on most pages. This way, we could have a nav bar link dedicated to the home page and users could access it at any point in their journey. On android we use different navigation in the form of a top nav menu so this wasn't as big of a change, but to keep parity we also implemented the deposit function in certain areas.
.png)
Before
.png)
After
Phase 2
Moving to phase 2, the goal was to re-imagine the 'More' menu of the iOS app, and the hamburger menu of the android app. The key changes to these menus would be the addition of a profile card UI which would place more emphasis on the account preferences and history items, as well as make deposit and withdraw actions the most prominent items in the menu since we were removing the deposit navigation item from the bottom nav. Another reason for this change in the UI, was to take the steps needed to begin creating a social wagering platform within TwinSpires. And Finally, the consolidation of the some of the list links and increased text size helped with scanning, and the legibility.
Phase 3
Phase 3 will be for the future of the native apps. Funding backend calls are very expensive for us to make currently so we will be working around this limitation by designing an experience that allows a user to view their balance without making this call. The thought would be to split the call into multiple different calls so that we could load funding methods without loading balance calls until the user makes a selection for their deposit method. This would allow us to eliminate some clunkiness from the journey, as well as let users quickly change methods on the fly.
Ideation
Example Widget Ideas
Part of the process for this project was to communicate with with project managers and stakeholders to get their feedback on widgets that would be part of the home page experience. The following are some of the quick ideas for widgets that I put together.
Low Fidelity Wireframes
Once I had rough ideas for widgets, I started putting them together on a frame to see what the overall feel and look would be.
Prototyping
The finished product is a much cleaner and enticing first look into the TwinSpires applications. We have found that our users like the look and functionality of this new layout, especially among the Casual and Rookie groups. On an average day, users engage with the new video feature widgets over forty thousand times alone!
Having a dedicated home page has already proven to be successful in the short time that it has been in production. The plan is to continue to develop content for the home page, and have it be an ever-updating central hub of the TwinSpires application.
Having a dedicated home page has already proven to be successful in the short time that it has been in production. The plan is to continue to develop content for the home page, and have it be an ever-updating central hub of the TwinSpires application.