Tipico Sportsbook
Spec designs for the Bet Finder feature in the Tipico Sportsbook mobile app.
Problem
Navigating to and finding the right sports bets in Tipico’s app could prove time-consuming and frustrating. Users should be able to easily find bets and quickly generate a list of bets based on betting history and a set of tunable preferences.
Exploration
I began with an exploration of Tipico’s design language, transition types, and iconography to better understand the platform. I also conducted research on sports betting terminology (over/under, spreads, totals, moneylines) and processes to ensure my solution incorporated on-brand lingo and practical preferences/filters. Below are screenshots I used to dissect Tipico’s identity.
A particularly noticeable visual aspect of Tipico’s app are the graphical icons used to depict many sports for categorization. Knowing these icons would come in handy for my mockups, and not having access to originals, I used screen grabs of the interface to pull, resize, and remove backgrounds from each icon so they could be faithfully reproduced in my designs, regardless of potential changes to sizing or container background color.
Brainstorming
Many of the filters and options used in the final version of the preferences panel were listed by Tipico in the brief, including filters for sports and timeframes, as well as the toggle for TV matches. Additionally, I included a sorting filter for bet popularity (which relates to another requirement from Tipico that I will discuss shortly) and devised the odds level slider to cut down on vertical height while remaining consistent with existing elements elsewhere in the app.
I created components of each filter section in Figma and began experimenting further with layout and structure of the preferences panel.
The existing Live Bets section in the Tipico app provided inspiration for Bet Finder. Adopting aspects of the visual hierarchy, transitions, and input methods from this section will reduce friction for users of the new feature by presenting them with familiar elements and interactions. I created sketches to visualize the different filter options necessary to provide users the appropriate level of granularity.
Design & Flow
To give Bet Finder the most exposure and drive user adoption, I housed it on the Tipico app’s home tab, in the featured categories list. I created a ‘new’ tag to accompany Bet Finder’s list item, adopting the same visual cues that are already used to indicate notifications and pertinent information throughout the app.
The default Bet Finder page displays bets relevant to the user based on previous betting history. Sorting and TV Match options are fixed to the top of the page and are visible while preferences are collapsed. This is to provide basic sorting for default bets that appear on the page before preferences have been adjusted.
Bet Finder preferences can be expanded to access all filter options. It was important to keep the preferences panel as condensed as possible so users are still able to see results below change dynamically while they tune different filters. This is the primary method of feedback to the user that their preferences are being taken into account.
One goal Tipico made evident was to incorporate a ‘hotness’ level indicator for each bet card that would visually communicate the popularity and/or payoff for listed bets. This is why sorting includes an option for popularity. My idea was to utilize a simple icon with varying amounts of fill to indicate bet hotness on four levels. This small visual representation did not necessitate any changes to existing bet card UI and was nested alongside event times, since bet popularity is often linked to event recency. Tipico also requested a ‘dislike bet’ option to help tune individual user preferences for the default view of Bet Finder. I found that a text button was the most cohesive option while also providing the most context to users.
Conclusion
I wrapped up my Tipico feature designs by creating several interactive prototypes in Figma to demonstrate flow and transitions. Based on repeated testing between the existing interface and my prototypes, I identified a 20% decrease in time-to-bet, illustrating Bet Finder’s potential to improve usability. Although my vision for Bet Finder was ultimately not incorporated into Tipico’s mobile app, this project provided hands-on experience working within design and business constraints while allowing me to explore integrating novel designs and interface elements within an existing platform.