Website overhaul ·

Bringing poker to life

Solo project · Used Figma, Rive & After Effects

Overview

PokerStars asked me to redesign their homepage for their application process, focusing on the UI while keeping the UX content and hierarchy unchanged. The existing website (as of 2021) had several UI issues that needed to be addressed before improving the visuals. Understanding the flaws in the current design is essential for effective redesign, followed by calculated solutions.

a screenshot of the current pokerstars hero section in 2021

PokerStars website · 2021

Overview /

UI issues

Inconsistent spacing

The uneven spacing creates confusion and disrupts visual harmony, detracting from the credibility of the interface.

Odd call-to-action positioning

This type of positioning hampers user engagement and diminishes the effectiveness of the intended actions.

Centred layout

A repeating centred layout can lead to a lack of visual balance and make the interface feel static and uninteresting.

Poor typographical hierarchy

A lack of clear hierarchy causes visual disorder and makes it challenging for users to quickly scan the content.

Overview /

UI issues

Inconsistent spacing

The uneven spacing creates confusion and disrupts visual harmony, detracting from the credibility of the interface.

Odd call-to-action positioning

This type of positioning hampers user engagement and diminishes the effectiveness of the intended actions.

Centred layout

A repeating centred layout can lead to a lack of visual balance and make the interface feel static and uninteresting.

Poor typographical hierarchy

A lack of clear hierarchy causes visual disorder and makes it challenging for users to quickly scan the content.

Overview /

UI issues

Inconsistent spacing

The uneven spacing creates confusion and disrupts visual harmony, detracting from the credibility of the interface.

Odd call-to-action positioning

This type of positioning hampers user engagement and diminishes the effectiveness of the intended actions.

Centred layout

A repeating centred layout can lead to a lack of visual balance and make the interface feel static and uninteresting.

Poor typographical hierarchy

A lack of clear hierarchy causes visual disorder and makes it challenging for users to quickly scan the content.

a zoomed in screenshot of the old pokerstars website header

Inconsistent spacing

a zoomed in screenshot of the old pokerstars website main call to action

Odd call-to-action positioning

a zoomed in screenshot of the old pokerstars website layout

Centred layout

a zoomed in screenshot of the old pokerstars website typography

Poor typographical hiearchy

Wireframes

I carefully experimented with various layouts to gauge the architecture of information that would best represent PokerStars' business/user goals. Lo-fi wireframes allowed me to rapidly test what could work while allowing me to weigh up what works best.

a collage of four wireframes

Colours & iconography

Luckily, PokerStars didn't have too many colours. This meant that only a small adjustment was needed to increase contrast, in addition to the removal of the unsuitable green. The iconography felt dated, sharp and inconsistent. This didn't really reflect the shapes within the world of poker. Therefore, I used curvy, constant strokes.

a collage of the old and new icons made for the pokerstars redesign

Top: old icons · bottom: new icons

Final designs

One of the biggest drawbacks I found with PokerStar's old website was the lack of an introducing title with lots of contrast. Using the font from their latest marketing material, I made sure that users are shown where they are, what they can do and why they should stay. For the rest of the website, you can see the multitude of solutions I made as a direct response to the previously stated issues.

Imagery and illustrations are provided by PokerStars.

a full width image of the pokerstars website redesign for desktop

a redesigned welcome offers section for mobile

a redesigned games genre section for mobile

Final designs /

Animation

Poker is filled with various motions like shuffling cards, flipping them, revealing them, and the movement of poker chips. These real-life movements are translated into the animation below.