versionicon linkedinicon linkedin
2018-2019
UX AND | UI DESIGN SYSTEM | BRAND | PRODUCT
POSTED: 02/04/2021 - 4 MINUTES READ

I have a bigger documentation of this project. Please note that this is just an overview, if you would like to see more, please let me know.

The Intro

As B2B and B2C type company we've been looking at how to improve our B2B platform.

The Goal

- Create a centralised and automated design system that will support 12+ casino brands

- Make the system scalable and ready for future updates

- Build a pipeline between - design and development

- Start a design thinking across the company 

top gmr-plat
Interaction Design

I worked on interaction design of the platform for over four years. I knew every aspect and every screen. 

I was a go-to person when colleges have been trying to find something or add or remove a feature. I took a part in countless projects and I’ve been working with Product Managers, UX Researchers and Marketing.

Our framework was a complex system. It was possible to top-up and withdraw the money. The complexity was like a bank app but with even more features like games and gamification on the top of that.

Sketch file itself had over 250 unique screen plus Variants and messages. To work in such an environment, I developed procedures, workflows and commits.

Platform hosted 12 casino brands = 12 separate templates, but with my system of the master template we’ve never touched all templates, just the master file.

placeholder image

Sketch File Example

2019 User-mana

User Flow Presentation Example

The Pipeline

I worked with the Head of Front End Development. We’ve created a custom Sketch plugin that could export the whole template in one go. Colours, Fonts, Assets. 

00 Diagram

The Pipeline

Design System

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

1. I established strict text styles and colour hierarchy. I decluttered CSS styles by reducing the number of styles from 140(before) to 40.

forms 14

2. I crated dark and light modes as some brands had dark backgrounds some bright.

02 dark-light

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

That way, patterns could be easily created by other designers. The design elements were easy to set up and understand for everyone. From designers to QA.

06 lingo

4. I created a set of generic icons. But I left a window for other designers to create their own sets.

04 Icons

Example from our guidelines “How to make icons"

placeholder image

Icons In Bright And Dark-Mode

5. I created a customizable entry form fields. That could be themed when needed.

forms postcode
forms 10
forms 05forms password
forms 04
form surnameforms 02
forms 08

6. Guidelines for other designers were integral part of our process. I created a main document with all rules and measures.

b2b3b1

7. The template was a single build. Fully responsive.

desktop mob-01

8. UX has been changed from the past version.

placeholder image03 present
Framework in Action

Examples

desktop mob-04desktop mob-03desktop mob-02desktop mob-01
The Outcome

- Design system and framework was a big success from the business perspective. We've been able to improve our loading times by four times.

- Users were very happy as the access to our products has been a lot faster.

- With the new system we could build a new casino brand from scratch in just one week.

- System was a substantial asset in the company portfolio.
 

Portfolio

Recent 2019-2023

2023

Heavy Duty Challenge

Design for the AA computer game product

Product design

2021

Internet Raffles

I designed a line of products for the internet competitions.

Product design

Older works +5 years

2019

Platform
Design

I led a design system and a platform for online casino products.

GUI DESIGN

2018

Gamified Experience

I’ve researched and designed gamification features

PRODUCT DESIGN

sep 2016

Lottery Syndicates

A green-field project about lotteries. I tested and created a product

PRODUCT DESIGN

case study

2018

Slingo Boom HTML5 game

My task was to create UX and UI for free to play product

GUI DESIGN

More Projects and Samples Avalible Upon Request

Archive

+6 years old works

may 2015

Pirate
Plunder

GUI design, animations and art for company’s flagship product 

VISUAL DESIGN

2013-2015

Geonomics GUI design

I was Art Directing creation of skins for company’s instant win games 

VISUAL DESIGN

Ancient

+10 years old projects

aug 2013

Zoony
Match

Game UI And UX

GUI DESIGN

may 2012

Brainstorm iOS app

New product line design and service

PRODUCT DESIGN

jan 2012

M.E.T.A.R
Weather

New product line design and service

HEADING CONTENT

JUN 2009

Blamball
iOS game

New product line design and service

GAME DESIGN

MISC

Areas Of Interest

2010-2013

Various
Animations

Some Animations For The US Based Companies

Animations

lottery item

JULY 2020

Nathaniel 19
free font for all

As an experiment I had created a freeware font for all designers

FONT DESIGN

lottery item

2009-2020

MY Art &
Drawings

After Hours, 
My Art and Hobby

ART

lottery item
Logo A

Copyright 2024 - Adam Jedrzejewski - All Rights reserved.
All product names, logos, and brands are the property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement. Adam Jedrzejewski - London-based product designer portfolio. Available for short and long-term contracts.