My Role

Research – user interviews
Stakeholder interviews
Competitor analysis
Workshops
Prototyping
User Interface Design
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

A fragmented and inconsistent experience between the Poker, Casino and Sports brands navigation is causing confusion and mistrust in our customers. Each brand offers a differing experience, contributing to usability issues and frustration .

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 new account creations by 15%.

The business would like increase revenue by increasing the number of people making a deposit by 15%.

Business problem statement

Discovery

Formulating assumptions about usability pain points

We analysed existing journeys within the navigation and accessed analytics from SEO that indicated the main drop-off points. We then held a brainstorming session to help formulate assumptions about usability pain points and roadblocks for our customers. This helped gauge what we wanted to learn from our customer interviews. This helped form our interview guides.

We headed to the Hippodrome Casino paired up in twos with one person taking notes, the other asking questions.

Analysing the notes, we were able to spot emerging patterns, proving some hypothesises and disproving others. It helped us better understand the pain points and focus on areas for improvement.

In review playback, each team member read out their findings, which were transcribed onto sticky notes and grouped into themes. The process of reading, grouping and discussing helped get everyone’s input and build a shared understanding within the team.

Emerging patterns in our usability studies

Some of the trending patterns emerging in our usability studies started tallying with our customer support interviews with users complaining of difficulty in finding information, varying brand experiences between Poker, Casino and Sports, difficulty in making a deposit and being hard to use on mobile.

Interviews were conducted with stakeholders, product owners, directors and the customer service department who were able to provide vital customer feedback on our existing navigational problems. Leadership placed strong emphasis on promoting Responsible Gaming.

Stakeholder interviews

Key Findings

  • Discoverability issues
  • Inconsistent and fragmented usability issues between Poker, Casino and Sports products
  • Outdated look and feel
  • Hard to navigate between products
  • Difficulty in being able to make a simple deposit
  • Too many clicks/ taps to create account

Research

Connection between research insights to design decisions

We were able to create insights from our qualitative user research in four steps.

• Extract and summarise data
• Find patterns across participants
• Create insights
• Organise in digestable formats

From the themes created, we were able to write a user need statement which were organised in digestible research artefacts and presented to product owners, directors and stakeholders to gain their feedback.

From the data and observations, and by asking users a lot of “Why?” questions, we were able to uncover customers’ underlying needs and motivations.

We were able to connect the user insights with business objectives to find actionable insights. These were then used to make informed design decisions – such as size and placement of the “Sign up” and “Deposit” buttons with high contrast colours to increase prominence and visibility. De-cluttering of information, including removal of rarely used links and increasing white space to make the product more usable, discoverable and easy to navigate. Personalising the user experience, and simplifying our core user journeys as far as possible.

We also built customer journey maps and personas around our core users.

Personas – who are our users?

Personas poker

We identified 5 different types of player personas to design for:

• Peter the Player
• Eva the everyday escapist
• Mike the moonlighter
• Emma the relaxation gambler
• Ravid the compliment gambler

Competitor analysis

Competitor analysis

Competitive analysis was performed on competitors from related and unrelated industries. We reviewed the “Deposit” and “Create Account” journeys and benchmarked them against competitors, identifying focus areas for improvement.

User stories

User stories

A list of “must have” user stories were compiled guided by input from product owners and key stakeholders.

Ideation

Gathering ideas and Sketching

After gathering sufficient user research and defining a clear problem statement, we entered ideation to solve a a series of design challenges. To spark innovation, we focused on lateral thinking, inviting stakeholders from all over the business to help generate quantity, rather than quality of ideas. We focused on the users, rather than fixating on what what technically viable.

Each problem was facilitated in the following way:

Short opening statement.

  • Clear itinerary with timings
  • e.g. introduction (2 mins)
  • Ice-breaker activity (5 mins)
  • Framing the problem (2 mins)
  • Ideation technique 1 (10 mins)
  • Ideation technique 2 (10 mins), and so on

Each activity timed by stopwatch and everyone given a pen and sticky notes to showcase ideas.

We asked the following questions:

“How might we increase our new account creations?”

“How might we make making a deposit easier?”

“How might we make content more discoverable?”

“How might we cross-sell Poker, Casino and Sports?”

“How might we make navigating between product verticals easier”

