Mystic Gems

UX Design / UI Design / Game Design
Overview: I was tasked to concept an idea for a match 3 game, designing the look and feel of the main in-game screen with a focus on skeuomorphic design, paying particular attention to light, shade and texture.

Platform: Mobile
My Role: UX / UI Designer
Tools: Photoshop, Illustrator, Figma

Research


I began by investigating the genre and the target demographic. I checked out the work of King, Tactile Games, Wooga, Outplay, Rovio and some others, for match 3 references
A Ul artist mentor of mine used to work at Wooga and Outplay, so I was lucky enough to be able to quiz him on these games. The target demographic is largely female and includes a lot middle aged and older players

Wireframe

Next I made a wireframe, deciding to work in iPhoneX due to it being a nuisance device and I wanted to show how I tackle such a issues from the get go, rather than go with a simpler screen
I left a 20px non-interactive margin on the left and right sides. There is at the top a moves counter, a level counter, a puase button and 4 containers for goals (like match 7 red gems)
On the bottom we have space for 4 boosters and the gameboard's 7 x 6 tiles was just a happy medium between what I saw in competitors. I put the wireframe onto a real iPhoneX device to make sure it felt ergonomic in my hand

Artwork

Now I moved onto the art pass. I took a few reference images to try and get a mood. I wanted the game to feel a bit like it's an arcane puzzle box game that maybe holds a secret if you win. Like a victorian, jewelry inspired 'Lament Configuration' from the film Hellraiser - but with no horror elements! More Harry Potter mystery feelings.

Style

Here is the colour range I settled on. It's a little spooky, mysterious but also rich and decadent, with a lot of high contrast so that things can POP! and feel really TACTILE, since this is a touchscreen game.
​High contrast will help with ACCESSIBILITY, as the different elements should be easier to tell apart. More on that later.
​Font choice was Trajan Pro - a really legible but 19th century looking font, perfect for this!

Game Board

Here we have the game board, its important that the screen is pleasant to look at, you'll be spending a lot of time with it if this goes on to be a live game which can run for years! The screen s to look like a gilded velvet jewellery puzzle box.
I made a sample popup to show how I might tackle other UI in the project. The buttons feature a white ring around their colour, this rule should help keep UI buttons distinct.

Board Pieces

The board pieces are like marbles or precious gems, stored in the puzzle box. Each one is themed after a zodiac sign. I'm alluding to maybe some kind of magic which the puzzle is tapping into. I think the target demographic would enjoy this, game writers would likely have it more fleshed out.


Each piece is made to look like you want to hold it - I think it's very important in games like this - and remember versions of these board pieces might be used in SHOP artwork, where the bookings are made - so you have to want to own them, to HOLD them!
Finally - ACCESSIBILITY. I'ved used different shapes and internal icons which will aid players who are colour blind, or similarly impaired

Implementation

Let me briefly discuss Unity UI implementation of my work. I'll quickly detail how I might go about making sure keep a project optimised and at a low buildsize building these UI screens I mocked up.
Most of my assets can be shrunk and sliced as small sizes, like 64 x 64
We can achieve the lens flare FX by using a sprite combined with a material set to additive blend mode
We could keep sprites white and colour them in-engine to reduce our atlas sizes
We could use a masked particle effect on something like the moves counter star's red orb to make it seem like a crystal ball
Velvet pattern sprites could be cut in a way so that they can tile and still retain a small size
Ul animations (tweens maybe?) should be used to ensure screen transitions have a little life and glamour to them
With proper anchoring, parent-child hierarchy, watching out for raycasts, baking certain assets together, prefabs/variants, using the profiler tool (to see if a scene is putting pressure on the system) and cleverly keeping duplicates of commonly used sprites across several atlases (so you're not loading in several at once) we can get the game running very optimally.
If work is made 'clean and smart' it means future employees can jump in and work away without much deciphering. And these match 3's tend to live a long life as a live game, the team might cycle in/out several new people.