Card King game UX UI design where simplicity meets Social Fun.

My Role

UI/UX Designer

Tools

Figma

Year

2023

Overview

Card King is a multiplayer card game, favored for its simplicity, social aspect and entertainment value. The game is played among people aged 25 to 45.

The primary purpose of this design was to produce a clean, straightforward, and eye-catching user interface. The second purpose was to promote the in-game currency known as King Dollar.

User Persona

Meet David Johnson

David was born and raised in UK, where he developed a love for card games at a young age.
He has 33 years old and works as an IT professional. He has a Bachelor Degree in Computer Science and works in Development for a big company.

Needs and Goals

Want to have fun.

Wants to play and socialize.

Want to use his smartphone.

Behaviour

Works a 9 to 5 full remote job in London.

 

He often played games with friends and family and continues to enjoy playing games as a form of socializing and relaxation.

 

Enjoys spending his free time playing games on his smartphone

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.

 

Because this is a mobile UI, I started by making a column grid with 4 colums, margin and gutter 32. Here you will see some of the high fidelity wireframes.

Typography

For this project I used a classic combination of two typefaces (a serif font for titles and a sans serif for the body text), more precisely Quattrocento and Josefine Sans.

Colors

Mockups

Prototype

Prototype is a working model of a product that can be used to demonstrate and test the product’s functionality and user interface.

 

In the case of this particular design, the prototype showcases the various features and interactions of the game, allowing users to see how it would look and feel in action. By providing a tangible representation of the design, the prototype helps to communicate the project’s vision and provides valuable feedback for further development.