Real Odds
Real Bets
Simulate Sports Betting
My Role
Design Lead. Co-ordination with project tribe. Support FE during production.
The Problem
When users enter the app there is no way to easily add more events to their betslip
The app kicked off as a plugin to an existing host site so is can not stand alone as a product.
The Idea
We set out to add sportsbook functionality to Simulate, allowing the product to function on its own without the user navigating back and forth from the host.
Accellerated Research
Workshops with the team were setup to align ideas, and we wanted to work quickly to respond to market needs. This was made possible as the product owner has deep market insights on the user and host platform. Backend has about 15 years of experience within betting and I have over 12 years of experience in designing for betting.
The user &
data flow
Entering the simulation
The logged in host user would enter the product via a switch on the hosts 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.
Testing
High-Fidelity testing
We tested the interface using figmas prototyping tools to check how it all fits together.
Animations were tested using after effects to make sure it all flows nicely together.
(Opens Figma Prototype in a new tab)
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.
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 in your mind it could be made 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.
