◄ HOME

DEC 2017 – APR 2019

DESIGNING FOR
MANCHESTER CITY FC

For years, Manchester City’s digital products were designed by different agencies. Without a design system to tie everything together, the products provided a confusing experience for fans.

THE BRIEF

To create a design system and design the core products:

  1. responsive ticketing platform;
  2. iOS and Android apps;
  3. TV apps for Apple, Fire and Roku; and,
  4. responsive website for mancity.com;

TAKING BACK CONTROL (OF DESIGN)

Design for three of the core products was being outsourced when I started in November 2017. This frustrated the team as they had minimal input into design thinking and little confidence as nothing was validated with research.

By week two, I was sketching out ideas, creating user flows and making prototypes to gather feedback and improve my understanding of the products. This quick, iterative process brought energy to the team and opened up collaboration with Editorial, Research, Marketing and IT.

An immediate impact was felt and I decided to bring all design in-house. Knowing I couldn’t successfully design all four projects, I pitched to the Head of Digital to hire extra resource to help.

GAINING STAKEHOLDER CONFIDENCE

But first, we needed sign off to fund development for a new mobile app.

The Head of Digital and Product Owner had developed a product strategy, but we needed a design vision to persuade key stakeholders in Marketing, Media and Editorial.

Within a week, I developed a set of principles (see above) and an iPhone prototype that neatly showcased our thinking.

Following a positive meeting, we got budget approval and I recruited Robin Gibson as second design lead.

GETTING FANS INVOLVED

Now we had a design team, albeit small, we could focus on user research. Robin (who gets most of the credit here) and I created a makeshift lab from two meeting rooms, a mic, webcam, OBS and YouTube, and tested 2-3 prototypes every month.

As a result:

  1. Fans had a stake in the products they used;
  2. We got staff invested, letting them observe and take notes;
  3. We shared research reports with stakeholders; and,
  4. Our designs got better.

We supplemented this qualitative research by creating surveys and used tools like Google Analytics and HotJar to gather quantitative data.

Obvious? Sure. But this was new to the club.

WORKING AS A TEAM OF TWO

Having worked together at the BBC, it was liberating for Robin and I to choose our own tools and methods of working.

We designed with Sketch and prototyped with Invision and Proto.io. We used Sketch libraries to develop the design system; creating a linked style guide of typography, grids, iconography and components.

We managed our workload through Trello and daily design stand ups.

We used Zeplin – “our single source of truth” – to document our designs and Slack to communicate with development agencies across England, Poland and Ukraine.

We sketched, we created flows, we put designs on walls, we covered them with post-its, we ran workshops, we wrote research reports, we conducted competitor analysis...

...we banged our head against walls and we celebrated our achievements.

We simply brought the design processes you know to a club that hadn’t before used them.

WHAT’S BEEN DELIVERED

  1. Ticketing website: launched April 2018.
  2. New Identity Management for GDPR: launched April 2018.
  3. iOS and Android apps: launched February 2019.
  4. AppleTV, Amazon Fire apps: launched February 2019.
  5. Mancity.com: design complete, development ongoing. New homepage, fixtures and players sections are live.
  6. Cityzens Flare project: soft launched March 2019.
  7. Design system: completed January 2019.

FURTHER READING

Just show me the pretty pictures