CASE STUDY

Commercial Styleguide

Overview

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

2018

Programs & tools

Whiteboard
Sketch
Principle
Zeplin

INVOLVEMENT

Research
Wireframing (whiteboard)
Competitor Analysis
UI Design / Visuals
User Testing
Design Reviews

The Process

Research & Competitor Analysis

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.

Final Results

News / Video

The current homepage served us well, but it’s time for change. We’re looking to provide a faster, simpler, more engaging experience for you. One where you can find what you need faster, on all your favourite devices.

Find the news you want more easily

No more waiting/clicking through the carousel to see the key news headlines. Now you can scan through the most important updates at a glance and jump straight in. Our new content strips will soon include topic tags allowing you to quickly check for favourite topics and also let you ‘show more’ of what you want, right there on the homepage.