Compound is the working title for Phoenix Group’s design system. A design system that aims to support multiple child brands and both web and native platforms.

Compound is the working title for Phoenix Group’s design system which has the long term goal of being the system for all of their digital real estate.

The background on building Phoenix Groups design system

Compound Design System

The creation of a multi-brand design system

Design systems are more than just UI components that build interfaces, they are a centralised approach to creating user experiences.

Working on Wood Mackenzie's in-house design system, Hydrocarbon, has taught me it takes a number of factors and disciplines to deliver a comprehensive system. The design system is central to the build of their cutting-edge Lens product

Our goal is to allow teams to iterate and build their projects fast and consistently. To achieve this, a solid set of UI components also require centralised documentation, adoption by the production team and the creation of a design language.

Hydrocarbon is the design system of Wood Mackenzie, this case study explains how we built it.

Hydrocarbon Design System

I love working out, years of sitting at a screen have taken their toll on my posture and I learned to counteract this with functional fitness and strength training. Four years ago I joined the Street Parking programme and community. The community has an extremely vibrant community and I shared a redesign of a similar fitness app.

At the start of the UK lockdown, their owners reached out as they needed a UX/UI designer to join their engineering team that was creating an MVP of their platform.

This was a passion project to be involved in, I was given the opportunity to design and resolve a lot of the issues myself and other community members were facing.

The technical team was already in place alongside a deadline to start receiving new customers on to the platform. Street Parking already had an existing customer base of over 35,000 home fitness enthusiasts but with lockdown forcing gyms to close, their customer base was growing over 10% per month.

The member base had existed across a number of platforms and services; Wodify, Square Space and Instagram. The goal of the team was to build a bespoke enterprise platform that could be tailored to suit their programs, promotions and fitness challenges.

The development team quickly grew from two Angular developers to a team of eleven. With a PO now at the helm, the platform went from being a web product to also delivering a native application on Nativescript.

As the only designer on the team, my coverage included the UX/UI for :

Nativescript application for members that would be delivered on iOS and Android.

With over 500 Street Parking workouts under my belt, this meant I had to rely on my own experiences along with the feedback I'd captured in the Facebook group to get an idea to market.

Until launch, user testing had been limited because the new product was under wraps. Beta access was given to long term users who provided initial feedback and testing. Fortunately, the overall experience was an improvement and I was able to deliver a design that was well received.

It should be noted that my work wasn't only to create the visuals for all of the platforms but the actual user flows.

Working with the PO and System Architect, who were also long time Street Parking users, we merged and streamlined the previous three platforms into a single flow that could be delivered to both the web and native applications.

The back and forth on this part of the project could fill a case study in itself.

Working with a remote development team to provide design for a bespoke fitness platform.

Street Parkin

Designing a bespoke, global fitness platform & apps.

William Hill is a household name - not just in the UK, but across the betting world. They've transitioned to the world of online gambling very successfully, with horse-racing accounting for around £1.4billion of turnover in 2017 alone (and it's very much part of their history).

But in today's highly competitive - and lucrative - world of online betting, William Hill can take for nothing for granted. So when their then Director of Sportsbook (i.e. Head of Betting) challenged the online product team to deliver the 'best horse racing experience on the market', he meant it.

It called for smart user-centred design. It called for a presence to combat the promiscuity of punters with an average of two or three accounts across different bookmakers.

And it called for a willingness to knuckle down to get the job and that's what I did…

First phase of redesigning William Hill's horse racing product.

Willliam Hill Horse Racing - Part 1

Part 1 - Redesign of the horse racing section, starting with the meetings page.

The horse racing racecard. For anyone who's not a fan of racing, it's hard to underestimate its importance to the betting experience, whether offline at a meet or, here, online. It brings the runners and riders to life for punters - and it's worth over £1 billion in turnover for William Hill racing.

Every horse racing site features a racecard though. So our challenge was to make the William Hill racecard a key differentiator - a one-stop-shop for users to explore and validate their choices, make it easy to place bets while being able to use independent data for relevance (unlike other sites).

Be the first racing product to provide independent data from two sources; Racing Post and Timeform. This should increase bets placed per active based on previous data and analysis.

Fix a number of legacy issues on alternate markets; forecast/tricast, match bets etc. This will increase turnover on these markets.

We have seen that streamed events on all sports increases turnover, therefore, the signposting and labelling for streaming events should be clearly labelled.

Integrate multiple promotions and concessions for the user to opt-in to or be made aware.

The second part of the case study outlining the redesign of William Hill's horse racing section.

Horse Racing Part 2

Part 2 - Redesign of the racecards across breakpoints.

View William Hill Virtual World (UK Only)

Virtual Sports is surprisingly one of the largest visited parts of a Sportsbook, filling that void in betting for customers that don't want to burn through their balance on slots or table games.

At William Hill our Virtual World section, containing virtual racing and football products, was receiving a high volume of traffic, but unfortunately had been left to linger without analysis, optimisation or love for a couple of years.

My task as the UX designer and Sportsbook UX lead was to work with the Product Owner, business stakeholders and development team to deliver a new product before the 2018 World Cup.

The key performance indicator (KPI) target for this revamp was to increase turnover by 25%. Although the virtual product had been poorly supported, and pretty much left untouched since the first MVP launch, it was still generating a large amount of income. As mentioned previously, sports customers that didn't want to venture into casino products would prefer to play virtual sports between games or in dead spots in the sports calendar.

Case study of redesigning William Hill's virtual world product.

Virtual World

Redesign of William Hill's Virtual World Product.

Just Andy

I work with design systems and tinker with code...

Overview

Compound

Overview

Hydrocarbon

Overview

Street Parking

Overview

Horse Racing Part 1

Overview

Horse Racing Part 2

Overview

Virtual World