Skip to main content
Work Together
Contents
Contents

The Football AssociationProduct Design

Match reporting portal for English football

Working with The FA to build a new portal for match reporting across English football. Work with DSGNLY to consult on your digital products.

  • Design
  • Research
  • Information Architecture
  • Accessibility
  • Marketing
Work TogetherSend an email
The FA Referee Portal — brand identity and UI composite showing the portal's visual language and core screens
Start to shipped
6 months

full scope, on schedule

Faster to complete
8×

same task, a fraction of the time

Works for every user
Certified

independently audited

The challenge

Every weekend, thousands of match officials across England's football pyramid submit disciplinary reports. Yellow cards, red cards, incidents. It all feeds into The FA's Discipline Suite and gets distributed to local leagues, County FAs, and clubs.

The existing system made this unnecessarily hard. The FA collected data through a lengthy iframe plugin: a single-page form containing every field at once, embedded across local FA websites. There was no structure, no logical grouping, and no account taken of who was actually filling it in.

Match officials outside the premier tiers are mostly part-time. They have other jobs, families, and commitments. After a 90-minute match, they are not sitting at a desk in an ideal state to work through a long, unbroken digital form. The tool did not acknowledge this reality. The FA needed something that would.

Research

User interviews surfaced what the data alone could not show. Match officials ranged in age from 16 to 65, with very different relationships to digital tools. Interviews revealed significant difficulties with everyday platforms. Officials described struggling with tools as common as Microsoft Teams.

The problem was structural. It was not that users needed better training on the existing form. The form was the wrong approach entirely. The data The FA wanted was never going to come through a tool that did not fit the lives of the people being asked to use it. Design something that works for the full range of officials, not just the comfortable minority. That was the brief.

Our approach

Discovery workshops brought together stakeholders from design, product, and development to synthesise research findings and agree on direction before any design work began. We worked across whiteboards, mapping user journeys and stress-testing assumptions with the people who understood both the data requirements and the operational reality.

One decision came out of that process above all others: the existing single-sitting format had to go. Rather than presenting every field in one unbroken form, the portal needed to break the process into distinct stages that officials could move through at their own pace, pick up again if interrupted, and complete without losing their place.

The solution

The portal uses a checkpoint flow with four discrete stages: match creation, role definition, offence details, and case creation. Multiple cases can be added within a single report without losing context. The structure is simple. The logic underneath handles the complexity.

User flow diagrams and sitemaps mapped every path through the system before a single screen was designed. That included role-based variations and edge cases across the full range of match scenarios. Rather than embed the portal within local FA websites, we built a standalone product authenticated with existing FA credentials, matching how The FA structures other official-facing tools.

We built desktop and mobile views in parallel. Match officials submit reports in different contexts: at home at a desk after the game, or on a phone right after leaving the pitch. Mobile screens received particular attention on form design. Input fields, dropdowns, and error validation states were designed and tested explicitly for touch use.

Aligning senior stakeholders on the structural change took more than documentation. We ran workshops and built interactive prototypes to demonstrate the redesigned flow could meet The FA's submission targets. The sign-off came after that process.

Accessibility

The Referee Portal became The FA's first digital product to target WCAG AA compliance, part of a five-year organisational mission to bring its digital estate up to standard.

Meeting AA required multiple rounds of design iteration. Error communication, navigation clarity, colour contrast, focus states, and screen reader behaviour all needed specific attention. A design system update was produced alongside the project, so the work extended beyond this portal alone. A third-party audit verified AA compliance, delivered within six months.

Results

Before public launch, over 80% of officials in testing were using the portal regularly. Projected completion time came in at 15 to 30 minutes. That is down from more than two hours under the previous process. One official put it plainly: "This would be a life saver...currently spend at least 2 hours."

The portal had not yet launched publicly at contract end, aligned with football season launch windows. What we had was 80% voluntary adoption in testing, strong qualitative enthusiasm, and the first WCAG AA compliance the organisation had delivered.

"Mahfuz is great to work with...extremely likable...really helps myself as a Product Owner due to his understanding of when and where we could improve designs." — Product Owner, The Football Association

Working on something similar?

Let's talk about what you're trying to build.

Work TogetherSend an email