A concept to enable racing pundits to share their tips on the go
More UI screens are available on my Behance Portfolio.
Before firing up any graphic app I went straight to code and built up a proof of concept in Codepen using a Firebase instance as the back end.
The reason to go straight to code was to see how quickly a submission could reach a user’s device via Firebase, which would likely be used in production. With the functional prototype I could test out the app on mobile networks and Wifi to get a feel for the product. I was able to show it to some industry experts and received positive feedback on the bootstrapped prototype.
Tipster App Overview
With the MVP tested it was time to flesh out the concept into a larger app that would be useful to the tipster on the move.
It should be:
- Intuitive and familiar.
- Give the tipster access to the colleagues tips on the network, in this example a Naps Table.
- Allow the tipster to control their profile, this will be shared with their tips on the network.
The sitemap below shows the layout of the app and the screens. This was then built out into more detailed screens. Using Material Design for the UI the screens were built out like a standard racing section of a Sportsbook, making it familiar to the tipsters.
The key difference is that where a price button would sit on a normal Sportsbook it has been replaced by a selection box.
Placing A Tip
At the foot of the race card the user has the facility to input their tip either as text, video or audio (1). Building the app mobile first allows the user multiple media methods to share their advice and selection from the same device.
Who hasn’t been out for a meal these days that one of the party tags you in? Geolocation is used here for similar supporting information. Should the user be at event, they can tag themselves at this location (2). A pundit at a live event is closer to the action and the information they provide deemed more valuable, so it makes sense to make it easy for them to do so through the app.
To complete the loop on this prototype I pulled together a mockup of an Android Sportsbook App that follows the material design guidelines.
From the race card the user is notified that there are tips available next to each selection and Toast appears as tips are added. After running the wireframes past Android developers it was advised that the tips should sit on their own view, a hierarchy level below the card, to allow deep linking to the tips from push messages and other inbound links. This also allowed the user to scan specifically for tips on a specific race.