Website design and redevelopment

Media Super is the industry super fund for the print, media, and arts industries. The Media Super website was in need of a visual overhaul to better align with their creative roots, and was suffering from page bloat with overly complex content.

As part of his project we also undertook a replatform, moving the website onto Craft CMS, and created a fresh digital design to go along with their recently updated brand identity.

This project spanned all aspects of the Tundra skill set, from strategy and UX to visual design, copywriting, and robust development. Design concepting and development formed the bulk of our efforts, while strategy workshops, tone of voice training, and copywriting activities rounded out the project and brought the website to life.

Understanding the superannuation landscape

Media Super had already undertaken some preliminary UX activities, and had completed an audit of the site to determine which pages needed to be kept, with a rough new structure that the site should follow. To validate this thinking and ensure we were giving proper consideration to business needs, we ran a stakeholder workshops.

Using the insights we gained from this workshop, we revisited the site structure and created new user journeys that aligned to core products and services in Media Super’s offering. High-level educative content is presented up front, while more detailed technical content sits at a lower level in the information architecture but is clearly signposted throughout the user journey to ensure that it can be easily found by users seeking more information.

A new visual identity, paying homage to the history of print media

Media Super was undergoing a rebrand in parallel with the website redevelopment project. The new Media Super brand features an extended colour palette, new typefaces, as well as half-tone gradient applications that tie the brand back to its history in the print and media industry. We leveraged these new design patterns to create custom colour pairings for each section of the website, giving the different content areas their own distinct look and feel. The half-tone gradient has been woven throughout the site in photography overlays and solid page headers to bring added personality and polish to the design.

To better illustrate Media Super’s product offering, and to make complex content more accessible, we also created custom infographics to represent key concepts. We then worked with Media Super’s trustee, Mercer, to create a custom UI for their Retirement Income Simulator so that the Media Super branding was carried through to their financial tools.

Future-proofing the CMS for ease of use

A key challenge for development was implementing the colour themes that defined the six core sections of the site without impacting site performance or causing governance issues for content authors. We were already using SCSS libraries for other aspects of the site build, so we used SCSSS mixins to style the background and foreground colours for each component. This allowed us to create a system that will automatically configure the colour theme for each component the content author chooses, making content entry and governance simple for Media Super staff.

We also used custom javascript to dynamically generate the half-tone gradient pattern across the site. This allowed us to easily control the exact colour, direction, and pattern of these gradient applications, and eliminated the need for content authors to continually edit and create new gradient patterns for different image contexts

Making superannuation content more accessible

We also supported Media Super with their copywriting and copyediting efforts in the weeks leading up to site launch. To kick off these activities, we ran a tone of voice workshop with the content team to ensure all authors and editors were aligned on communication strategies and brand voice. We then worked with a small team of writers at Media Super to rewrite and edit content across a range of topics, with a focus on demystifying superannuation concepts and breaking down complex financial advice into easy-to-follow steps.

Rebuilding the site in Craft CMS has given Media Super greater control and flexibility in how they manage their digital presence. With a more streamlined site structure and a focus on accessible content, the new site makes it easier for Media Super members and employers to find the information they need to better manage their super and set themselves up for financial success.

The new website also acts as a centrepiece in Media Super’s brand refresh, heralding a new era for the company. Working closely with Media Super’s brand agency allowed us to create a site design that embodied digital best practice, while remaining a true and faithful expression of the new brand. The site design pays homage to Media Super’s tenure and history, while also gaining a contemporary and versatile visual identity that will carry it into the future.