The AFL Match Centre drives a lot of traffic for passionate AFL fans who want to follow along with the game however it was outdated and non-responsive.
The Match Centre product required a major overhaul as the design and technology were severely outdated, making critical changes impossible. The gains from making incremental changes were minuscule or nonexistent.
The new responsive design would allow us to add in components that were already responsively built (articles, video) and make it more commercial viable. We were also able to incorporate analytics into the new Match Centre to give us greater insights into the fans behaviour.
Client
Australian Football League (AFL)
Date
2019
Sketch
Zeplin
INVOLVEMENT
Wireframing (whiteboard)
User Testing
Design Reviews
A BIT OF CONTEXT
The old Match Centre was outdated and non-responsive
The Match Centre product required a major overhaul as the design and technology were severely outdated, making critical changes impossible. The gains from making incremental changes were minuscule or nonexistent. The new responsive design would allow us to add in components that were already responsively built and make it more commercial viable. We were also able to incorporate analytics into the new Match Centre to give us greater insights into the fans behaviour.
Goals
The Process
NBA
Team & My Role
The AFL development team (engineers, front-end, back-end, QA) are split into two scrum teams and work in 2 week agile sprints.
My role included working closely with the Head of Product & Development, Product Managers and Front-end & Back-end Development teams to ensure deliverables including interface designs, prototypes, user testing and handover were delivered according the product roadmap.
At each stage of development I did design reviews with the developers and check-ins with QA to ensure consistency of the UI elements.
The Process
Design Process
My design process involved taking the wireframes from the Head of Product & Development (Wayne Vickers) and designing the interface to work across all platforms. This involved designs for the different breakpoints including desktop, tablet and mobile.
By using the atomic methodology approach of atoms, molecules and organisms I was able to build components. The developers would be assigned components and to make it easy as possible I put the components at the different breakpoints on one page. This way they could see the component they were working on, but also how it compared to the other components across devices.
Concepts
We explored multiple concepts with 2 & 3 columns, along with the running hot leader.
Technical Requirements / Features
SPRINTS & DESIGN REVIEWS
Working with the Head of Product, Product Manager and development team we created a feature matrix to determine which features would be included. It was important to include all the developers in this workshop so as to correctly estimate difficulty and for them to understand the business value.
The Match Centre has three states of the game: Pre-game, LIVE, Post-game and the the fans have different needs depending on the state of the match.
Business Requirements
COMMERCIALISATION & SPONSOR INTEGRATION
We need to ensure high-value sponsor and banner integration for McDonalds without impacting the fans experience. McDonalds also sponsor the Macca’s Kick 2 Kick and so we needed to promote to fans that they are able to have a kick on the field after the siren after certain games.
TICKETS & PACKAGES
We needed to make it easy for fans to buy tickets and travel packages.
PREMIUM WATCH – LIVE PASS
Telstra have the media rights for live streaming the game on mobile, and we needed to promote the AFL Live Pass to watch the game live through the AFL App (Free for Telstra mobile customers).
User Testing
We conducted qualitative user testing using high-fidelity desktop and mobile prototypes with 5 users to observe actual users to carrying out some realistic tasks. We gaining critical feedback and a better understanding pain points and what features were important. A part-time UX designer wrote the user-scripts and I created high-fidelity mobile prototypes in Principle and desktop in Invision. We revised the designs and conducted another round of user testing with 5 different users to validate.
Revisions
We simplified the Summary page by including a snapshot of the Match Feed which users could click through the Full Match Timeline. We also created a scroll nav so that users could quickly and easily navigate the section they were interested in.
We initially also had just ‘Stats’ as a tab where users would then be able to select ‘Team stats’ or Player Stats. During user testing the fans told us they wanted quick access to player stats first and foremost and preferred less clicks.
Final Results
Player Stats
From our analysis we noticed users were accessing the ‘By Players’ view the most. Fan feedback also suggested this with request for more stats. For the finals we’ll launch with almost double the amount of stats to be available to users
Pregame
Post game
Key Features:
– Match Report
– Highlights & Replay
– Timeline worm
– Match Leaders
– Player Stats
– Team Stats
– News & Video
– Match Details
Fan Feedback & Iterations
Encourage Fan Feedback
We wanted to encourage fan feedback over the first few weeks after the release of the new Match Centre.
Tooltips
We created tooltips for the users first time so that they could familiarise themselves with the new product
