We worked with ABETA International to build a mobile betting app for iPhone, Android and the web to be sold to their partners and customers around the world.
We were approached by ABETA International with a unique mobile proposition: they wanted a white labelled mobile betting app that could be re-skinned and deployed for their international partners and customers as a iOS (iPhone and iPad) and Android native app available for download through their respective app stores as well as the ability to deploy as a mobile web app (accessible through a mobile browser).
Some prerequisites: the app should allow users to view live betting opportunities (data provided via the ABETA system), place bets, track winnings and share information via social media and users should be able to use the app whilst offline via local data storage.
This phase required a highly collaborative process with the client during a detailed requirements gathering phase resulting in a number of documents used to define the application prior to implementation:
- Use case definitions: we defined a number of use cases for the main actor we were concerned with (the end user) performing some of the fundamental tasks within the ap such as adding an item to their betting slip and placing a bet.
- Application workflow: we modelled the application logic by defining the transactions between the different aspects of the system, their relationships and how and when they interact with one another.
- User interface workflow: to complement the wireframe diagrams (see below) we created workflows to support the UI interactions and subsequent expected results for the interactions.
Through wireframes we created a detailed blueprint of the information hierarchy and navigation system which enabled us to outline user interfaces and interactive functionality in a prototype.
The resultant prototype was then put through user acceptance testing (UAT) and then tweaked and approved prior to the design and build processes resulting in an intuitive interface and improved user experience (UX).
Branding and design
ABETA provide technology and infrastructure to many betting organisations and outlets around the world and the return on investment for the app comes with it’s white labelled nature: the app has been designed to be re-skinned for their different customers and then deployed on their platform of choice be that as a mobile web app, iPhone/iPad app or Android app.
The branding and design work we undertook for the white labelled version was based on the ABETA International branding, following their brand guidelines.
Because the app had to be delivered on 3 platforms (and maybe more in the future) there were a number of development routes we could have opted for. For instance, one approach would have been to develop a native iPhone app (in Objective C) and then port it to Java (for Android) but this would have required 2 sets of development paths and we would still be left without a mobile web app version. This wouldn’t make for a particularly efficient approach when trying to cover the 3 key target platforms and as our expertise is in the field of web technologies it made sense to approach the project utilising these skills if we could.
Because of its MVC nature, Sencha Touch allows us to build complex applications and ABETA mobile, especially the betting module, involved complex business and application logic so the framework proved a good match for the requirements. Consequently we scrapped the prototype we had originally developed in the first release of Sencha Touch and built the full blown app in Sencha Touch 2 which was released in beta at the time development started and is now in full-blown release. In fact, we liked Sencha Touch so much that we set up the London Sencha Touch User Group!
Using the Sencha SDK tools we were able to create a minified production-ready build for the app. The tools use node.js as the wrapper to run the commands whilst the legwork of the optimisation and minification is handled by PhantomJS.
From that point the deployment of the three derivatives of the app are fairly different. Deploying as a mobile web app is relatively easy as it is essentially a website hosted on a webserver however for iOS and Android the process involves packaging the final build in PhoneGap and going through the respective app store acceptance procedures (which we will likely write about in a separate blog post).
The end of the white label development means the beginning of rolling out customised versions for ABETA International’s customs as and when they are required.
There are also already plans for further functionality enhancements including live push notifications so that users can be immediately alerted if their bet has won and a feature which will provide betting opportunities specific to a users geolocation (for instance if they are close to Old Trafford on the evening of a Manchester United game they will be pushed betting opportunities for the match).