GMR Platform Design 

 Overview

At GMR, we decided that is a time to look at our platform and how we can improve it. As we weren’t happy with loading times and other things under the hood, after many debates we’ve decided that we will redesign our framework.

 Goals

• To improve loading times and
• Optimize our CSS less styles  
• Improve admin panel and Promo tools
• Improve overall quality of the design
• Marge two client builds into one - responsive
• Remove desktop user management panel and use mobile version on both
• And or foremost, improve user experience by improving every point above
• Develop new pipeline between design and development and the same time to improve 
• Provide a great to work with platform to our partners

“We started design thinking!” and automated solution for site development

We wanted to develop a complete system “the idea” how we work and communicate not just UI or some meaningless code.

placeholder image

I started with a Sketch plugin and template, we knew that we want to use Sketch as it is a reliable tool that saved us a lot of time and money.

I developed a design system with a simple syntax inside, and called the file a “master template” and gave it to developers saying that this will be our reference file. Every brand will follow a master template and if something wasn’t there and committed to the master file, is not a part of our system. I locked the file and took ownership of it. Also created some communication channels with developers to let them know what we wanted to add or what we added the master template.

I gave a copy of the master file to the designers and asked them to recreate every brand as a separate file.

Meanwhile, I was working with a Head of The Front End, developing our in-house sketch plugin. We found it easy and in no time we’ve finished it. 

From now on it was possible to export everything that has a syntax in it with a single click: style, colour, an icon, an asset, etc.

For e.g. “colour-bar-nag-bg” it was even easy to locate such a variable not even seeing the template and design (very handy for QA) as colour-bar-nag-bg was a background colour of the nag-bar.

With the plugin ready and code for positions of all elements in place, we pressed the export button. And magic happened we could recreate all the brands without even testing it - we tested everything, but still it was so much easier.

Now it was even possible to send just a Sketch-template to our customers and let them create their own brands, it was that easy. From one month per brand, we went down to a brand in one week. Which ideal for the business and for people in the sales department.

placeholder image

We also created brand guidelines for every brand and sent it to everyone interested: CRM, Marketing, Partners, etc. 

placeholder image

Some of the our brands.

placeholder image

A snapshot from my design guidelines 

 UX Changes

In the past, I did a few usability lap tests of our template so I knew which part of the interface we wanted to remove. For e.g. More games and search. And some more requested changes.

placeholder image

We removed more games and search from the bottom of the hero banner. We knew that our users were more keen to use the burger menu for that purpose.

platform 03

I moved search icon to the top left corner and moved a burger menu to the left. The reason for that was my lap test results and observations.

Another fresh thing was an inbox notification icon with a counter. 

platform 02

Search results

placeholder image

We’ve visited and redesigned user management panel a bit make it more clear and easier to read. We also added a deposit button as users have been looking for it.

platform 08

Wagers/Wins - user panel

platform 11-1

Deposit

platform 06

Quick deposit, it was possible to top-up without leaving a game.

platform 09-1

Transaction history - panel

platform 06

Registration journey was our top priority, we experimented a lot. 
I assisted UX researchers in providing them with designs for experiments. But, its a topic for a different case study, as it is extremly complex.

placeholder image

And the last change - We’ve redesigned gamification progress bar

Some more examples

placeholder image

Bonus page

placeholder image

And the last change - We’ve redesigned gamification progress bar

placeholder image

We have also added all the changes to the desktop client, but as a “mobile first ” company, desktop wasn’t on the top of our priority list.

If you want to read more about design system, please follow this link

 The Outcome

The creation of the new platform proven to be successful and we’ve seen that in our numbers and performance as we could gain more new users and keep existing happy as their favorite games were easy accessible.

In March 2019, Gaming Realms signed the deal with RiverI Gaming and sold its real money gambling part of the business.

Our platform has become important asset of this deal. And is being used to build casinos websites across the globe. It was a pleasure to work with some passion’d and talented people. And I can only estimate how many things I learned there.