Radically reinventing the Top Gear digital experience
From March 2019 to Jan 2021 I led a team of 3 UX designers on the redesign of BBC Top Gear digital experience. My responsibilities included high-level strategic design direction, user research direction, facilitation of concept ideation workshops, aligning key stakeholders on product/UX goals, designing user flows, visual design direction, overseeing creation of a modular design system and methods of incorporating user feedback into design iterations.
About the project
Top Gear is still the BBC's biggest global brand, which is split into three main outputs, with the TV show, Magazine and Topgear.com which is also the largest automotive site for News and Reviews in the UK. This project, Top Gear 3.0, is a reinvention of the digital experience.
Ok, so why reinvent?
👉🏽 The current website has consistently high website traffic & stable audience through a strong SEO, content and product strategy. 👉🏽 UK car-buying traffic saw 100% growth in past 18 months. 👉🏽 UK ad revenue up 35% YoY in 18/19 with high market demand.
So why change things when everything’s going well?
The product S curve, obviously
The four phases of the product S curve
👉🏽 The research and development (R&D) phase (sometimes called the "bleeding edge") when incomes from inputs are negative and where the prospects of failure are high
👉🏽 The ascent phase when out-of-pocket costs have been recovered and the technology begins to gather strength
👉🏽 The maturity phase when gain is high and stable, the region, going into saturation, marked by M, and
👉🏽 The decline (or decay phase), after a Point D, of reducing fortunes and utility of the technology.
Topgear.com had reached maturity in its current form. It had maxed out its audience and was heavily reliant on social media and SEO for the vast majority of its traffic. It would soon start to decline.
The challenges
Tech Platform is inflexible and showing signs of degradation.
Advertising inventory reaching saturation with little room to grow.
Website experience not reflective of audience’s habits and behaviours, especially for car buying.
Print in decline, so digital needs to pick up the losses
The opportunities
👉🏽 Build on a modern, future-proofed tech stack.
👉🏽 New design to allow content to grow, expand our audience traffic and increase user engagement.
👉🏽 Attract advertisers and new commercial partners with premium inventory & stronger audience intent
👉🏽 Diversify revenue streams with a logged-in state, CRM, a revamped subscription model and branded content studio
Where to start?
Starting a big redesign is always an exciting time, gathering requirements, building relationships, creating metrics for success and building a vision for the future. But for me, it is a time to set the tone for the project, showcase how we want to work as a UX team and then how we make sure the our users are at the forefront of our stakeholders mind whenever making strategic decisions.
So my first step in this project is to get our stakeholders to understand our users.
User personas
So Top gear is split into three divisions, TV, Print and Digital. Our key business stakeholders/sponsors oversea all of these, but most come from either a TV or Print background, so have never been involved in a full digital redesign. This was the first time they would be making strategic product decisions for digital, that impact our users.
So I wanted to get them to have a deep understanding of our users first, to do this I used personas. Firstly I gathered all the data we had on our users currently, existing personas from 2015, GA data, survey data, even the TV and Magazine subscription data. We brought all this together and did a persona creation workshop where we got our stakeholders to split our users into personas that represent our users.
Product future casting workshop
Imagine what you can do without limitations of platform or budget. Imagine what Top Gear looks like in 5, 10 or 15 years time. These are some of the questions I asked the whole Top Gear team in a future casting workshop I facilitated. It got the whole team thinking outside of their current day jobs, thinking about the product vision, what Top Gear could be rather than what it is.
We then used those ideas to map out the key actions for the next 1-5 years that would get us to that long term vision. Then cross referenced those against the project KPI's, to make sure they would impact our goals for the project.
A north star
One of the main goals of this redesign was to modernise the Top Gear website, aligning with updated TV and Magazine brand and building a future proof platform to grown on. To do this we needed a vision for the design and experience, a vision that my UX team, the editorial team and stakeholders can use to visualise the future Top Gear. But also use to start the visual design direction.
We worked with an external agency who helped to take the brand design from Magazine and TV and apply the same logic to Digital.
Car buying intent
Ok. Lets dive into the product space now. Top Gear leads the industry on car reviews, but as the world shifts even more to digital first, car buying online becomes ever more popular. Why go to a showroom, when you can buy from your sofa, why waste hours looking for a good second hand car, when someone else can do the leg work for you? Our users are looking for a seamless journey from finding the right car for them, to then purchasing.
Adding car buying intent into our car review journeys was key. Giving users onward journeys for leasing, PCP or second hand cars gave Top Gear the edge, and the full end to end car purchase journey. To do this, we interviewed our different persona groups to find out about how they currently search for a purchase cars, then we mapped out these journeys to find areas where our current reviews are not fulfilling these needs.
A cohesive review ecosystem
Top Gear actually has three types of reviews, Make Model, First Drive and Long Term Reviews, but are currently split into different sections of the IA. Another goal of the project was to create a joined up experience of all our car review content therefore giving greater visibility to reviews across the site. To do this we followed the below structure:
👉🏽 RESEARCH
Contextual studies
User pain points
Competitive audit
👉🏽 IDEATION
UX flows
Wireframes
Visual design
👉🏽 FEEDBACK
Stakeholder reviews
User testing
BBC studios designer critiques
Read all about it
Car news is the biggest traffic source for Top Gear. We have millions of followers on social, and our SEO strategy is driven so that we always have evergreen articles to bring in traffic even on a slow news week. But News is more than that, our users consume our content because they want to escape, dream and pursue passions. That is why in 3.0 we split our news content into different forms, Short form, and Long form.
Short form to entertain
Working close with our editorial team we captured that currently they are hugely limited by the platform, its inflexible and means they write stories for the CMS not for the story they want to tell. So our goals were to make sure the new templates were flexible to accommodate any story.
👉🏽 Key points for redesign
Greater flexibility for editorial to express their creative story-telling
Dynamic user experience with rich-media embedded
Increased visibility for TG video content
Long form to engage
Our long form templates are our editorial pillars, they are used to showcase the breadth of Top Gears editorial output. Our users consume this content for escapism, and the metrics on the current site show this, with engagement of over 5mins per article. In a similar vein to short form, we wanted to give our editorial team the flexibility in these templates to write the stories they want without limitation.
👉🏽 Key points for redesign
Creating a flexible template using modular design design system
Advertising solutions that do no impede engagement metrics
More premium sponsorship opportunities
Advertisement solutions
Top Gear digital is funded not though the licence fee, but through 3rd party advertising, its goal is to make money for BBC studios which can then be passed back to BBC public service to create value for our users. So Advertising on Top Gear was a big part of the redesign, the current site had maxed out inventory, with advertisers moving to viewability as its primary metric. We needed to come up with design objectives and rules for advertising that meant we would meet our business goals, while not impacting our overall user experience. We used research from the Coalition of Better Ads Standards, this helped us to inform which type of advertising solutions we should be using so that we didn't impact experience. Read more here
👉🏽 Our design objectives/metrics for advertising
Aim to keep no more than one ad in view.
Viewability is primary metric; CTR is secondary
We should aim to have the same number of inventory, that we currently have on the website for ads e.g. Car reviews page has two ad slots and we should have at least 2 slots in Car Reviews 3.0.
Use our interactions, animation and clear signposting so users trust the advertising and feels part of the experience
A homepage that invites users in
Homepages are for stakeholders. Ok there is some truth in that statement, but Top Gear as a brand isn't one dimensional, our website has to cater for the TV show, magazine subscription and also our global digital audience. It has to do this while also showcase the breadth of content we produce.
👉🏽 Key points for redesign
Showcasing the breadth of our content
Giving users a more curated browsing experience
Impactful TG brand statement & showcase to differentiate us from competitors
Tree testing site structure
The last big part of the redesign was looking at site structure & IA. To do this we mapped out the current site structure, tags, and content into an excel document, this enabled us to look in detail at where our tagging and categorisation were crossing over, and causing our users confusion. We then mapped the new structure into site structures that would enable our users to find key information and content. The next step was to test these with a tree test with our users, below is the documentation of how I delivered this work:
Objective:
Define the best site structure that enables users to find key information quickly and with minimal effort
Push users to pillar/category pages
Hypothesis & Questions:
Fewer top level navigation items makes it easier for users to find all content and category
Having video content signposted in each category or section makes video content easier to find
What’s the best way to promote pillar pages while still allowing users to find other content?
Do users look in news or in the category section for news on a category?
Do users understand different types of reviews ie. First drives vs first looks. Are they useful terms?
Methodology:
Test different tree structures via tree testing to find which allows users to find most important information easily. Users are asked to complete tasks, i.e. Where would you find information on the latest VW Golf?
Participant Requirements/Screener
Participants screened out in Tree jack and trees randomised.
Split of
Existing Top Gear users
Visited Top Gear website in the last six months
Non/LapsedTop Gear users
Not visited Top Gear in the last six months
None to reject the BBC
None to work in design, web or app development, media, etc…
Results
As I write this the test is currently being completed, I will update this case study with the findings and our updated site structure which we will then test on our current site before launch on the new site.
Future product vision
Long term. Thats what this project definitely is, redesigning and rebuilding a platform from the ground up in one year was tight, but is only just the start. The product goals stretch into year 3 where we aim to expand the offering and experience to maximise the new platform.
👉🏽 Future vision
Signed in and registration to bring a more personalised experience
Video as a key content pilar
Expand our revenue sources
Reflections
At the end of every project there is always points at which I look back to see how I could improve next time. Knowing what I know now, the below is what could have helped the efficiency of our work, while also showcasing the value of UX.
👉🏽 Research
Improve the timing/prioritisation of research
Showcasing the real value to stakeholders
👉🏽 Evangelise UX practices
Showcase the value of UX practices wider, earlier.
👉🏽 Measures of success
Improve ways of measuring success, even without launching new platform
