GMR Design System

One reason of the resons why I started to design at all was the ability to create systems that others could use. At Gaming Realms, as we were getting more mature as a company, we felt that we need a UI system that could make our jobs easier, faster and more accurate.

 A goal

To create a design solution that will sarve as a guildlines across the company products.

🌈 Colours

I started with key colours.

placeholder image

LIGHT & DARK ☯

I've got an idea that would be good to have two separate backgrounds dark and a light per brand. It will be a safety switch and will make a design process easier.

placeholder image

Typography

In my opinion the most important part of the user interface, fonts serves as connectors with brand and as an interface can be minimalistic fonts can build the look and feel of the website.
I’m a big fan and advocate of the text hierarchy, and I love when text is easy to digest (I’m dyslectic). Because of that, I’m always starting my design with a classic three steps hierarchy. Header, sub-header and body text are the absolute minimum. 

placeholder image

For a product like a casino, we needed more. But I and Head of Development agreed to keep our CSS style numbers as low as possible.

Icons

Group%2039

Were an integral part of the interface we created some of them and sometimes, we used icons libraries, like Fonatwesome or material design icons.

Group%2040

We've researched if our icons should be flat, with perspective or 3D. But as we tested, flat non-perspective icons were the best and users found them more intuitive. From a visual design perspective, they aren't the nicest ones but they work.

Artboard24

Design elements

Were the smallest part of the framework. Once created, we can use such an element in multiple instances.

placeholder image

One or more elements create a component. We can use component multiple times but also can change some of its elements or swap them. That way, it is easy to create new components and whole parts of the interface. Im not talking here about Sketch-components but, pre-tested QA ready assets. 

placeholder image

I used a ten units grid. I wasn’t the best in terms of displays and resolutions (ideally it would be eight units). But the SketchApp move tool is set up at five units. So it was easier for me to explain that to designers instead of setting up SketchApp for everyone.

SketchApp

placeholder image

SketchApp was an essential tool for us. And without we wouldn’t be able to create a system that worked so well. Keeping our master template file up-to-date was my daily routine.
I also created a special #slack channel where any changes to our master file were committed. That way developers have been on the same page with designers and well informed about what’s going on and what is the progress in design, etc.

Form Fileds

In 2019, just after implemntation of the new framework, we noticed that our conversion rate dropped. There could be many reasons, but one might be that users were less familiar with material design inputs. I designed new fields to test this hypothesis. I took measures of the existing fields and used them as bounding boxes. That way, QAing will be much faster.

placeholder imageplaceholder image

I placed all the elements but the error message inside the box.It would be more digestive for the user and give us a much cleaner look.

placeholder image

The progress animation gives the user feedback on his actions and the sense of progress, which helps to focus on the next field.

forms password

Password validation was a crucial element for us. We want to be sure that our users use strong passwords, but we don’t want to force them to do so. We wanted to let them know that they should use a stronger password but be gentle with that. The colour of the background changes from red to orange and to green. The user is notified but not nagged win-win.

Customization of the fields was possible.
I wanted designers to use this system to create new brands, at the same time being sure that everything will be OK.


design system-examples-01a

Old Vs New

 The desktop

I built this system to be fully responsive. So I use all the components on desktop, too. It was a huge time saver, as there was a single client build per brand.

Here are some examples:

desktop mob-01-2placeholder imageplaceholder imageplaceholder image

For the user management panel, I reused everything.

Design system in action - examples

See them in action. Good design systems are hard to do, but once in place can save a lot of time and money. But are good for every company. You can ask me why :)

design system-examples-03design system-examples-02design system-examples-01

 The Outcome

Our new framework was a big success, and from my point of view it was a great opportunity to try some new ideas and fix some existing issues. We kept working on it and framework proven to be extremely fast, customizable and flexible.