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.
PROBLEM
Are Media approached XWP to solve a variety of challenges they were facing. Here were some of the most pressing ones
Challenging editorial experience
Technical & stability issues
Inconsistent UX
Managing multiple CMS’s
Inconsistent ad offering
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.
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.
More case studies
