AUTOMETED SYSTEM DESIGN

At Gaming Realms as a B2B and B2C type company, we've been looking at how to improve our B2B platform.

Our goals were:

1. Create a centralised and automated design system that will support 12+ casino brands
2. Make the system scalable and ready for future updates
3. Build a pipeline between - design and development
4. Start design thinking across the company

Our framework constituted a complex system enabling users to top up and withdraw money. It resembled a banking application but included additional features such as games and gamification.

The Sketch file itself comprised over 250 unique screens along with Variants and messages. I developed procedures, workflows, and commit strategies to navigate such an environment effectively. 

Building up the pipeline

The platform hosted 12 casino brands, each with a separate template. However, by implementing my master template system, we streamlined our workflow, only needing to modify the master file.

I collaborated closely with the Head of Front End Development to enhance our workflow. Together, we developed a Sketch plugin capable of exporting the entire template seamlessly in one go.  

Building up the pipeline

The platform hosted 12 casino brands, each with a separate template. However, by implementing my master template system, we streamlined our workflow, only needing to modify the master file.

I collaborated closely with the Head of Front End Development to enhance our workflow. Together, we developed a Sketch plugin capable of exporting the entire template seamlessly in one go.  

This innovative tool not only exported the layout but also captured crucial elements such as colours, fonts, and assets, ensuring consistency and efficiency throughout our design process. Our collaboration streamlined the transition from design to development, allowing our team to deliver high-quality products with speed and precision.

The Design System - master template

I created a slingo.com master template. All templates were auto-populated (via plugin) with the features that I’ve added to Slingo.

I established strict text styles and colour hierarchy. Each brand had dark and light modes. I built a custom design lingo inside the sketch file.

That way, components could be easily created by other designers. The design elements were easy to set up and understand.

Each brand had dark and light modes.

I built a custom design-lingo inside the sketch file.

That way, components could be easily created by other designers. The design elements were easy to set up and understand.

Brand guidelines

Guidelines for other designers were an integral part of my job. I created a main document with all the rules and measures.

Page examples illustrating documentation for our internal guidelines serve as invaluable resources within our team. These meticulously crafted documents offer detailed insights into our established protocols, best practices, and design principles.

The Outcome

Successful Business Impact:

The implementation of the design system and framework proved to be a significant success from a business perspective. Notably, there was a remarkable improvement in loading times, with speeds increasing by fourfold. This enhancement undoubtedly contributed to enhanced user experiences and satisfaction.

User impact

Users expressed high levels of satisfaction with the system, particularly due to the notably faster access to our products. The optimization of loading times directly translated into improved user experiences, demonstrating the system's effectiveness in meeting user needs and expectations.

Valuable Portfolio Asset:

The system emerged as a substantial asset within the company's portfolio. Its demonstrated success in improving loading times, enhancing user satisfaction, and enabling rapid brand creation underscores its strategic importance and value within the organization's offerings.