A multibrand design system for Are Media

Are Media and their brands were facing challenges such as editorial inefficiencies, an inconsistent ad framework and a lack of fundemental UX principles across their sites

Are Media and their brands were facing challenges such as editorial inefficiencies, an inconsistent ad framework and a lack of fundemental UX principles across their sites

BACKSTORY

Baking 15 cakes in one oven

In 2022, Are Media approached XWP (the company I work for) with their current challenge as a large enterprise organization. As the sole designer on the XWP team based in APAC, I led the discovery to reshape the entire foundation of over 15+ sites under their portfolio.

Context on Are Media

Since 1902, Are Media brands have been one of the go-sources of truth for women in Australia. Influencing women across Australia and New Zealand since the 1930s when one of their most well-known brands, The Australian Women’s Weekly, began publishing. Since that time, they’ve grown to become Australia and New Zealand’s leading multi-channel publisher, connecting with 9 in 10 Australian women.


"Are Media needed an enterprise solution on WordPress that would help them scale their operations efficiently..."

Following the discovery phase, I created the entire multibrand design system to support 15+ sites for brands like Marie Claire, Elle, and Australian Women's Weekly. After that, I worked on the individual designs for each of the sites, tailoring some aspects of the sites components to meet the unique needs of each brand.

MY ROLE

At XWP, I'm a Senior Product Designer. My responsibilities for this project included end-to-end product design, competitor research, and an supporting aspects of our sales and project delivery.

The Challenge

The Challenge

PROBLEM

Are Media approached XWP to solve a variety of challenges they were facing. Here were some of the most pressing ones

  1. Challenging editorial experience

  2. Technical & stability issues

  3. Inconsistent UX

  4. Managing multiple CMS’s

  5. Inconsistent ad offering

  6. Missed SEO opportunities

For my role specifically, the initial challenge boiled down to finding the right balance of uniformity and customizability. Making things more customizable would ultimately impact performance and usability of the enterprise platform. However not having enough variation meant all brands would be at risk of having very similar looking sites.

"Finding the right balance between uniformity and customizability to fit the needs of multiple brands was a big challenge when dealing with multiple stakeholders..."

GOALS

Discovery Phase

We worked on an extensive discovery process with the Are Media team to determine how we could best achieve their business goals. Here are the main areas we focused on improving:

Editorial Experience

  • The use of a single, modern CMS (WordPress) used across the network to offer effective, best-practice features & workflows

  • A content editor that gives editors maximum flexibility in customising content without the need of extensive developer assistance

UX & Design System

  • Building a foundational multibrand design system that ensures a consistent component & pattern architecture across all sites for efficient maintenance and updates

  • Ensuring the UX remains consistent and in accordance with best practice across all sites while still allowing for brand uniqueness

  • Establishing a library of carefully curated components & features to handle all of Are Media’s content needs

SEO & Ad Framework

  • Creating search optimised pages with relevant schema markup that encourage rich results & high placement in SERPs (Search Engine Results Pages)

  • Implementing a predictable yet flexible advertising framework across all sites to allow easy management and customization

PROCESS

Multibrand Design System

Here are the steps I undertook to ensure the project would be delivered successfully.

Step 1: Component audit

I looked at all the existing components to determine the various existing architecture that was adopted across all the different sites. This audit has helped XWP identify the core requirements that need to be included in the new multibrand design system.

Step 2: Restructuring the architecture

I revised the component architecture according to best practices & more intuitive design patterns as part of the platform migration effort.  Additionally, I accounted for new features & requirements that Are Media were keen on implementing.

Step 3: Building the foundational UI kit

I built a foundational UI kit (Express Kit), housing all the shared tokens, components, patterns and templates and published them as a shared library for all sites within the project. Express Kit was designed to be flexible, allowing for design tokens to be overridden easily for each site for efficient site theming.


Step 4: Redesigning the individual sites

I created information architecture maps & moodboards for each site each to ensure all required pages/templates and styling had been accounted for. I then setup unique Figma projects for each site, with their own set of foundational styles (logos, typography, colors, etc.), that would allow each brand to have unique styling and even entirely unique components in some desired instances.


Migration & Enterprise Platform

Step 1: Uncovering the Blueprint

For the migration effort, I assisted in examining each brands current content management system and website functionalities. We then documented the editorial team's pain points and compiled the audit outcomes into a scope document, guiding the migration strategy and platform development.

Step 2: Crafting an Enterprise Platform

The emphasis was on building a robust, flexible enterprise platform to meet the editorial team's needs. This involved creating a custom editorial workflow and tailored blocks for a consistent and efficient experience across Are Media's properties. For me, this meant building an updated data model for every single component to ensure that old and new requirements were met.

Step 3: Strategic Data Migration

With a strategic migration plan, the team mapped data from the legacy Umbraco CMS to the new enterprise platform. This crucial step ensured accurate and faithful transition of all content, maintaining the integrity of Are Media's digital content in a seamless migration process. Kudos to the entire engineering team! It was an amazing effort.

Step 4: Tailored Website Adjustments

This phase concluded with customizing and extending the enterprise platform to suit the unique needs of each Are Media website. While preserving core components, I worked with our engineering team to tailor adjustments and address site-specific requirements. After thorough testing, each website was systematically migrated to WordPress and officially launched, marking the successful completion of the migration and enterprise platform phase.

The Outcome

The Outcome

IMPACT

We've achieved some amazing results within the first couple of months since the enterprise platform launch. Over an average period of 3 months post launch across all 16 sites using the platform to-date, Are Media has created 10,000+ new posts.

They've saved an estimated $250,000+ since launch and have reduced their editorial posting time by ~50%.

Here are some samples of the final sites we shipped for Are Media and their brands.

"In just 3 months since platform launch, Are Media have already saved an estimated $250,000+ and have reduced their editorial posting time by ~50%.

Here are some words from the folks at Home Beautiful, one of Are Media's home brands:

“...we now have a bank of templates for ease of creating content efficiently in repeat formats, together with far greater flexibility for original, specialised and branded articles.

...already delivering on our wish list for enhanced UX and performance. Exciting times!”

-Digital Team, Home Beautiful

REFLECTIONS

Building a multi-brand design system that acts as the foundation for 15+ sites including brands like Marie Claire, Elle, & Women’s Weekly has to be a personal career highlight.

The effort put in by everyone at XWP & Are Media to make a body of work with this much breadth and depth possible was truly remarkable. I'm really thankful for getting the opportunity to work on this project. There's just simply no experience like building a foundational design system for this many sites.

If there's anything I've learnt, its that this type of outcome simply isn't possible without the level of communication, trust, and expertise shown by everyone on the team. Some qualities I hope to bring to every project I work on from now on.