CASE STUDY

AFL Clubs

​   

Overview

The AFL is also responsible for designing and developing the 18 Club sites. These are run off the same CMS platform. 

All the modules that we were building for AFL needed to work for the 18 clubs as well. The clubs have don’t have as high turnover of content as afl.com.au and so we needed to build the news module so that the clubs could control how much news/video they wanted to show, taking into account during season and off-season. 

  • The current club homepages are so busy that users find it hard to find information that’s relevant to them.

  • The homepage is too large and takes too long to load.

  • The Club homepages across desktop and mobile are not consistent or cohesive and make visiting the Club site online confusing when looking across multiple devices over multiple visits

  • The current Club homepage traffic represents too large a share of overall traffic and has too high a bounce rate (which means users are not clicking through to content as much as they should)

Client

Australian Football League (AFL)

Date

2019

Programs & tools

Whiteboard
Sketch
Principle
Zeplin

INVOLVEMENT

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

TEAM

Kym Steinke (Lead UX/UI Designer)
Wayne Vickers (Head of Product & Development)
Lisa Von Fersen (UX/UI Designer)
Damian Macleod / James Walton (Product Owners)
AFL Product/Development team

A BIT OF CONTEXT

The 18 clubs sites had a desktop and m.site. They were outdated and non-responsive

The 18 clubs had 2 versions to maintain (desktop and m.site). The page load speed is causing slow downloads for users and there is no lazy loading which caused long download wait.

Circa 2018 – Screenshot of old Sydney Swans

Goals

The clubs really wanted the flexibility to have spaces that they could use to promote tickets and memberships. The club’s needed to have promote their next upcoming AFL match.

– Reduce perceived page complexity and clutter

– Allows fans to filter and find relevant content simply

– Improve page load time with lazy loading

– Improve partner and commercial integrationBetter integration of premium content (particularly on game day)

– Better promotion of club initiatives

– Ability to run a wide variety of rich media display ads

The Process

Most of the club’s sites are based around the modules that were built for afl.com.au. 

We designed the news modules to be adaptable and allow the club to customise and stack as many rows of news & video that they chose. This is important as some clubs have less news than others, and also in the off-season there is less news. 

As we were developing these modules, our Editorial team requested that they would like to seperate the video from news. So we gave the option to have a smart list of video next to the news. 

Final Results

The Clubs have a growing mobile audience (55% of interactions come from mobile or tablet devices)

Fans are demanding easier access to greater content and features that currently exists solely in a desktop environment. World-class products ‘adapt’ for the fan. The fan shouldn’t need to ‘adjust’ to find the content they want

We were able to offer improved commercial and partnership opportunities

Modules

The new responsive homepage will be made up of ‘modules’ which can be moved up/down club websites based on their level of priority for the club. Clubs will also be able to select which modules they do/don’t show at any given time, providing flexibility and simplicity for digital teams. 

Fixture / Ladder / Links

This module includes:

– Upcoming game module with countdown to first bounce

– Ladder widget

– Internal promotions widget

– More advertising options across devices

Header / Footer

Club sponsors will have more site-presence than before, with the existing Sponsor Bar being merged into the site footer.

The primary partners will remain fixed within this bar, and secondary sponsors will rotate through.

In mobile view, the sponsor bar will be able to be scrolled through, to showcase all club sponsors.

Prototype

I created a sketch symbol to autofit to the artboard to show the developers how I wanted the header to behave.

Promotional Strip

A club promotion strip is a full-width internal promotional space. This could be used to promote tickets, membership, club events or other internal club promotions.

Examples

The Clubs have given great feedback around the club promo strips and they’re really injecting their voice and style into the space

Match Summaries

Match Summaries enable fans to look at basic match content quickly.

This module will feature the upcoming, current and the previous game.

Some key features:

– Live scores

– Match content consolidated per game for easier consumption

– Easy access to highlights and match replays

Squads

 

 

The Squad module will feature all your players on the homepage.

Ability to sort by various stats such as Player Rating, filter by Seniors/Rookies, and view either your AFL or AFLW team.

For launch, players will default to being sorted by Player Ranking. We will make the ‘Sort By’ filter buttons available post-MVP.

Examples

The clubs have be utilising the modules really well, and the examples to the right showing the club sponsors, club promo strip and fixture.

Club Design System

The old responsive site had multiple sprites of logos as pngs and these didn’t scale well and it was alot of work to make sure no sprites were missed. By hosting the club files in fractal we were able to create a centralised design system and link to svg of the logos and assets.

Lisa Von Fersen (UX/UI Designer worked on ensuring the Club colours met our accessiblity standards and we needed to ensure the clubs dark and light colour scheme worked across the various modules.

Conclusion + Take Aways

Fan Feedback & iterations

Although the clubs all have the same modules they use them differently using what resources they have available. Creating templates that works for so many different uses is challenging. 

The clubs have the same navigation capabilities as afl.com.au, and they have the power to edit the navigation as they choose. We realised that the clubs didn’t have experience in creating simple and easy to use Information Architecture, and whilst we couldn’t redo all the clubs navigation for them, we could empower them with the knowledge of how to do it. 

We plan on working with a club and showed them some exercises and tools that they could use in order to improve their IA and navigation. We want to empower the clubs to ensure they can continue to add/remove items for the navigation in the future. We want to show them how to conduct card-sorting and tree jack exercises. 

UP NEXT

AFL DESIGN SYSTEM