Redesigned Betsafe Experience
Researched, designed, tested and shipped
Betsafe is one of the leading suppliers of online gaming products worldwide with over 450K active users from over 100 different countries and, following significant marketing investment, a very strong share of mind in Nordic and UK brand tracking studies. Since the official launch in January 2006, Betsafe had been able establish itself as one of the most trusted and reliable gaming companies in the market.
The newly appointed Managing Director wanted to rebrand and redesign one of the core products, it’s online Casino, which was was generating revenues of between AUD 9M and AUD 12M every month. This was essentially a Big Upfront Design project which would impact at least 300K active users and was the primary revenue stream for the brand and Group business.
THE GROUND WORK
Building the foundation for effective design
Modal View Controller
Re-usable code | Proven model view controller (MVC) pattern
Responsive front end framework | Out-of-the-box features | Easily customisable
Avoids repetition of similar CSS statements | Re-usable colour-scheming and a
more organised code base | Fewer HTTP requests by using the @import attribute
Design & Development Collaboration
New Design Tools
To support real time collaboration between teams, I introduced a set of new tools to support
the accurate translation of design concepts into site experience (example: Sketch 3, UXPin, Avocode).
Implemented Foundation 5 as the front-end framework and built on top of it.
Front End Style Guide (GUI kit)
I produced a modular collection of all the elements to be used in the product’s user interface, together with
code snippets for developers to copy and paste as needed to implement those elements. They include common UI
components like buttons, form-input elements, navigation menus, modal overlays and icons.
Breakpoints & Viewports
Using the Foundation 5 grid system, I worked hard to ensure that our users were provided with
an optimal content and interaction experience across all common viewports by making use
of flexible layouts, flexible images, and cascading style sheet media queries
Consistency Across Devices
I designed with a ‘mobile first’ approach prioritising only the most important data and actions
on mobile viewports and scaled the content upwards, through wireframing and low fidelity
representations in order to provide a consistent and optimal experience across all devices.