StackUp is looking to tap into the sports betting industry by developing a mobile application that appeals to a Gen Z audience. With the creation of their first app, the team aimed to develop a platform that consolidates sport betting records in a simple yet effective way.
With the pool of sports betting apps that already exist, what can we do to refresh our design so that we can empower users and stand out from the crowd of existing apps? Through our research, we found that competitors provide excess information and details that increase the complexity of placing a bet. With our mobile designs, we aimed to reduce the complexity through consolidation and increase accessibility of placing a bet.
In order to understand the needs of the StackUp app, I spoke with the product team to understand how they were attempting to break into the sports betting industry with a fresh approach. The team's goal was to bring sports betting to a Gen Z audience with simple and accessible designs that don't overcomplicate the process and confuse the user with excessive details or unnecessary metrics.
We also identified a need for a consolidated space where users could view their sports betting records across different sports books. In this current state, users would need to hop from app to app to view their betting history across different sports books. To make this process easier for the user, we saw an opportunity to provide these metrics in one consolidated dashboard rather than having users navigate to different apps.
Rather than studying what other sports betting apps were implementing, I spent time looking at competitors who offer a similar design system as to what the stakeholders were interested in. This meant examining the app designs of Mint and Credit Karma, Hotel Tonight, Groupon, and Slickdeals.
StackUp should seek inspiration from finance apps that track portfolio performance in graphs or logs. StackUp can borrow elements from how these apps organize metrics in an approachable way to appeal to their Gen Z audience and minimize the barrier to entry.
A history of financial transactions, often present in these types of apps, could be leveraged as a clean way to consolidate betting history across sportsbooks for StackUp.
StackUp could also benefit from looking towards apps like Rakuten, that offer exclusive cash back opportunities or daily deals, to promote special boosted odds that they intend to offer on the StackUp platform.
These apps build a sense a urgency into their design systems with featured promo cards, limited time offers, and clear CTAs.
Our Gen Z audience desires a low barrier to entry experience that allows them to easily connect their sportsbooks and find the best deals. Typical sportsbetting apps inundate users with extensive metrics which causes cognitive overload and thus, information paralysis. This prompted me to examine how we could design a flow that minimizes friction and keeps the process as simple as possible.
I designed a flow to map out the journey a user would take including onboarding, connecting an existing sportsbook, viewing betting history, and sharing statistics on social media. The onboarding process provides immediate access for users to sync their sportsbooks which is key as users must connect a sportsbook in order to unlock the main features of the app.
Scenario: A user downloads the app, logs in, and identifies a recent $1,000 win on a parlay bet. He shares this win on social media that shows the specific bet, how much he wagered, and how much he won.
%402x.png){kind=tracking}
I turned my sketches into basic wireframes for key frames including the dashboard, user profile, betting history, and social shareable asset. I presented these to the product team who provided detailed feedback as I developed these frames further. Specific changes included removing bottom navigation bar, greater experimentation with the social shareable asset, and further iteration on how the betting history page could be designed based on availability of data.
After a few rounds of iteration, the product team and I agreed to this UI kit to turn the low-fidelity mockups into higher-fidelity ones. My initial color palettes were more pastel and the team expressed interest in "punchier," more fluorescent colors to represent the mobile app and brand. We settled on this UI kit that features neon green and shades of gray to mimic sports like tennis. The green also symbolizes the monetary aspect of sports betting.
When it came to generating a logo for the StackUp app, my intent was to develop designs that mirrored the stacking of coins or chips. After four rounds of workshopping, we decided on three app icons (one for the app itself, a beta version, and developer version) that utilized the logo in different ways. The final design included an icon that resembled the letter "S" and the stacking of chips in a simplified manner.
These wireframes reflect the product team's feedback and implement the UI kit. Keeping in mind the team's interest in developing a simple and straightforward application for users, I opted for a clean look with dashboards and screens that delivered necessary information without overwhelming users.
Find the StackUp app on the Apple App Store and Google Play Store!
In the handoff process with the mobile app developer, I had to iron out some kinks and design extra screens for various use cases. For instance, the app required additional screens for how a bet history page would appear with parlay or prop bets which would feature multiple games or specific players, rather than one. Another edge case to design for was error states when users fail to input the correct information or did not have sportsbooks linked to their accounts yet.
The need for additional designs were discovered in the handoff process with the mobile app developers including screens for various bet types such as a parlay bet, prop bet, or typical game bet.
Users can view high level trends across their sports betting history on their dashboards, but they can also click into each sportsbook for a deeper dive of their track record.
For a more granular look into their betting history, users can see their specific bet along with statistics like their wager, result, and payout. Our initial design only accounted for game bets, but did not consider how the screens might be adapted for a parlay or prop bet.
The handoff process was new to me and I found that there were many scenarios I hadn't thought of designing for until working with a mobile app developer. As the engineer developed the app, he expressed a need for error states, specific formats for Figma files, variations of existing screens, and more. I hadn't previously considered these requests and thus, there were many good learnings for me on how to anticipate future interactions with a developer and their needs. Moving forward, I would implement frequent check-ins and open dialogue with our developers to ensure I'm accounting for as many scenarios as possible.
Wrapping up work with StackUp, I recognize there are still many features to be built on their app and revisions to be made once beta testing launches to a wider user base. I anticipate there being major design changes made based on the type of data that comes in from various sportsbooks for StackUp. I can also foresee opportunities to build out user profiles as well as increased shareable assets to increase more social media traction. For now, this design lives on the beta version of the app which you can find on the Apple App Store as well as the Google Play Store!
