Blitz: A Poker App made in Unity

2020-2024 | ISLE OF MAN

Overview

To design a unique portrait fast-paced Poker app for mobile for new players of Poker giving Poker training and getting them comfortable with the game

My Role

UI/UX (Product) Designer

I took ownership for the app's full development cycle, maintaining a close collaboration with Product and development teams.

Other team members:

1 UI Artist

1 Illustrator

1 Junior Animator

Final Designs

UX metrics

First lightweight, user-friendly portrait poker game, specifically designed with novice players in mind with multiple revenue potential through Ad monetisation, Cross-selling brands in Free-to-play markets.

Process

Product "discovering and defining" phase

User Research

Thousands of online Poker players play on the desktop using multiple screens in front of them. There is still a handy amount of players for playing Poker casually on their mobile.

55%

Casual mobile Poker players

prefered portrait orientation since it mimics their social media usage.

Market Research

As a new Poker App, I ran through competitor analysis and review to ensure our alignment and validation of the idea of a Portrait Poker app for new players of Poker.

Competitor Analysis Takeaways

Other than 2 apps, everyone else is using a landscape format for Poker games.
The 2 portrait poker games are lacking in good visuals and experience.
None of the Competitor apps encourage & appeal to new poker players.

Personas

Our Target users are urban population who are nascent to Poker and needed easy-to-grasp gameplay. 2 persona types defined our core audience and players in the USA.

Michelle

Persona # 1

Age group:

35-59

Income:

$40-80K

Values:

Making enough money with small family business.
Simplicity over complex tasks.
Does play slots occasionally on land casinos when they visited Vegas or nearby Casinos or pubs.

Making enough money with small family business.
Simplicity over complex tasks.
Does play slots occasionally on land casinos when they visited Vegas or nearby Casinos or pubs.

Making enough money with small family business.
Simplicity over complex tasks.
Does play slots occasionally on land casinos when they visited Vegas or nearby Casinos or pubs.

Making enough money with small family business.
Simplicity over complex tasks.
Does play slots occasionally on land casinos when they visited Vegas or nearby Casinos or pubs.

Needs and Goal:

They blend business and leisure.
Spends their time playing online to be good at Poker.
Invests small money for achieving wins in big games.
Dreams of participating in big Poker Tournaments to win in Millions.

They blend business and leisure.
Spends their time playing online to be good at Poker.
Invests small money for achieving wins in big games.
Dreams of participating in big Poker Tournaments to win in Millions.

They blend business and leisure.
Spends their time playing online to be good at Poker.
Invests small money for achieving wins in big games.
Dreams of participating in big Poker Tournaments to win in Millions.

They blend business and leisure.
Spends their time playing online to be good at Poker.
Invests small money for achieving wins in big games.
Dreams of participating in big Poker Tournaments to win in Millions.

Jonathan

Persona # 2

Age group:

18-40

Income:

$120-300K

Values:

Makes money in investment business.
Travels a lot and plays poker casually on mobile.
Trusts big brands and has had a loyal relationship with them.

Makes money in investment business.
Travels a lot and plays poker casually on mobile.
Trusts big brands and has had a loyal relationship with them.

Makes money in investment business.
Travels a lot and plays poker casually on mobile.
Trusts big brands and has had a loyal relationship with them.

Makes money in investment business.
Travels a lot and plays poker casually on mobile.
Trusts big brands and has had a loyal relationship with them.

Needs and Goal:

They are looking for a fast poker game experience.
They want to learn in free to play games to be good at poker.
They want to invest some of their money for winning causes and charity to be famous.
They want to be seen as a celebrity.

They are looking for a fast poker game experience.
They want to learn in free to play games to be good at poker.
They want to invest some of their money for winning causes and charity to be famous.
They want to be seen as a celebrity.

They are looking for a fast poker game experience.
They want to learn in free to play games to be good at poker.
They want to invest some of their money for winning causes and charity to be famous.
They want to be seen as a celebrity.

They are looking for a fast poker game experience.
They want to learn in free to play games to be good at poker.
They want to invest some of their money for winning causes and charity to be famous.
They want to be seen as a celebrity.

Early stage Problem Solving of Tech hurdles

Implementation was challenging for the tech since none of the team members were proficient in Unity Game Engine. Therefore, Design, Product and Tech sat together and brainstormed a MVP (Minimum Viable Product) ideas for Blitz.

Problems discovered

Implementation is challenging in Cocos engine.

The application must be lightweight to avoid latency and ensure smooth gameplay.

Proposed Solutions

Tech needs to learn and develop game in Unity.

We need to create most of the elements in vector in Illustrator and Figma. Agreed to use SVGs and webp instead of heavy image formats like PNGs.

Product "developing and delivering" phase

At the discovery phase of the product we already had the data and the problems that exists from our user base from existing Poker product, we did not take too much time going into define stage.

Motivation through our brainstorming

I previously explored a portrait Poker game layout. It was challenging to implement in the existing Cocos game engine. Thus, we initiated the process of developing it in Unity.

Concept & Paper wireframes

I went ahead and started generating ideas through sketches for layout and UI from the ideas generated earlier.

Wireframes in Figma

I established a base for the interface's layout and interaction using wireframe designs in Figma.

Information Architecture for tech

Linked key screens and utilised the user journey to create multiple use cases and corner cases for the tech team.

Screen and dialog Transitions for tech

We created Interaction design and transitions via demo animations in Figma and Animate, providing the development team a vision, prior to coding the game for Unity.

Refined wireframes in Figma for early dev build

In Figma, I crafted wireframes using basic shapes and colours, allowing for effortless transformation into detailed mock-up screens at a later stage. We had finalised the font usage for heading (Druk) and body (Roboto).

MVP Developer build issues (BEFORE)

Keeping Buy button in top HUD in the gameplay screen is confusing.

Player profile on the top left and away from the table was confusing.

Better clarity needed for buttons by giving padding and margin. Text on buttons use more space on screen.

Proposed UX Solutions (AFTER)

Buy button was removed from top in the gameplay screen.

Player profile moved closer to the table make their actions clearer.

I gave icons for actionable buttons for better clarity. Used space optimally.

Added "Poker University" for new players

We created an interactive tutorial feature called Poker University to make sure we did not lose the core persona that wanted to learn Poker.

Figma Components for hand-off

I converted the Designs in Figma into components to function as a toolkit for both designers and developers.

Figma files had different versions with their own components. The instances were linked locally from their files.

Use of Figma variables for Dark and light mode

Provision for dark mode and light mode were introduced to make the app more accessible and adhere to app store guidelines. Utilising Figma variables allows for the switch between dark and light modes with just a single button press inside Figma.

Improved Game play experience

2-minute Video of the Latest Prototype in Figma

An interactive prototype video captured from Figma. If you're interested in experiencing the interactivity firsthand, visit the Figma link.

Interactive Figma prototype:

Figma link

Winning moments

Player purchase moments shared by the Product Team on Slack.

Blitz Product Learnings

Getting prototypes built in Figma speeds up the app development process and gives development team a sneak peak of the final product without coding it.
Mentored both the developers and design team members about using Figma for creating and exporting assets. Learnt asset exporting together as a team.
Learnt the use of components, style guides and design system in Figma and introduced the team to it.
Learnt patience through multiple iterations and changes to the mock ups in Figma.