Cross Vertical Nav

Overview

An enhanced user experience across The Stars Group, implementing a responsive, clean navigation system, and a consistent UI style. Key objectives included connecting all verticals within the company and establishing a unified design language across the entire web estate, fostering greater alignment among product teams.

Outcome

Successfully delivered a seamless and future-proof navigation system that connects all verticals within The Stars Group. By implementing a consistent UI style with a modern, flat design aesthetic, we achieved greater alignment among product teams and significantly improved the overall user experience.

Role

  • UI Design Manager

  • Competitor analysis

  • Stakeholder interviews

  • Workshops

  • User Interface Design

  • Prototypes

Worked with

  • UX Lead

  • Stakeholders

  • Product Manager

  • Development

  • QA

Brand

  • The Stars Group

  • PokerStars

  • PokerStars Casino

  • BetStars

Initiate

Problem Statement

​The following problems were identified across the platforms, impacting user experience and hindering business growth:

  • Inconsistent web navigation:

    • Header and footer vary across poker, casino, and sports verticals.

    • Causes customer confusion during cross-sell.

    • Creates disjointed brand experiences.

  • Mobile navigation challenges:

    • Navigation is difficult to discover.

    • Content access requires multiple interactions.

  • Loyalty program integration:

    • Stars Rewards widget doesn't fit within existing header designs.

    • Lack of header space due to inconsistent designs.

Project Goals

  1. Increase customer base and account creations.

  2. Improve navigation functionality and aesthetic.

  3. Easily adapted to cater for market licenses and legal requirements.

  4. Create consistent cross-vertical experience for users.

  5. Quick sign-up and login across all devices and verticals.

  6. Increase brand awareness of the different products, PokerStars, Casino, BetStars

Discover

To understand and address navigation issues, we used multiple research methods.

  • Heuristic evaluation: Working with a UX researcher to identify usability issues using established design principles (clean design, discoverability, consistency, access/control, help/trust).

  • Competitor analysis: Setting design benchmarks and understanding user expectations by analysing competitor products.

  • Stakeholder interviews: Gathering feedback from customers, product directors, and customer service to understand pain points.

  • App store review analysis: Compiling user feedback from app store comments to identify product strengths and weaknesses.

These methods allowed us to define benchmarks, understand core product information, and gather crucial customer feedback. The findings were shared, informing personas, and next steps.

Key Research Findings:

  • Difficulty navigating between verticals.

  • Poor discoverability of content.

  • Excessive clicks for simple tasks.

  • Outdated aesthetic.

  • Inconsistent branding across products.

Ideate

We gathered ideas from card sorting exercises and sketching out concepts. We had ideation workshops involving open discussion with team members and began to share the high-level concepts with stakeholders to gain feedback.

Define

Hi-fi wireframe guerilla testing showed users rapidly scan for information, emphasising the need for clear, coherent content. We iterated on wireframes, used UserZoom for testing, and analysed results. After confirming usability, we validated technical feasibility with development and proceeded to UI design

Switch Between Verticals

Taking the most prominent position are the 3 product verticals, PokerStars, PokerStars Casino and BetStars. They have equally sized spacing for easy selections, with additional space for more brands to future-proof the design.

Responsible Gaming

Sitting above the 3 verticals are links to ‘Responsible Gaming’ and ‘Contact Us’. As a responsible gambling company, The Stars Group business requirements stipulated they wanted to give this a prominent position, with quick access from any page. The research showed customers quickly look for contact info if they encounter a problem, so this was given high prominence.

Sign Up

 Positioning ‘Join Now’ just to the right of ‘Login’ as a Primary CTA, exactly where a customer would expect to find it.

Promotions

​Research findings showed that users quickly wanted to locate info about promotions and rewards. These links were positioned under the sign up button, accompanied by iconography to help customers who visually scan the page.

Second Tier Navigation

​The second-tier level adapts to the specific vertical (Poker, Casino or Sports) the user is viewing. An underline highlights the page and reinforces the brand colours. Users can dive into a drop-down fat-nav to explore sub-categories.

Logged In

​Logging in gives users quick access to their account, balance and Stars Rewards loyalty program. When navigating across the 3 verticals users can easily and consistently make a deposit.

Mobile

​We now see the same discoverability on mobile as the desktop site. The 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

High-fidelity UI concepts were tested with users, using Sketch and InVision. Iterative design, informed by analysis, resulted in a clean, modern UI with clear hierarchies and decluttered elements.

Buttons

Introduced a new flat green, complimenting the PokerStars Red branding. The vibrant greens adds a strong contrast to the PokerStars brand, making it stand out on the page for higher clickthrough rates. CTA’s use of calming sentence case lettering with rounded corners make it easy on the eye – similar to strong brands like Spotify.

Iconography

​A new global iconography style and set was designed for use across all The Stars Group verticals and platforms, ensuring consistency and to 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 at a glance.

CMS Grid System

​Working with the CMS development team I created the company's first custom responsive grid system. It was this system that development requested the designs to follow.

Typography & Colour

Despite the Art Directors initial preference for a custom font, I conducted cross-platform testing of Roboto against the custom font. Based on feedback and legibility/maintenance considerations, I aligned product teams on Roboto as the global font, reserving the custom font for marketing.

The updated colours reflected the brand's premium, desirable, and trustworthy values. Key components were documented in a parallel global UI pattern library.

User Interface

The approach was to declutter the interface, removing borders and adding white space where possible, stripping any unnecessary UI elements. By simplifying the UI and introducing a clean, flat, modern aesthetic we were reflecting the brand values of a premium, desirable and trustworthy brand.

Fat Navigation Dropdown

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

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. I had to test languages in Greek, German and Russian to check the header could accommodate text translation

Stars Rewards Widget

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

Dialogs

An extensive reskin project requiring a detailed set of design instructions for dev on how to apply the new global form style. The new style utilised the Roboto font with bold titles, white space to focus the eyes, high contrast CTA’s and premium linear iconography.

Footer

When designing the responsive footer it had to work on mobile, tablet and desktop, setting clear hierarchies to the content for a clean user experience. The content was logically positioned using subtle tones and space, allowing the user to quickly find what they need. Trust is essential, so it was important to clearly display the Responsible gaming logos, contact, and social media links.

Develop

Zeplin & Development

I uploaded the project screens and specs into Zeplin, working closely with development teams to deliver assets. In addition to these screens I would reference components from our global UI pattern library, which was the sole resource in bringing together all The Stars Group assets and defining their visual consistency. Development created a QA testing environment where I could provide regular feedback on the implementation, helping to debug the product before rolling it out.

Measure

Testing plans were created to measure and quantify data using google analytics, for new account creations, revenue increase, monthly active users and time spent. The CXD department continued to work closely with other departments to identify areas of improvement. Key learnings included:

  • Users expect a consistent experience across products without having to re-learn behaviours.

  • Customer support was reported to be one of the most searched pieces of information. This kicked-off discussions with the Customer Support team and initiated a help centre and FAQ section project to help users self-serve their enquiries.

  • During user interviews customers reported that online security is a major factor on whether or not they would interact with the website. Trust logos and links to responsible gaming helped improve this.

  • Our eye tracking software showed that when icons were placed with text, users would visually recognise the information much quicker.