My Role

Competitor analysis
Workshops
Stakeholder interviews
User Interface Design
Prototyping
Iconography
Specs
Global Style Guide
QA with dev

Working with

UX Researcher
UX Lead
Stakeholders
Project Manager
Development

Tools

Sketch
Marvel
Invision
Zeplin

Duration

6 months

PokerStars Casino desktop navigation mockup home

Problem statement

Inconsistencies in the header, footer and web navigation between the company’s Poker, Casino and Sports brands is causing confusion for customers. Each brand offers a different experience, making it hard for customers to find what they’re looking for.

Mobile web navigation is not easily discoverable nor allows access to content via a single interaction point.

The introduction of the Stars Rewards Loyalty program widget cannot be properly accommodated in the existing header due to lack of space and differing experiences.

The business would like increase customer base and account creations.

Discovery

Understanding the existing product navigation

Before entering ideation, along with a UX researcher I started analysing the existing navigation design page by page. This helped us understand the core product and break information down into categorised sections for each of our brands; Poker, Casino and Sports.
Interviews were conducted with customers, product directors, and the customer service department who were able to vital provide customer feedback on our existing navigational problems. Comments were reviewed in the app store, which helped us compile a list of pain points and strengths of the current product design.

Key Findings

Discoverability issues
Branding user experience inconsistencies between products
Outdated look and feel
Hard to navigate between products
Too many clicks/ taps to perform simple action

Research

Following our customer interviews, we collated our findings, which enabled us to build customer journeys and personas that were presented with product directors and stakeholders to gain their feedback.

These methodologies helped lay a strong foundation to move into feature ideation and prioritisation.

Competitive analysis was performed on competitors from related and unrelated industries and the latest UI trends researched. A mood board was built to review with the business before moving to designing UI concepts for the new PokerStars navigation..

Ideation

Gathering ideas and Sketching

We started gathering ideas using a feature prioritisation from a card sorting exercise and sketching out concepts. We used this ideation workshop to detail out the flows in an open discussion with team members and stakeholders to gain feedback.

Mobile header menu wireframe sketches

Desktop header wireframe sketches

Desktop footer wireframe sketches

Global header navigation sitemap

Sitemap header navigation

 

 

Global footer navigation

Sitemap footer navigation

 

Wireframing, prototyping and user testing

We had broken down the complex site information into logical categories. The biggest challenge presenting the most important information to users in a clear and coherent way. Research showed most people scan read to quickly find what they are looking for.
Wireframes concepts were drawn up and reviewed, before being made into a live prototype. We conducted gorilla testing in the Hippodrome Casino in Leicester Square and user testing with the help of UserZoom to record and analyse the findings. We then iterated the designs and user tested again, before reviewing technical feasibility with dev and taking to the UI design stage.
Mobile header wireframes - PokerStars UXMobile header logged in wireframes - PokerStars UX
Mobile wireframe footer- PokerStars UXCreate your account wireframe
Mobile burger menu wireframe - PokerStars UX

Wireframes - PokerStars desktop
Wireframes desktop header logged in fat navigation - Pokerstars

The Solution

Building hierarchies of information

Switching between brands

The 3 main product brands – PokerStars, PokerStars Casino, and Bet Stars take pole position for easy switching between verticals. Equally sized and spaced for easy selection. Importantly, space has been left for adding brands to future-proof future designs.

3 main Stars Group product verticals
Responsible gaming and contact information

Promoting safer gambling and easy contact

Above the 3 main Stars brands sits important links to Responsible Gaming, contact info and a language selector. As a responsible gambling company, The Stars Group business requirements stipulated they wanted to give this a prominent position, quickly accessible form any page on the site. Our research showed customers quickly look for contact info, should they encounter any problems, so this was also given high prominence.

Increasing sign ups

A new green primary CTA style in the top right provides a high contrast to PokerStars red and black brand colours to draw the eye’s attention to the “Join now” button. It was hypothesised this standout button would increase account creations. Login sits just to the left of “Join now” as a secondary CTA and exactly where a customer would expect to find it.

Join now and login

Scanning for promotions

Stars Rewards and Promotions links sit under the join and login buttons, accompanied by iconography to aid customers who visually scan the page looking for information. Research showed customers quickly wanted to locate info about promotions.

 

Logical categories

The second-tier level or sub-navigation adapts to the specific brand (Poker, Casino or Sports) the customer is viewing. A red underline highlights the page and reinforces the PokerStars brand main colours; red, black and white. Pages have been broken down into logical categories, where customer can dive into a drop-down fat-nav to explore sub-categories.

Sub-navigation and fat-nav
Stars-rewards, balance and account and deposit

Stars Rewards visibility and easy navigation

Logging in provides customers with quick access to their account, account balance and Stars Rewards loyalty program. Customer can easily make a deposit and easily perform actions in a product that now offers a consistent experience across the 3 product verticals.

Mobile discoverability

The mobile navigation now offers the same discoverability as the main desktop site across any device size. The new navigation is made up of a series of hierarchies of information, carefully considered and tested multiple times to finely hone the final usable product.

Mobile discoverability

Design

Approach

The UI was prototyped in Sketch integrated with Marvel and multi-variant tested with users to trial different layout concepts. Results were analysed and learnings applied through iterative design. I wanted to set clear hierarchies to highlight the most important information and use white space to free up the design, stripping any unnecessary UI elements to declutter the interface. The design outcome was a clean, flat, modern and simplified user interface. This helped reflect the brand values of being a premium, desire-able and trustworthy brand.

Buttons

Primary Buttons
Secondary Buttons

Old v new buttons style

