We used an atomic design, co-creation process to involve Queens Park Rangers FC and their fans directly in the design and build of their new website. This made everything from decision making to code extremely efficient and long lived.
Our team used an co-creation model and agile methodology to work very closely with QPR. We ran user research interviews with ‘super fans’ and exposed them to choices and ideas throughout the creative process.
We aimed to create a flexible design system from day one with all creative work following atomic design principles. We didn’t use wireframes, instead using paper and post-it notes to identify all components and layout ideas.
The design system and the front end developer were done together with the client and we shared the progress with the selected fans. This allowed for a very fluid decision making process from paper to production code.
Because certain fans knew a new site was coming well in advance, it was less of a surprise at launch. This tempered negative responses and created some amount of free marketing as early ideas where being shared on the terraces.
- The updated site supported increased sales on merchandise
- live reporting, photos etc allowed QPR to own more of the conversation around fixtures
- The design system was used for nearly 10 years
- The site ‘marketed itself’ because the fans who were involved spread the word on their own
- Involving more stakeholders at the start of the allows for a more cost effective and flexible creative process
- Involving developers at the design stage gives them an opportunity to see issues sooner
- building the design system as the same time as its being developed creates cleaner code as the development follows the atomic design process
- The budget doesn’t need to dictate the quality of creative output
—