Sky Bet's Design System & a revitalisation of their ageing UI.

  • Client:

    Sky Bet

  • Project:

    A new UI and Design System/Pattern Library for Sky Bet.

Introduction

Whilst working at Sky Bet I lead the team in the pursuit of a new and improved UI whilst implementing a Design System and an overall more consistent way of working.

The Sky Bet product was split across two separate platforms, a traditional Desktop stack alongside a Mobile offering. The two platforms had very different UI styles (which in itself was very confusing for the customer) but also created a bigger overhead for Designers when working on an improvement or new feature as everything had to be completed twice in two different styles.

The sentiment within the business was that the product was losing it's alignment visually to the master Sky brand and sister brand Sky Sports. Being 'Sky-like' was (and is) a big factor for customers choosing Sky Bet over their competitors, the trust worthiness that comes with a well-known brand name was a major reason for customers to return to use their product, so it was a very important factor to consider when trying to deliver a new and improved UI.

As the New UI wasn't being led by the business it was my job to put together a case to try and get the piece of work prioritised, this was achieved by continual engagement and collaboration with everyone from the design, development and agile squads through to brand, product and management teams.

Process

As Sky Bet were due to deliver a single platform from their current mobile offering (case study to come soon), this felt like a great place to start.

The first thing that I did was print out all of the page types/layouts that were used across the site on A4 sheets and stuck them all on a wall side-by-side. Then in workshops asked the teams from the tribe to stick post it notes (with their own personal notes) on the various pages where they felt the UI needed attention/was inconsistent/ugly/didn't offer a great user experience (and so on). This process was completed with the design, tech, product and management teams.

As 'general users' never really look at your website or app holistically, more so screen by screen this felt like a great way of communicating out to the business where the problems lie. It dislayed the inconsistencies across the App and helped to visually indicate the problems across the whole landscape. It had also helped to start and create engagement across the business for this problem and thus to start and work on the vital buy-in that was required.

Once this was completed and had a fairly good grasp of the overall problem that we were trying to 'fix', I then set up Two different workshops with the Design and User Experience teams so that we could dedicate some time to the (potential) project. Areas we covered off were:

  • Why we were doing it
  • What the deliverables looked like
  • Critical paths/flows across the site
  • Core components
  • Competitor and industry comparisons
  • The Sky Sports brand
  • Sky Polaris (more on that below)

Before moving into discussions around more granular UI and framework items such as:

  • The main page elements
  • Buttons / CTA's
  • Typography
  • Colours
  • Grids & spacing elements
  • and lots more

The final day of the workshop was dedicated to looking at the possible implementation and rollout of the project, whilst holding demonstrations for the development and product teams to discuss and present what we had learned so far.

As part of the workshop, we identified some core components that sat across a number of our key journeys. It was felt that by tweaking these components to a New UI, it could make a big impact on the visual appearance of the site, and go a long way to addressing some of the problems we had.

As it was indicated earlier, the loss of 'Sky-ness' within the product was a major driving force behind trying deliver a new UI. Around the same time that I initiated the drive for a New UI for Sky Bet, the master brand Sky had also started to develop a new set of agreed patterns for their products. This being Sky Polaris, which was (and is) the toolkit that they currently use to deliver consistent UI across their digital footprint.

During the workshop the team and I looked through Polaris and identified common components that sat across all of the Sky sites but would also work for the Sky Bet product and their customers. We knew that the Sky Bet customers were big fan of the Sky brand and thus they would be using these patterns across the other Sky products. This felt like a great way to achieve and regain some of the brand feel that the product had lost with a simple 'lift and shift' (subject to the Sky Bet users understanding and being able to use those components of course).

Design concepts created

Based on everything that we had learned so far, I led the team in starting to work up some initial design ideas and the general visual direction that we could go in.

Presented to stakeholders and squads

The next stage in the process was to run a day’s worth of presentations to each of the squads individually, the brand team and product team. These presentations covered off the overall issue (i.e. the large scale print-outs of the current UI, complete with team feedback on post-it's), the key core components that we had identified to tackle first and the concepts for the new UI. This process naturally spourned questions, feedback and engagement from the stakeholders.

Further ideation & iteration

Working on the feedback we had received in the stakeholder and squad presentation sessions, I led the team in continuing to develop our design direction and approach.

Began user testing

It was felt that this would be a good time to start and show the new UI to the customers. User testing sessions were held in Newcastle, Leeds, Sheffield & Manchester.

Further design iteration & feedback sessions with leadership

Acting upon the feedback received from our users, we continued to iterate and craft our approach to the New UI and single platform. These iterated works where then put in front of the leadership team to continue that channel of engagement and continue to gain their backing of the overall approach.

Squad engagement

At this point, the Business Analyst and I engaged with the squad assigned to complete the project and started to discuss how we would break down the overall task and how we would best tackle the issues of rollout and so on. It was decided that we would deliver component level releases behind a feature switch, and progressively release the 'New UI' components to an increasing percentage of customers.

Documentation & sharing

I then set about in documenting the 'New UI'. This included core documentation around the the likes of the new colour palette, typography sizes, baseline grids, responsive breakpoints, through to component level documentation. To centralise the documentation I created a channel on Slack, and invited all of the squad members and relevant parties to join.

Delivering the shared design system / pattern library

I then put together a shared library in Sketch, so that all designers had access to the new patterns, colours, approved typographical sizes and so on, so that we could start and deliver and achieve the consistent 'Sky-like' UI that we had initially strived for.

Component level release

Components were then implemented, inspected and signed off for consistency and released to a % of customers. We measured the impact of these releases to ensure the user experience was not damaged by the release(s) and slowly increased the percentage of customers that were able to see the changes.

Closing remarks

During this project I learned vast amounts. I helped to educate the tech teams on why the details were important, why it was so important to have a consistent look and feel for our users whilst also managing top level stakeholders expectations and delivering a better, more consistent way for the designers to work.

Generally speaking this process helped to centralise the design language used and ultimately helped to deliver a more consistent user-experience across the Sky Bet product. It also helped to elevate the importance of the Design and User Experience teams within the business.