Top Gear Content Templates
Articles to entertain and delight.
Role
Sole UX/UI designer on this workstream, taking the lead on gathering requirements, planning and facilitating ideation workshops with our Editorial team, creating all the deliverables and pairing with developers all the way to implementation.
Tools & Platform
Main tool of choice was Figma, while using Principle for high fidelity prototyping and Dropbox paper for remote workshops.
This was a responsive web project.
Project Length
This project lasted 10 weeks from brief, research, ideation, wireframes, visual design and prototypes, with constant engagement with our stakeholders.
Background
Top Gear currently has 3 types of templates - News articles (which is used most), Gallery listicles and a special template for ‘Big reads’ (Magazine style pieces).
Old design
News article problems
1. Static content
All news articles look the same irrespective of its length, media embeds or story coverage.
This doesn't’ allow us to present to users creative and dynamic content.
Often there can be a lot of white space, if the body isn’t sufficiently filled.
2. Onward journeys
We have a high bounce rate i.e. users view one page then leave.
Users are not well guided to related news or content that links to that particular story arc.
Users are not well guided to other similar content that may peak their interests.
Our current onward journey widgets perform poorly.
Old design
Gallery listicle problems
1. Page jumps back to the top on every gallery click
Advertising space causes the page to jump about on every page load, so users have to scroll down after every click through to bring gallery image and text below it back into view.
This issue is more pronounced on desktop but exists on mobile too.
We think this discourages users from clicking all the way through the gallery but we don’t have clear analytics on completion rate.
2. Onward journeys from gallery are poorly signposted
Same points as above.
3. Text accompanying gallery is often missed by users due to layout position + page jump.
Scroll depth stats show that on desktop - significant drop off at 50%.
Only 40% of page views make it this far, and 11% of all page views make it to a scroll depth of 75%.
Mobile performs even worse with only a third of all page views making it to a scroll depth of 50%.
Example of the page jumping for galleries
Old design
Big Read problems
1. Onward journeys
We have a high bounce rate i.e. users view one page then leave.
Users are not well guided to related news or content that links to that particular story arc.
Users are not well guided to other similar content that may peak their interests.
Our current onward journey widgets perform poorly.
2. Not optimised for search engines (SEO)
This page was originally created for its uniqueness with custom artwork however not correctly designed/build to be picked up by search engines e.g. no alt text, headings etc.
3. Not monetised
There is currently no advertising on this page, which is one of the main sources of revenue for Top Gear web.
Goal
Create a set of templates that allow our Editorial team to be flexible and creative with their content, improve the user’s experience and improve the website metrics.
The UX process begins.
01 Stakeholder Interviews
Before I had joined the team, Product and Editorial already had a workshop to discuss current problems of the templates. When I was given this brief, I read through the problems then held stakeholder interviews with our Editorial team, Head of Commercial and my Product Manager to understand why these were problems, capture their requirements, see if any of the pain points have changed and see if anything was missed.
This was conducted over Zoom and notes captured on Google sheets.
02 A lot of Research
I researched 30+ competitors to analyze layout, ad placements, widgets, and features. I examined editorial workflows and the CMS for functionality. Reviewed BBC GEL best practices for content pages and related guidelines. Studied BBC News documents on article successes and failures. Consulted with the BBC's article backend team about their CMS. Reviewed SEO requirements from our consultant and internal expert. Finally, I presented my findings to stakeholders.
03 Ideation Workshop
As the brief was during COVID, we were unable to have an in person workshop therefore I wanted to try something new and run a semi-asynchronous workshop.
Remote workshop planning
This was with all stakeholders to get design input and future buy-in. The picture shows the material used in the ideation workshop to outline the plan for the day, problems to solve and ideation techniques for anyone new to this.
Ideation and Facilitation
To start the workshop, I ran through the problems to be solved, everyone put their names beside the problem(s) they wanted to attempt to solve and gave them further information to read throughout the day.
Details for each problem
On the dropbox paper, for each HMW, I provide bullet point information of the problems to solve, the current solutions we had on the site, stats and competitors to get inspiration.
Ideation best practices
I also ran through and provided information on the dropbox paper for those who have never done any ideation, with some examples to show it doesn’t need to be perfect, just a rough sketch.
Everyone presented their ideas back
The ideation part of the workhsop was offline, therefore each stakeholder would ideate in their own time while off zoom. We had agreed a time, to jump back on zoom to present out ideas while I captured notes in the background.
Marked ideas that solved our problems to explore further
After the session, I went through each idea to understand which to be prioritised back on if t solved the problems outlined. With the prioritised ideas, I begun wireframing and fleshing the ideas out to understand feasibility and responsiveness.
04 Wireframes
After finalizing the ideas from the workshop, I began creating wireframes. This involved two steps: first, I wireframed the workshop ideas to check their fit with our grid, their effect on ad requirements, and their responsiveness.
Second, I developed my own wireframes for our HMWs to generate a wide range of ideas.
05 Stakeholder presentation
After wireframing and ideation, I converged on all the ideas again and created multiple options to take the Editorial team through to explain what solved their problems, challenges for certain items and any constraints. The advertising team was also on this call, and they would be able to advise on the best options which met our advertising targets. With all the great feedback from our stakeholders, I was able to choose one concept for each template.
During the ideation process, I had identified a need for a new template which wasn’t currently in our catalogue - Photo galleries.
We currently have a significant number of amazing pictures, most of which never get to see the light of day. Therefore, this template would allow our editorial team to efficiently publish content, enabling our users to enjoy a variety of great photos while also increasing the overall story arc and enhancing the narrative experience.
06 Onward journeys
To address onward journeys in the brief, I focused on improving three widgets: Tags, Related Content, and Trending.
Tags Widget: I ensured tags are relevant and clearly designed to encourage exploration, adding brief descriptions to guide user navigation.
Related Content Widget: I curated high-quality articles and videos related to current reading material. Enhanced algorithms now suggest content based on user behavior, creating a tailored experience.
Trending Widget: I highlighted popular content, regularly updating it with real-time data to present fresh topics for user engagement.
By optimizing these widgets, I enhanced the user experience, increasing engagement and time spent on the Top Gear platform.
Old onward journeys
Onward journey stats
As you can see from the below stats below (which outline clicks as a % of page views), the only well performing onward journey was the car related tag which aligns with our personas (Our users like specific car / manufacturer news). With this information, I knew this was something to explore further to really improve our onward journeys.
63%
Tags - car related
1.25%
Related content
0.62%
Trending block
0.03%
Tags - non car related
07 Visual Design
Now that our stakeholders were genuinely pleased with the wireframe concepts we presented, I began the process of designing the content templates. During this stage, I made sure that everything aligned seamlessly with our newly established design system, all while identifying specific areas where we could adapt and enhance it for better usability and visual appeal.
New and improved onward journey widget
This onward journey uses the tags from the content to populate the 5 latest stories per tag using tabs. If they cannot find what they are looking for in the 5 stories, we have a link to take them to the landing page. This implementation is a big improvement for the following reasons, it reduces the number of clicks it takes a user to see related content, it outlines why these stories are being recommended and provides some hierarchy - which is did not previously. This is a scalable and flexible concept which was only built once and applied to all content templates to improve onward journeys.
08 MVP Results
Launched on time, within our deadline.
Improve the user experience of the listicle templates
We increased ad viewability by 40% by utilising higher-value ad units and better placements, reaching our target of 80% viewability.
Increased the CTR for our onward journeys overall by 20% (on average)
Our big read articles that were previously not monetised, are now fully monetised with ad units.
Great feedback from our Editorial and Business Stakeholders.
