The Project
SB tech provide online white label platforms for sport betting to their customers
They had a desktop solution but the demand for mobile applications arose, the problem that Apple would not allow this type of applications to be deployed on iOS.
The solution was to create web based mobile application that will be accessible form iOS (and any other device)
I was hired as a contractor to deliver an end to end solution that includes UX/UI and develop The UI in web technologies (to a interactive prototype level)
Research, Ideations and conclusion
Accompanied by the customers support manager at SB Tech, we defined user flows and researched competitors solutions.
After a short ideation process we came to the conclusion that there is no need to "invent the wheel", there was one significant competitor and all the mobile solutions we researched were following about the same (simple) user flow and design patterns.
The one thing we noticed though, that most of the solutions we evaluate suffer from usability problems: the layout was somehow confusing, the controls was usually too small and there was a readability problem all those problems Resulted from displaying lots of information
UX
In order to create a more usable application I created a wireframe click through prototype that was constantly tested (on multiple) devices.
until it got a good balance between usability and information display (The need to display a lot of information is to improve conversion rates)
until it got a good balance between usability and information display (The need to display a lot of information is to improve conversion rates)
Visual design
Because the product was intended to be White label, there was no intention of investing in visual design (because each end customer is supposed to provide their own design), but to use iOS default visuals in design and development.
The plan changed when SB tech intended to showcase their mobile application at a major gaming event.
As there was no time to finish the application development was in very early stages, I was asked to come with a unique (user interface) design under the SB Tech brand on the existing wireframes prototype.
Sport Icon Set and Live game playground assets
Challange expected - interactive prototype
Part of the contract was to deliver a responsive HTML5 solution.
When signing the contract I thought I could handle it with a plugin that shipped with Adobe Fireworks for exporting the designs into JQuery mobile applications.
Of Course it didn’t work well, and wasn’t optimized enough to deliver.
Hiring a developer was too expensive, so I decided to take the opportunity to learn and write a prototype application from scratch using HTML5, CSS3 and JQuery, the solution I delivered can be seen here.
When signing the contract I thought I could handle it with a plugin that shipped with Adobe Fireworks for exporting the designs into JQuery mobile applications.
Of Course it didn’t work well, and wasn’t optimized enough to deliver.
Hiring a developer was too expensive, so I decided to take the opportunity to learn and write a prototype application from scratch using HTML5, CSS3 and JQuery, the solution I delivered can be seen here.
CSS Based playing field
In sport betting when displaying live games there is a header with the game info.
This info will be presented on each side of a sport field graphic from top or 3D like perspective view.
We found that there is some problem with those headers in mobile:
Few sizes need to be created (for each game type) in order to display right on different device sizes, that mean lot of work to create and maintain
This info will be presented on each side of a sport field graphic from top or 3D like perspective view.
We found that there is some problem with those headers in mobile:
Few sizes need to be created (for each game type) in order to display right on different device sizes, that mean lot of work to create and maintain
It takes too much space,
It uses a large amount of data and slow the application
Instead of not presenting the graphics like other applications do, I came up with an idea to create something light and dynamic instead of those picture:
In order to take less space I suggested to have a side view
In order to take less space I suggested to have a side view
Instead of using one graphic per game type I develop a method to use lightweight icon size graphics to build each field dynamically using CSS:
I planned the perspective with 3D and then use it to draw the graphics in the right sizes and perspectives
The sprtie used to draw all fields
Some game fields experiments
The way it looked in the application
My code in the final product
I handed the prototype to a 3rd party developer to continue the development
One the right is an example of the final product branded for a client.
I was proud to see that many features from the solution I delivered were implemented as is in the final Product.
That includes: interaction, layouts, the icon set and the CSS that allow to dynamically and optimally build the specific sport fields for each sport type
The live application after full development, (re) brended
Achievements
• Decide not to invent the wheel
• Learn responsive design
• Supply an end to end solution
• Deliver interactive solution with HTML5, CSS3 and Javascript
