Overview
Football Australia needed a consistent web experience across three distinct brands: Football Australia, Matildas and Socceroos. Each site had its own audience and content, with existing news, video, match data and fan services to support.
Playtime implemented the redesign across all three Drupal 10 websites. We connected the supplied design system to real content, editorial controls and existing services, while preserving each brand's identity. The work combined web development with solutions architecture to bring the new experience into an established platform.
Highlights
- Three Brands, Shared Components: Integrated the design system into Drupal with reusable components for headers, footers and homepage sections. Brand-specific styling, menus and a network switcher connect the sites while keeping each team's identity clear.
- Flexible Editorial Control: Built modular pages that editors can assemble, reorder and update in Drupal. Hero stories, content tiles, sponsor panels and shop callouts have their own fields, and sections can be hidden without deleting their content.
- Matchday Experiences: Added matchday heroes and fixture cards for Matildas and Socceroos, connected to the existing match feeds. The hero selects upcoming, live or results content, with countdowns, live score updates and links to tickets and the Match Centre. Editors can also choose a specific match.
- News & Video Discovery: Connected featured news to article categories and featured video to Brightcove content. The latest stories and videos fill the sections automatically, while category filters help fans find the content they want.
- Fan & Partner Connections: Added editable sponsor placements, merchandise callouts and FA+ membership prompts. Connected newsletter forms to Football Australia's Subscribe API and its double opt-in process, alongside the existing fan account links.
- Performance & Browser Refinements: Cached shared page elements, reduced repeated logo markup and kept unused legacy JavaScript off redesigned pages. We also fixed Safari scrolling issues and ensured animated headings remain visible for visitors who prefer reduced motion.
Results
The redesign brought all three websites onto a shared set of components, with distinct experiences for the governing body and its national teams. Existing Drupal content and services support the new pages, giving the network a common foundation for future updates.
Editors can manage page sections, partner content and key links through the CMS. Fans can move from news and video to fixtures, team profiles, tickets and membership through the refreshed interface. On Matildas and Socceroos, the homepage can reflect the match's status as it moves from the build-up to live play and the final result.
'%20fill='%23be0020'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='map-pin'%20transform='translate(1.229%200.5)'%3e%3ccircle%20id='Ellipse_10'%20data-name='Ellipse%2010'%20cx='26.54'%20cy='26.54'%20r='26.54'%20transform='translate(-0.229%200.5)'%20fill='none'%20stroke='%23be0020'%20stroke-width='2'/%3e%3cg%20id='Group_777'%20data-name='Group%20777'%20transform='translate(10.271%2011)'%20clip-path='url(%23clip-path)'%3e%3cpath%20id='Path_659'%20data-name='Path%20659'%20d='M263.652,3730.7a3.355,3.355,0,0,0,2.356.96,3.286,3.286,0,0,0,2.314-.92l4.276-3.8a9.333,9.333,0,1,0-13.17.02Zm-3.31-16.02a8,8,0,0,1,11.344,11.28l-4.272,3.8a2.051,2.051,0,0,1-2.852-.02l-4.22-3.76A7.994,7.994,0,0,1,260.342,3714.681ZM266,3724.3a3.98,3.98,0,1,0-3.986-3.98A3.985,3.985,0,0,0,266,3724.3Zm0-6.641a2.66,2.66,0,1,1-2.654,2.66A2.664,2.664,0,0,1,266,3717.66Zm16,16.021a.67.67,0,0,1-.324.579l-13.746,8.24a3.716,3.716,0,0,1-3.86,0l-13.746-8.24a.67.67,0,0,1-.324-.579.661.661,0,0,1,.324-.56l6.666-4a.654.654,0,0,1,.916.219.675.675,0,0,1-.23.921l-5.714,3.42,12.794,7.679a2.417,2.417,0,0,0,2.49,0l12.792-7.679-5.748-3.44a.674.674,0,0,1-.228-.921.651.651,0,0,1,.914-.219l6.7,4.02a.661.661,0,0,1,.324.56Z'%20transform='translate(-250%20-3711)'%20fill='%23be0020'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
%20rotate(180)'%20fill='%23be0020'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='phone'%20transform='translate(1.229%201.104)'%3e%3ccircle%20id='Ellipse_11'%20data-name='Ellipse%2011'%20cx='26.54'%20cy='26.54'%20r='26.54'%20transform='translate(-0.229%20-0.104)'%20fill='none'%20stroke='%23be0020'%20stroke-width='2'/%3e%3cg%20id='Group_778'%20data-name='Group%20778'%20transform='translate(10.271%2010.397)'%20clip-path='url(%23clip-path)'%3e%3cpath%20id='Path_661'%20data-name='Path%20661'%20d='M253.32,3801.338l1.495-1.3a3.632,3.632,0,0,1,5.134.069l2.491,3.269a3.588,3.588,0,0,1,0,5.074l-1.986,2.034a20.539,20.539,0,0,0,11.054,11.063l2.041-1.989a3.517,3.517,0,0,1,2.533-1.051,3.4,3.4,0,0,1,2.466,1.005l3.387,2.606a3.588,3.588,0,0,1,.025,5.052l-1.36,1.554a7.833,7.833,0,0,1-5.586,2.286c-10.334,0-24.025-13.714-24.025-24.046a7.825,7.825,0,0,1,2.306-5.6Zm21.721,28.32a6.457,6.457,0,0,0,4.613-1.851l1.36-1.578a2.249,2.249,0,0,0,.066-3.131l-3.385-2.628a2.264,2.264,0,0,0-3.2,0l-2.361,2.309a.673.673,0,0,1-.706.16,21.988,21.988,0,0,1-12.386-12.389.676.676,0,0,1,.146-.709l2.306-2.355a2.3,2.3,0,0,0-.053-3.267l-2.494-3.269a2.283,2.283,0,0,0-3.228.045l-1.493,1.3a6.487,6.487,0,0,0-1.879,4.64c0,9.531,13.145,22.7,22.693,22.7Z'%20transform='translate(-251.014%20-3798.985)'%20fill='%23be0020'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
'%3e%3ccircle%20id='Ellipse_12'%20data-name='Ellipse%2012'%20cx='26.54'%20cy='26.54'%20r='26.54'%20transform='translate(0)'%20fill='none'%20stroke='%23be0020'%20stroke-width='2'/%3e%3cpath%20id='Path_663'%20data-name='Path%20663'%20d='M276,3877.33H260a5.992,5.992,0,0,0-6,6v12a5.992,5.992,0,0,0,6,6h16a5.992,5.992,0,0,0,6-6v-12A5.992,5.992,0,0,0,276,3877.33Zm0,1.341a4.6,4.6,0,0,1,3.266,1.34l-7.96,7.96a4.671,4.671,0,0,1-6.6,0l-7.972-7.96a4.6,4.6,0,0,1,3.266-1.34Zm4.666,16.66A4.677,4.677,0,0,1,276,3900.01H260a4.677,4.677,0,0,1-4.666-4.679v-12a4.647,4.647,0,0,1,.586-2.26l7.84,7.84a5.986,5.986,0,0,0,8.48,0l7.84-7.84a4.589,4.589,0,0,1,.586,2.26ZM274,3904.67a.651.651,0,0,1-.666.66H256a6,6,0,0,1-6-6v-14.66a.667.667,0,0,1,1.334,0v14.66a4.677,4.677,0,0,0,4.666,4.68h17.334A.651.651,0,0,1,274,3904.67Z'%20transform='translate(-239.46%20-3864.789)'%20fill='%23be0020'/%3e%3c/g%3e%3c/svg%3e)
