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
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%.
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.
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?
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
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
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
Global header navigation sitemap
Global footer navigation
Wireframing, prototyping and user testing
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.
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.
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.
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.
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
Old v new buttons style
Iconography
Grids
Columns: 4
Columns width: 64
Gutter width:14
Columns: 8
Columns width: 68
Gutter width:30
Columns: 12
Columns width: 76
Gutter width:30
Navigational hierarchy
Header logos design iterations and decisions
Red underline used to indicate Casino product selected, but user testing reported confusion on which product is selected
We tested removing colour from unfocused logos, but the white text still draws the eye
A further iteration removed colour from logo and text opacity reduced to 80%, but red underline felt too heavy
Sub-navigation
Evolution of the sub-navigation
Rounded grey corners too similar to main CTA style – users reported confusion
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
White underline adds premium feel, but doesn’t enforce PokerStars brand colours
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
The first global navigation release was for PokerStars Casino site.
Fat-navigation dropdown
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.
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
Dialog form design choices
Footer design
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.
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.
Comments are closed.