How do you redesign Queens Park Rangers web presence to support their unbelievably strong fanbase?

What I did

Web design, design system

Clients

Aqueduct Agency, Queens Park Rangers FC.

Insights

Design can create an environment of trust when the client and the fans are part of the process.

The project

Queens Park Rangers FC joined with Aqueduct to transition from a neglected website that was performing poorly to a highly customisable responsive design that more clearly addresses their goals.

The Creative Director, a UX designer, the client, several developers and myself worked very closely throughout the project, devoting an entire room at the agency for QPR work.

We were given a tour of the football ground, vip tickets to a match and access to selected fans for detailed interviews. The UX designer used these to produce detailed personas, user journeys/stories with collaboration from the client.

We also ran a password protected blog for selected fans to interact with the creative process. They were exposed to our process, early module and layout designs as well as some opportunities in input ideas and thoughts.

We aimed to create a flexible design system produce creative work using atomic design principles. We didn’t use wireframes, instead me and the UX designer used the rooms walls to identify all modules required and drew them on individual post-it notes. These were used to build rough layouts that the client could move around and discuss during meetings.

By focusing on atoms and modules in the design process rather than screens and pages, design decisions such as type and padding were produced very early in the process.

An agile approach was used with weekly sprints. The client was guided through the process and exposed to design concepts, approaches, all the UX stories and designs as they were created.

By building a design system, a collection of flexible atoms and modules, layouts for initially undefined pages were effortless to produce near the end of the project.

By allowing the client full visibility on our processes, including selected fans in choices and using atomic design with an agile approach, Qpr.co.uk is now a modern site that rivals top UK clubs digital offerings.

The entire project was finished more than 6 months before the launch. This gave the club time to produce teaser content and time the launch with the release of the new shirt and the end of the football calendar.

Because fans knew a new site was coming well in advance, it was less of a shock when the new site was launched. This meant that the voices on forums, Facebook and twitter were largely positive.

The selected fans who had interacted with the design process also interacted on social media with the launch (without being asked), and tempered the small about of negativity towards the change.

I learnt a great deal about UX, how to produce strong personas and how to use user stories to identify atoms and modules required to address those stories.