UX and UI Design for BTCC Racing Driver Website

skills utilised -Research, Wire-framing, UI Design, Development

software utilised -Sketch, Umbraco CMS

Overview

The Client
After being so successful at gaining victory in the 2017 VW Motorsport season Bobby Thompson was successful in gaining a seat with Team Hard in the 2018 season of the BTCC (British Touring Car Championship). Bobby is now into his second year of the British Touring Car Championship.

The Project
Due to a significant increase in Sponsorship requirements, Bobby’s management team engaged with me to help research, design and build the new version of the https://www.bobbythompsonracing.co.uk/ website.

Outcome
A highly intuitive and user-friendly website that attracts not only potential sponsors but also Bobby’s fans and other BTCC fans, helping to raise the website’s organic SEO rankings.

Role within the project
UX Consultant & UI Designer (Research, Flow, Key UI Design, Creation of Code Snippets)

 

Stakeholder Research

Research Goals
To define the requirements for Key Stakeholders to ensure maximum engagement and fulfilling Sponsorship potential.

This was broken down into Stakeholder Groups and priority

 

 

 

I used the results gleaned from the priority goals I created to brainstorm a series of 'How May I' questions, as shown below:

 

How Do I? - pt1

 

 

How Do I? - pt2

 

Now that key criteria had been identified, I needed to define key inclusion criteria within the website. I reflected on the business goals for Sponsors, as well as the goals for BTCC consumers/fans and technical considerations to find a happy medium for all stakeholders. Once I had identified common areas, I could decide on the flow of the solution as well as key factors to include. 

 

Bobby and Fan information

 

 

Bobby and Sponsor Info

 

Even though multiple stakeholders were involved, I was still able to come up with a simple, yet effective site map and wireframes that would offer an intuitive flow for all of the respective stakeholders.

 

Wireframes

This research was used to create a high-level site map to be used by the development team. 

Bobby Thompson Site Map

 

While the site map itself was fairly standard throughout the industry, this will allow for the implementation of various marketing strategies in line with PR and Sponsor requirements.

Site Maps
The following Wireframes were also created in line with key stakeholder priorities:

 

Wireframe Methodology & Planning

The layout was kept as simple and intiuitive as possible, whilst focussing on offering a highly engaging experience. Where appropriate, I looked at promoting sponsorship information, keeping attention to the requirements of the BTCC and Bobby Thompson fanbase.

 

 

 

 

Home Page

 

 

Track and Race Calendar Layout

Sponsor Listing Layout

Brand Guidelines

I created an acceptable and defined set of brand guidelines specifically to be used for the website, allowing for a unified look and feel.

 

Bobby Thompson Brand Guidelines

 

 

Final Designs

I applied the brand guidelines to my mid-fidelity wireframes. With all of the visual details added, they were completed.

Here is a sample of the final design layouts.

Home Page Design

Home Page Design

News Page Design
Sponsor List Page design