Sportsbook Promo App (Mobile iOS)
6 month PROJECT
Despite its worldwide popularity, online sports betting is just starting to gain momentum in the U.S. market since a federal ban was lifted in 2018. As the industry grows, so do the number of sportsbooks and possible wagering opportunities.
Sportsbooks offer daily betting promotions to incentivize bettors to gamble with their site. These promotions may include Free Bet Rewards, Buy One Get One Offers, Boosted Odds, and other enticing opportunities to make more money on winning bets. Depending on the state that one is gambling in, there can be a lot of competition for each wager. For example, in the state of New Jersey a bettor can have accounts with up to 18 different sportsbooks.
Too many betting options makes it difficult for online sports bettors to make calculated decisions. To find the most advantageous bets, you must visit multiple websites or create spreadsheets to compare offers.
BetFriday is a mobile iOS app that aggregates daily sportsbook promotions to help bettors become more profitable. It was inspired by blackfriday.com – a website that collects and promotes Black Friday deals from competing retailers. Through BetFriday, online sports bettors can filter information to find the most advantageous offers to optimize their wins.
My husband, Kent, and I have been discussing business opportunities within this market ever since our state legalized online sports betting. We hypothesized that third-party aggregated solutions were needed to support informed decision-making, and could potentially become powerful SEO drivers for competing sportsbooks.
I lead the project and performed all UX/UI responsibilities including: research, synthesis, ideation, information architecture, wireframing, visual design, brand development, prototyping, and user testing. Kent is the avid sports bettor whose pain points inspired the idea. He is also an internal stakeholder in its business development as we move from prototype to pitch.
From the very beginning, we felt that sportsbook promos played an important role in the online sports betting process and wanted to validate our hypothesis. User interviews enabled us to specifically address this issue and identify additional pain points.
Through secondary research, I wanted to gain a broader scope of the industry and study potential market opportunities. Since I was not a sports bettor, I needed to acquire general knowledge of the betting process to better understand our audience.
A competitive analysis helped us assess what kind of aggregated solutions already existed within the U.S. market and where there were opportunities for innovation.
Eight user interviews uncovered four major pain points for online sports bettors:
When I asked the participants to share their experiences in using promos. I learned that:
Secondary research confirmed what we suspected regarding market opportunities:
A competitive analysis of sportsbook aggregators within the U.S. market helped me identify promo aggregation as a key differentiator for our app.
According to my research, the legalization of online sports gambling has significantly impacted the profile of the bettor as many new users are flooding the market. Rather than solely focus on ways that we could support experienced gamblers, we needed to also address market maturation. Therefore, defining our users based on their experience level was key.
Through empathy mapping, I explored the behavioral differences and needs of new vs. advanced bettors. This would help me determine that I needed to designate more than one persona type to guide the design process.
Mapping the customer journey provided more clarity as to where their pain points overlapped.
Two distinct personalities emerged during my user interviews:
These users are both moderate risk takers who enjoy betting on sports for fun and are willing to conduct a little bit of research to increase their odds of winning. However, their key differentiators are:
I also learned that trying to figure out the best odds or most profitable wager is the least favorable phase in the user journey for both personas.
Although we had originally set out to explore aggregation opportunities, I facilitated a divergent brainstorming session with Kent to identify how we might address major pain points revealed through discovery. With his extensive industry knowledge and experience as a user, it helped us explore more cutting edge solutions. I formulated four problem statements to guide the ideation process and we yielded 28 potential product ideas.
At this point, we had to consider that online sports gambling is a strictly regulated market and eliminate solutions that might present legal challenges. A priority matrix helped us determine which ideas offered the most viable business opportunities.
User stories defined the functional needs of the user and helped us determine which ones to prioritize for an MVP (minimum viable product).
Of the four problem statements, we settled on the one that aligned best with our initial goals:
How might we help sports bettors become more profitable?
We concluded that a sportsbook promo aggregator was the ideal solution because:
Filtering information is a critical feature of our product so I created a sitemap to identify how we might categorize and organize the aggregated data.
From there, I wanted to identify the user flows that Chris or Steve would need to take when using the app and validate them through low-fidelity testing to ensure I was on the right track.
Sketches enabled me to rapidly prototype so that I could quickly validate these choices before moving onto wireframing.
Since this was the first mobile app I ever designed, I was keen on testing at various stages of fidelity to gain experience and confidence in my decision-making.
Without an established design system to work from, I opted to use iOS patterns as a frame of reference to ensure compliance with familiar user mental models. I conducted medium-fidelity testing to further validate my wireflows and determine if they were intuitive to the user before moving onto visual design.
I designed the wireframes to my personal phone specs (iPhone SE) so that I could mirror the prototype in Sketch on a real device.
Low-fidelity usability testing taught me to rethink my user flows.
My original design started with an onboarding experience when users just wanted to create an account first so I revised my red routes:
Early testing also heightened my awareness of usability heuristics and helped me identify common UI patterns that should be considered in the design. For example, my email form fields were missing the options to save login information and reset a password.
Medium-fidelity testing helped me fine tune some of the navigational elements and sequencing of the wireflows. For example, the “Alerts” and “Location” items in the bottom navigation were unnecessary and could be moved to “Settings” which was also relocated to the bottom menu.
The goal of BetFriday is to reduce information overload and help users access information in the fewest clicks possible so the interface had to be clean, organized, and easy to navigate.
While I wanted the brand to capture the excitement of sports betting, the UI needed to be understated to give prominence to the promo offers which are often displayed as colorful branded image tiles on their respective sportsbook sites. The UI had to support, not dominate these selections.
I also wanted to experiment with light and dark modes then test them to gauge market preference since I noticed a lot of sportsbook apps tend to default to dark mode.
I designed BetFriday’s identity as a two-color logotype with an icon foam finger which is symbolic of fandom and team spirit.
I wanted the visuals to convey the excitement of winning and capture a love of sports entertainment.
Many sportsbook brands utilize energizing color palettes that contain bright, saturated hues of blue, yellow, green, red, and orange and are contrasted against darker neutrals. I chose a palette based on complementary colors: dark purple, magenta, and a golden yellow and used a muted orange for the logo so that it would stand out, but not overpower the design. I felt that the dark purple would give strength to the bold image tiles and complement the brighter colors since most of the interface would be framing the data.
Since I was designing for iOS, I incorporated Apple UI patterns and used the San Francisco Pro typeface so that the app would align with familiar mental models and create a comfortable user experience. This helped me stay organized and clean.
Through each iteration I kept discovering that less is more and felt that a stronger UI emerged as I subtracted unnecessary elements.
I chose an icon set that conveys a simple, but friendly feel to lighten the mood of the UI. While aiming for a straightforward approach, I didn’t want the app to feel too stuffy either and the bold lines and slight curvatures of the icons give it a little more personality.
Since we caught important navigational and architectural issues in the earlier stages of testing,
I was curious to see how the high-fidelity prototype would perform. My goal was to conduct two rounds of testing with five different participants for each round.
This was also the first time that we had a realistic model to gauge market response to the idea of sportsbook promo aggregation. Would the user perceive this tool as valuable?
I designed the high-fidelity mockups to fit an iPhone 12 Pro so that I could showcase my designs on the latest technology. However, this was problematic when it was time to test because I had to rely on desktop links since I didn’t have the correct device to run the tests on. In-person tests were performed on my desktop iMac with a wireless mouse so this presented some issues since the hardware didn’t feel natural to most users
User testing concluded that dark mode is the clear favorite in both rounds since it contrasts well with the bright colors of the sportsbook imagery and is easier to read. Therefore, I’ve designated it as the default mode for the UI.
The first round of testing revealed four critical issues:
The first round of testing revealed that the navigation was not intuitive. Majority of the users did not understand that the menu at the top of the screen scrolled horizontally and offered additional categories to choose from.
I resolved this by running more text off the screen to provide a visual clue that the tab contained more information. I also added a “Search by” label to the menu so that users would understand that the purpose of this menu was to view filtered options by category.
In my original design, a user could customize their filter preferences when they clicked on a filter category. Within the customization settings, I created a secondary navigation so that they could tab through to other categories before closing the tab. However, the secondary menu looked almost identical to the main level navigation. None of the users even bothered to click on it.
I resolved this issue by consolidating all the filters into one flow that would link to the main filter button instead of trying to individualize the settings to each tab category.
The call to action button was too far down the promo opt-in page and users were not able to see it without scrolling to the bottom.
I consolidated non-essential information under a “View Terms” button so that the user could choose between reading more content or making their selection.
Users appeared confused when they were trying to view their filtered promos and were expecting to view them categorically. The data lacked organizational hierarchy.
I resolved this issue by grouping the image tiles in alphabetical order and labeling them.
After adjusting the designs and retesting, the critical issues appeared to be resolved. However, there were a few lingering problems. A second round of testing revealed two more major issues:
The labeling of my menu options was a major issue that surfaced in the first round of testing because the language wasn’t resonating with the user. I changed the “Promos” label to “Home” and replaced the icon with a house so that users could easily find their way back to the homepage. I also changed the “Bookmark” label to “Saved” but kept the same icon. However, there was still some disconnect for a few users in the second round of testing.
I resolved this by changing the bookmark icon to a heart since users tend to associate that image with their favorites. I decided to keep the “Saved” label rather than change it to “Favorites” since all the users confirmed their preference for that term during our feedback session.
Although users were responding well to the revised filter customization settings pages, they didn’t feel confident that their settings would be saved once they returned to the main menu.
I removed the back link that said “Menu” on the filter category page and replaced it with an “Apply” link. Once clicked, this closed the window and returned the user to the main menu. I replaced the selected filter icon with a “Done” link on the menu page to return the user to wherever they left off in their promo search prior to clicking the filter preferences icon.
At the beginning of this project, our objective was to create a product that would help bettors quickly find information to help them become more profitable.
We discovered that sportsbook promos play a major role in boosting the return on winning bets and incentivize users to bet through the platforms that offer the best deals.
Therefore, aggregating promos is a viable means of achieving this goal.
Research and testing concluded that BetFriday has potential in the marketplace and our prototype offers an MVP of basic features:
The feedback we received from users was enthusiastic and they saw value for a product like this in their betting process so this has motivated us to pursue further development.