Removal of gradient, introducing a new flat green which compliments PokerStars Red branding.
The greens add a strong contrast to the PokerStars brand, making it stand out on the page for higher clickthrough rates.
CTA’s use calming sentence case lettering, whilst rounded corners make it easy on the eye – similar to strong brands like Spotify and PayPal.
Legacy Primary Buttons
New Secondary Buttons

Iconography

A new iconography style and set was designed for use across all the PokerStars brand websites and apps to introduce consistency and familiarity and reinforce the brand’s premium style. Icon style: stripped back and linear. The one pixel linear style adds a premium look and feel and makes it easier for users to recognise and locate items in the navigation at a glance when accompanied by text.

PokerStars Iconography

Grids

Responsive grids

Total width: 320px
Columns: 4
Columns width: 64
Gutter width:14
Total width: 768px
Columns: 8
Columns width: 68
Gutter width:30
Total width: 1440px
Columns: 12
Columns width: 76
Gutter width:30

Navigational hierarchy

One of the many challenges with the UI was taking complex information and breaking in down into bitesize chunks – making sure that a customer knows exactly where they are at a glance.
A natural hierarchy was formed by greying out unfocused brands and removing their colour. This gave precedence to the impactful PokerStars red and white logo, naturally drawing the eye.

Header logos design iterations and decisions

Design decisions 1

Red underline used to indicate Casino product selected, but user testing reported confusion on which product is selected

Design decisions 2

We tested removing colour from unfocused logos, but the white text still draws the eye

Design decisions 3

A further iteration removed colour from logo and text opacity reduced to 80%, but red underline felt too heavy

Design decisions 4
Performing well in user testing – it became apparent by greying out unfocused brand logos and using an 80% opacity on text, customers could instantly tell which product they were on with the bright red and white naturally drawing the eye

Sub-navigation

Introduction of a red underline in the sub-navigation lets users know exactly where there are in the navigation and reinforces the brand.

Evolution of the sub-navigation

Design decisions 1- sub-navigation

Rounded grey corners too similar to main CTA style – users reported confusion

Design decisions - sub-navigation 2

Block of red felt clunky and clashed with main green CTA. I wanted to use red sparingly as red is often associated with errors and danger in an industry where customer trust is important

Design decisions - sub-navigation 3

White underline adds premium feel, but doesn’t enforce PokerStars brand colours

Design decisions - sub-navigation 4
Red used sparingly fits premium brand style. Other links opacity knocked back to create consistency with design style of PokerStars main brand logos 

Font choice

I chose to implement the highly readable font Roboto as the default for its easy legibility to aid finding navigational elements quickly. This was updated from Roboto Condensed, after observing users squinting during testing.

Global header

PokerStars Casino desktop navigation mockup 1440

The first global navigation release was for PokerStars Casino site.

Fat-navigation dropdown

PokerStars Casino desktop navigation mockup 1440 fat nav

The fat navigation menu helped make the complex site more discoverable, exposing many more navigation options to users. These were organised into hierarchical categories. Spacing on mobile was increased to aid finger tapping.

Language selection

The website is released in over 60 countries worldwide. This meant one of the main challenges was designing for the localised translations and worst-case scenarios. This meant testing languages in Greek, German and Russian to check the header could accommodate text translations.

PokerStars Casino desktop Stars Rewards

Stars Rewards loyalty program

The Stars Rewards widget was re-skinned in the new UI style. Re-designing the entire component was out of scope for this project.

Re-skinning create account dialog

PokerStars Casino create account

Dialog form design choices

New global form style
New Roboto font text styles and bold impactful titles
Premium linear iconography
Increased white space to improve eye focus
New high contrast global CTA’s and text link style.

Footer design

Another main design challenge, was designing a responsive footer that looks good on both mobile, tablet and desktop that set clear hierarchies to the most important information for a good user experience.
Content was logically thoughout and clustered together to allow customers to quickly and easily find what they are looking for. Trust was enforced by displaying our Responsible gaming logos, contact and social media links clearly.

PokerStars Casino footer

Deliver

Global Style Guide

I uploaded screen specs and designed a style guide for dev in Zeplin. This project formed the basis for my next project, which was to build the Stars Group Global Style Guide which would be used as the one source of truth to improve consistency between the PokerStars brands. It brought about an institutional change in the company where Zeplin would be used to style components in React and used across all platforms.

Zeplin style guide logo

Evaluate

Working closely with the development team based in a different time zone, the new global navigation was deployed to a QA testing environment. Through regular meetings, I provided feedback on UI implementation, guidance and support to help to debug the product before the official roll out.

Actions were put in place to monitor, measure and quantify success with google analytics, new account creations, revenue increase, monthly active users and time spent on site.

The site continues to be evaluated, with the UX CXD department working closely with customer services to identify areas of improvement.

Learnings

Importance of cross brand consistency

Customers expect a consistent experience across brands without having to re-learn behaviours. It makes finding what they are looking for easier and minimises confusion.

Don’t hide contact information

Though the business would like to decrease enquiries to customer support, it was reported it was one of the most searched for pieces of information. This helped form the basis for a future Customer Support help center and FAQ section to help customers self-serve their enquiries.

Psychology of reinforcing trust

During initial user interviews customers reported online security as a major factor on whether they would interact with a website. A well branded, consistent UI with trust logos and links to responsible gaming helped improve this.

High contrast CTAs

Research showed that by previously changing our CTA buttons from the main red brand colour to a high contrast green improved click through rates by up to 20%. This theme was continued and modernised for the next generation of PokerStars users with the introduction of a new flat green to help increase account creations.

People scan for information

Our eye tracking software showed people quickly scan for information and when icons were placed along text, it helped them visually recognise what they were looking for much faster.

Mobile discoverability

Most people use devices on the go and expect the same experience on a mobile as desktop site. They want to quickly find what they are looking or they’ll drop off and go to a competitor site.

Thank you for watching

View website

Back to Top