Revitalized Thrills: ChanceCity Slot's Seamless UI Redefines the Gaming Experience!

My Role

UI/UX Designer

Tools

Figma, Illustrator

Year

2023

Overview

Crafting a stellar gaming odyssey, I personally spearheaded the redesign of Chance City, a sci-fi slot game. From concept to execution, I meticulously revamped the entire user experience, ensuring a polished and immersive journey.

The first step was to think about the UX of this game, the target age group, the players, and the platforms the game will run on.

I identified the following issues with the current design:

  • Bad font choice – the lizability was very poor
  • Layout problems – the UI was too cramped (no white space)
  • Inconsistent design – Every window has it’s own rules of design
  • Outdated look – The initial design was outdated and wasn’t optimised for mobile.
  • Bad User Flow

User Persona

After some research, I’ve found that this game is for ages 18+, especially 18 – 45 years old group. This means that the elements must be large enough to be touched, but the in-game elements should be unobtrusive.

Meet Norbert

Norbert is a 24 years old optician who works long hours at a clinic.

He has a bachelor degree in optics and lives in Essen, Germany.

Needs and Goals

Want to play online.

Wants to play a challenging game.

Norbert plays the game only on his smartphone and tablet.

Behaviour

Works a full time job as an optician in center of Essen.

When he has no clients, wants to play a slot game.

He is familiar with digital tools and is comfortable using them
to manage his score and track his progress

User Flow

A user flow is a visual representation of the steps that a user takes to complete a task on a game. It is a way of understanding how users interact with your product and identifying any areas that may be causing problems.

Wireframes

A wireframe is a low-fidelity, visual representation of the layout of a website or app. It is a quick and easy way to sketch out the basic structure of a page without worrying about the details of the design. Wireframes are often used in the early stages of the design process to help designers and stakeholders collaborate and get feedback on the layout of a page.

Typography

For this project I incorporated Chakra Patch  font into the game, seamlessly aligning with its futuristic theme for a perfect blend.

 

Colors

Mockups

Before & After