“How might we personalise the user experience?”

“How might we integrate the Stars Reward widget?”

“How might we make promotions more prominent?”

…and so on.

Sketching ideas

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

Scalable & future proof design to accommodate new licenses & brands

The Poker, Casino and Sports logos have an equally sized vertical height and spacing to allow easy switching between brands, allowing the business to cross-sell its different offerings. Each brand now has a unified, consistent navigation experience to increase usability. White space has been left should extra brands need to be added in the future.

3 main Stars Group product verticals
Responsible gaming and contact information

Promoting responsible gambling & reducing calls to customer service

A high level of emphasis is given to regulatory requirements promoting “Responsible Gaming”, making sure it is highly visible and accessible from any page on the site. It was given text button status (without container), not to distract from nearby content, but still remain prominent. The design helped reduce calls to customer service by linking to an FAQ help centre section and only showing the phone number when customers drill down into page information.

Increasing sign ups

Easily findable “Login” and “Join now” buttons to the top right of the design follows conventional UI patterns, improving discoverability. The button uses strong visual signifiers to make it stand out, including high contrast colour, size and ample whitespace. The high prominence increases visibility, click-throughs and performed very well in testing.

Join now and login

Quickly finding rewards and promotion offers

Research indicated customers wanted to quickly locate promotions and rewards. The “Stars Rewards” and “Promotions” offers have their own highly prominent section. They are accompanied by linear icons to add emphasis and aid visual scanning for information.

 

Solving discoverability problems with logical categories

One of the biggest complexities of this project was accommodating important information only relevant to specific sections of the site, but allowing it to be easily discoverable. We broke down sections into logical categories using parent and child sub-categories.

To make the navigation simple, discoverable, and accessible, we prototyped a “fat-nav” sub-navigation, which tested very well. It made valuable use of screen real estate, and was hidden when not on focus. This allowed a stripped back, clean and simple navigation and added usability.

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

Increasing deposits and introducing Stars Rewards widget

Logging in provides the customer with a different view where “Deposit” takes prime location in place of the “Login” buttons. Its size, positioning, and high contrast colour add a strong visual hierarchy, making it the top action in the new navigation.

The Stars Rewards loyalty widget has been placed in a highly visible location and adjusts to responsive screen sizes. Customers can also access their account, account balance and view their username from this view.

Mobile discoverability

The responsive mobile navigation now offers the same discoverability as the full desktop site across any device size. The new navigation adapts responsively and is made up of a series of carefully considered hierarchies of information.

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.

Buttons

Primary Buttons
Secondary Buttons

Old v new buttons style

Research conducted a few years previous to this project showed that when the button colour was changed from red to green in high contrast to our main brand colours, the click through rate improved by 22%.
Removing the gradient, and using Stars Red as a basis, I selected a green on the opposite side of the colour wheel with the same hue to generate the strongest contrast. This gave it a clean, modern, on trend feel.
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
The 100% opacity red and white signifying the selected brand and naturally drawing the eye, performed well in user testing. For unfocused states – greying out brand logos and using an 80% opacity on text, users reported no confusion to which product they were browsing 

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 as an accent colour to highlight important information and reinforce premium brand style. Unfocused links opacity reduced – unifying consistent style with PokerStars brand logo interactions

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 and unable to scan quickly for information.

I wanted to set clear hierarchies to highlight the most important information and make navigation quickly scannable. The introduction of new typography and text styles helped increase readability and made information digestible.

Decluttering the UI

The UI was very cluttered and busy to look at – adding to confusion. My approach was led by stripping out any unnecessary UI elements to declutter the interface, removing borders and adding white space where possible. This helped simplify the UI, introducing a clean, flat, modern and simplified user interface. The outcome reflected the brand values of a premium, desirable and trustworthy brand.

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

Measuring OKR objectives and key results

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 business wanted to increase Account Creations by 15%. After deployment analytics showed a 33% increase in Account Creations compared to the year before. The business wanted to increase revenue by increasing Deposits by 15%. Analytics showed a 26% increase in Deposits compared to the previous year, which vastly exceeded expectations.

Usability measurements for satisfaction

Using Usabilla software and surveys on our live site to measure the Net Promoter Score (NPS) we scored a 9 out of 10.

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