BT Football Matchday Experience
Background
When BT Sport launched in 2013 it was hastily tacked on to an existing CMS that was reaching the end of its shelf life. A decision was made to move across to AEM which offered the chance to make the website an experience our customers expect from a leading sports broadcaster.
As one of the UK's main football rights holder and with live sport viewing increasingly moving away from TV towards digital, we ceased this opportunity to relaunch the Match Day page and drive value for BT. Harnessing Opta's market-leading statistics suite, we set out to deliver a modern and meaningful experience to football fans.
The project was complex, involving stakeholders in many different BT business units and multiple third parties. We successfully created a culture in which agile work practices were actively embraced through regular stand-ups and co-locations, with colleagues continually feeding into and prioritising each other's backlogs.
My role
Discovery, user research, UX, UI, animation, testing
Team
BT
Discovery
We embarked on the project with a number of user interviews to understand their behaviours and habits before, during and post a football match using existing web and app experiences.
We believed by understanding this timeline better, we would have more of an idea of what ‘triggered’ a customers activities and experience over time.
Findings
Findings map
Define
From our findings we set about defining the following:
User needs
As a football fan I need to easily access the match day content that I'm interested in so that I don't spend a lot of time looking for it
Business goals
Drive deeper engagement with sports content that supports our exclusive rights
Engage users with BT Sport coverage to drive sales
Objective & key results
- Increase in engagement
- Increase in CSAT
- Increase in conversion
- Reduce in churn
Hypothesis
We will drive deeper engagement if users have access to all relevant match content in one place. We will achieve this by creating Match Day pages.
We will drive deeper engagement if users can easily access content relevant to their interests. We will achieve this by creating an in-page navigation and 'match-switcher'.
We will drive sales if users are presented with entry points to sales journeys. We will achieve this by clearly labelled and carefully placed CTAs.
Design
Wireframing
To start with, I worked closely with the PO and developers to understand any technical limitations. Building the framework in AEM meant we could draw upon any existing components if they were relevant to the experience.
I mapped out a rough skeleton to understand the hierarchy of content, then pulled together some low fidelity wireframes of the main content areas to help capture the different data points.
Whilst we had the great opportunity to use Opta's market leading data feed to inform a lot of the statistical behavior, I also set about understanding which content data points BT would need to support. e.g. by creating libraries for every single team bag.
From the insights gathered we choose to focus on these content areas:
Match Headers - Clearly displayed team name and scoreline that you can see at a glance.
Live page - Live commentary feed of the game
Stats page - In-depth stats of key interest areas
Team page - Line up and formation
Form page - Showing last 5 games across all competitions
News & Video - Everything from buildup articles to highlights after the game (we made the decision to group news and video due to the availability of content for lower league teams)
Content sections
Early Prototype
The header area is key to the experience - it’s the first thing customers see. Based on our insights, we knew we needed to show things like a clear scoreline and TV channel where relevant. There were several things to consider, so I wanted to make sure content and layout were focused in order to reduce cognitive load.
Below the header, users have an enticing entry point to watch the game live if we are broadcasting it. Existing BT Sport users get taken to the live stream, while non-customers can purchase BT sport via the 'Get BT Sport' CTA.
Based on the user needs, I wanted our customers to easily navigate around the match page experience. To do this I included an in-page navigation rail with clear headings, thus allowing users to find the information they are after with relative ease. I also designed a match-switcher component that would allow our customers to flick between the live games as well as see relevant information like game time & scoreline at a glance.
States for in page navigation
Based on our findings map, the navigation will be contextual to reflect the insights gathered from the customer research.
Pre match - Users will land on 'Form' for a quick snapshot of previous performance (also helps with Fantasy Football selection)
During the match - Users will land on 'Live', a live commentary feed of the game to keep up with what’s going on in real time
Post match - Users will land on 'News and Video' to drive deeper engagement with match highlights and post-match interviews
States for watch button
The watch button will vary depending on the time or availability of a replay or stream.
When BT don't have rights to a match, there will be no watch button or link to buy.
User testing
I carried out some moderated user testing in order to capture their reactions to three key areas:
- First impressions/perceptions of the page
- Navigation and functionality
- Finding information
I asked participants to complete a number of tasks, getting them to think out loud as they went along and provide as much feedback as possible.
Early user testing was really promising and the results left me in a confident position to refine and ultimately explore to the visual design phase.
Results
Our users…
- Liked how visible the score line was. Users navigated to sections easily.
- Liked the breadth of content shown for the game.
- Understood what competition the game was for.
- Using the match switcher: easily switched between games and liked the ability to see the score at a glance.
What didn't work so well…
- Scroll depth of the teams and form page (especially if you were an away team fan) felt a bit laborious.
Match Switcher
- Users didn't recognise the live icon immediately. Could look at animating this is the next phase to bring more attention to it.
- Unclear which games featured on BT Sport. Could be solved visually at the next phase using brand colours along with channel name.
Digital brand guidelines
The BT Sport website is part of the wider consumer group in BT. It is not the BT Sport brand. The consumer group has a set of brand guidelines, so as part of this piece of work we had a set of defined rules.
Whilst we had an existing component library, the match day pages were a unique experience to the rest of the consumer website. I made sure my design approach was consistent as this would streamline the development process.
Visual design
The product's aesthetic can only be successful if the visual design has considered the content and functionality of the page. I am a firm believer of the 'less is more' approach to UI design as minimal visual clutter helps users focus on the task at hand.
The use of white space helps prevent the experience from becoming suffocating, whilst the hints of colour enrich the overall look and feel.
Finally, everything we design and develop should be accessible. That way, we provide equal access, equal opportunity and an equally engaging experience to people with disabilities.
Header area
As the first part of the experience the user sees, the header area presented an opportunity to show off our rights portfolio. Using competition brand assets, I created an immersive vista that visually reinforces what competition/league is taking place.
This approach is also scalable and future proofs the product. If a competition sees their branding change, we only need to update the background asset which gives it an altogether different look and feel.
Build
UI guides and specifications
To create a great product experience, designers and developers must understand and appreciate each other's roles.
I was keen to involve the Dev team from the outset as getting their input early on would lead to a successful collaboration.
Working in agile we had weekly sprint demos. This was a great chance to review work, ask questions and flag any issues. Working this closely together helped us achieve the desired outcome.
Although tools like Figma let developers inspect files, I still like to provide clear documentation when necessary. I have always found style sheets can help in the consistency of development for your designs. And lastly, file hygiene standards must always be upheld. Making sure layers are clean, tidy and labelled correctly and assets are made exportable will streamline development efforts.
Outcomes
We now support Live Match Day Pages for every single professional football fixture in the UK and selected European leagues and Cups.
Since launching we’ve had 7.3m page views. In January 2020 we had a record month with 1.4m page views.
In the first 4 months, during a challenging time for sport due to the COVID pandemic, we received approximately 4,150 orders through buttons on the match day pages and associated live player pages. This equates to £218K. As a result, the work carried out paid for itself within 6 months.
This piece of work was part of the submission to the Drum awards in May. Our team won the award for best website relaunch.
