Real Odds
Real Bets
Simulate Sports Betting
My Role
Individual design contributor. Branding, end to end userflow, refining the user experience and supporting developers to realise the end goal.
The Problem
Reduced betting market during off season
During the off seasons there are limited events happening and users didn’t have much choice in their betting opportunities. Users wanted a quick game inbetween moments, or a social space to hang out with entertainment.
User Research
🎛 Quantitative Research
From data gathered we see that there are 2 main access channels and users types.
📱 The online retail users who access via a mobile, and that is the main form of internet access. Most access would be done via an android device likely 1 – 2 years old.
🏪 The cashier users, whose access to any product would be from a shop. They are exposed to marketing materials and try out new products that are promoted to them in these shops.
⚽️ Qualitative Research
We asked for help in this phase as local knowledge is vital in creating a product people want to use. We put together questions to ask what the users do when there are less sporting events happening. Most would fill the time either playing casino games, or football related mobile games.
In the shop the users have chosen to place bets via the cashier or self service tills. After speaking to locals the response is usually due to trust and having a person to physically interact with. Speaking with the cashiers who service the users, we find out these shops have turned into social gather spots where people hang out.
The Idea
The user is able to use the real odds to place a bet on a simulated outcome. The bet would be settled immediately, and to prolong the opportunities, the user can bet on it again, with each bet made, it’s outcome is re-simulated.
93% of the users from the host website were mobile users, so for the MVP this would be the first group to build for.
We had a ripe launch environment, leveraging the popularity of the host, and the user demand gave an opportunity for this app to succeed.
The user &
data flow
Entering the simulation
The logged in host user would enter the product via a switch on the bet slip.
The challenge here was to allow the user to move seamlessly into another environment.
We needed to understand what information can be transfered from the host site, what data we needed to return to the host. Having clear needs defined helped us move quickly at a later stage as the host was larger, changes will inevitably be more complex and time consuming.
Wireframing at mid fidelity
🧱Does it all make sense when it comes together?
After the userflow was mature enough I started to wireframe, placing components and defining the look and feel of the branding, forming a rudimentry component library. This method allowed the FE to concurrently build reusable components into storybook. I had to make sure that FE was only building assets that were certain to appear in the app.
(Opens Figma Prototype in a new tab)
Usability Testing
High-Fidelity testing
We tested the interface using figmas prototyping tools to check how it all fits together.
Interaction animations were tested using after effects. The easing and timing were fine tuned here.
Development
🏟 Teaming up with the developers
Team huddles with PM, BE, FE and design happened often to keep everyone informed of the latest updates.
I supported the FE developers by making animations for micro animations and page state transitions, this helped to illustrate exactly what we had in mind.
User Testing
🔎 Did we manage to solve our users problems?
We now had a working product to begin user testing end 2 end. We ran internal testings, and once that had passed with tested it on real users. It was first launched to 200 Users, and we gathered information from them, looking for any bugs that might have been missed, and general feedback that concerns usability.
From speaking to them we found that general reception was good, and people were eager to play. But….
- Realism was off, users felt there were too many consecutive goals in a short space of time and happened too often in multiple games.
- Users had to move back and forth between the game and the host site to add different events into their selections.
Takeaways
The steps of product design does not always work in the same order, it depends on the scope, launch environments, trade offs and the experience of the team.
When communicating animations and ideas, using illustrations to explain how you see it being put together helps to illustrate how you see an animation happening. Once the idea is understood the developer is only then able to solve the problem.
Developing the relationship between the developer and the designer is vital in order to realise designs. Trust and respect are the cornerstones of this.
Next Steps Refinements, & Refactoring
So the MVP was good? What now?
After the success of Simulate, we went onto refactor the webapp. Adding and refining the design system from a figma component library for designers only, to branching out into a storybook library for developers.
I go into more detail about how a design system is built here for a different product.
Further features are now in the development stage.
- User interactions during the match.
- More in match events like attacking play and offside
- [ ✅ Done ] A desktop interface for cashiers and self service. (write up coming soon)
- [ ✅ Done ] The ability for the user to stay inside the webapp to add more selections to the betslip (write up coming soon)
- A loyalty bonus scheme
Some numbers please?
🔮 In July 2020, the MVP made a successful initial launch to 200 users with around 5k bets a day in the first 2 weeks.
September 2020, Launch of Turbo speed game play, and accept new odds features. 8k users and 120k bets a day.
December 2020, Hosts old mobile integration launch with 10k bets on that platform alone. Christmas day 320k bets.
March 2021, Migration to V2 Design System, launching of cashier integration it hit a record 340k bets a day.
In August 2021 it is sitting at around 300,000 bets and 30,000 bets in cashiers a day.
Next Article
Nova futur Ltd
A solution to facilitate team work, transparency and prevent inconsistencies on a large scale SaaS backoffice.
