🗓 Completed in Q3 2023
CONTENTS
COMPANY OVERVIEW
MrQ is a UK based online casino. What differentiates the company is that it builds all of its core tools in-house in order to have full control over the customer experience, as well as customer insights. Moreover, MrQ runs its own game studio in order to offer unique, quality entertainment to its customers.
PROJECT OVERVIEW
As a part of MrQ’s product diversification strategy for 2023, the team decided to launch a new product vertical under its casino umbrella. The new vertical would be a collection of classic mini games such as: Tower, Mines, Keno, Crash, Scratch cards and more. The appeal of these games - in theory - would be that they’re well established favourites and not widely offered within the gambling space.
A few challenges stood in the team's way however, mainly: 1. Creating games is intensive work and had been a slow process for MrQ in the past. The team wanted to have the ability to spawn new mini games quickly in order to validate them early on - without having to increase head count. 2. Previously, game developers were working directly with communication designers to create slot machine games. The issue this created was that there was no product intermediary to specify game flows, states, sizes, components, naming conventions and anything UX related. In other words, we were missing a framework that would facilitate work on both fronts: development and art.
PROJECT OBJECTIVES
⛳️ Create a lean design system to power all mini games, ensuring highly reusable components.
⛳️ Create a standard and reusable UI for each mini game type.
⛳️ Create a framework that enables game artists to produce implementable game art quickly, covering all required assets and states.
TEAM SETUP
Product designer (myself 🖐)
x1 front-end game developer
x1 back-end game developer / lead
MY RESPONSIBILITIES
Competitor analysis research to explore different game implementations.
Design game interfaces for all mini games.
Design game flows for mini games.
Build and maintain a scalable design system to power all mini games.
Setup Figma file templates to guide game artists in producing new games with implementable art.
Onboard developers and game artists onto the framework to help produce games quicker.
RESEARCH
Approach
The game developers had already produced some programmer-fidelity mocks for the mini games, therefore I kicked off by playing these games to get onboarded. As one might expect, these mocks were missing features, details and consideration towards the overall experience. As I played, I took screen shots to catalogue game features and states.
Next, I played and catalogued ‘competitor’ games to understand how they had implemented these same games. Unsurprisingly, a number of discrepancies between ‘ours and theirs’ surfaced. Amongst other things, these discrepancies helped me draft clarifying questions to raise with the devs.
After a few rounds of conversations with the devs, the scope was negotiated and refined - we were aligned!
Key findings
💎 Although there was a clear difference between the different types of mini games, I identified an opportunity to create components that would work across multiple game types. Doing this would minimise design and engineering effort whilst increase production speed.
💎 Many competing products featured UIs that weren't user friendly in the least. I identified an opportunity to rethink some details in order to make MrQ's games more intuitive and enjoyable.
DESIGN PROCESS
👉 Take a video tour of the design process
DESIGN SYSTEM
👉 Take a video tour of the design system
FINAL DESIGN
This section features a few select games for the sake of brevity. The project spanned just a little over 2 months, during which the design system and 7 new mini games were designed.
Developers now had a front-end system allowing them to manage a game portfolio with less effort. Game artists now had a framework for producing implementable game art - and thus new games - at lightning speed.
KENO MINI GAME
👉 Take a video tour of the final Keno game
*Please note that this mock was skinned by myself for demonstrative purposes.
TOWER MINI GAME
👉 Take a video tour of the final Tower game
*Please note that this mock was skinned by myself for demonstrative purposes.
SCRATCH MINI GAME
👉 Take a video tour of the final Scratch game
*Please note that this mock was skinned by myself for demonstrative purposes.
MOBILE MINI GAMES SIDE-BY-SIDE
LEARNINGS
Design isn’t only about addressing user and business needs but equally about creating solutions which streamline in-house efforts.
Sometimes teams aren’t sure what the vision is. Designers are well equipped and situated to put ideas in front of teams quickly, with the aim of bringing alignment and direction.
Never assume that ‘the old way’ for doing things works well. When teams copy competing products they stand to copy what works and what doesn’t. Challenge and improve!
Having a sound framework for approaching design can make teams exponentially more productive, enabling them to achieve more in less time. How people work is as important as the work itself.
GET IN TOUCH
davidportelli85@gmail.com
(+356) 7920 0774
