mastheadreimagined1

Beginnings

The project in one form or another has been in development for the last two years. It began when I realised how much effort we were putting into updating our code and design. It was fractured, with unnecessary duplication, less than perfect documentation and no system to speak of. The effects on the user were untold and we started to realise the extent to which our IA was broken and there was a lack of philosophy underpinning our efforts – we didn’t even have a grid at this stage! There were many areas of potential influence that would improve the efficiency of our products, however the biggest daily challenges we faced would be best remedied by creating a live pattern library. One platform. One code base. One design.

mastheadreimagined3

User Problems

The areas of most value to address for the user were identified as personalisation, content discovery, improved advertising, subscriber value and site search capability as revealed by both recent and historical user feedback and site analytics. To create personas for anonymous, registered and subscribed users – a slightly different approach was taken for each set of interviews in our testing labs. To create the anonymous personas faithfully there were alot of myths to dispel, partly due to limited data. These assumptions were used to form basis of the test script and 8 users were interviewed. This formed the basis of the first set of personas.

mastheadreimagined5

The Challenge

In a fast-paced business whose foundations are built on daily delivery of the news and measurable, incremental improvements, the challenge was to convince the business to invest in this project. There were untold benefits of this essential work, but in the short-term it would be hungry for resource at the same time we were migrating over to a WordPress enterprise system that had an already established roadmap. Consistent communication with all product and technology teams became essential to evangelising a ‘build once’ approach – especially when they were refactoring the entire back-end. Lots of workshops and presentations evangelising the approach, rational and benefits were essential in maintaining momentum, as was adopting the strategy to introduce the new design system incrementally in the live site under BAU development. This was a great test for the design, but also a great platform for socialising ideas.

mastheadreimagined4

Approach

The approach to design was to create a philosophy and a responsive design framework that would be versatile and robust enough to translate to the whole network. One of the key activities that was necessary to achieving this was an audit of current site structure and the templates, molecules and atoms that made up that content. Once this was done the task was to ascertain the minimum number of components required to rebuild the design ecosystem from the ground up.

One such audit was of the IA was also essential to understand the depth of how the underlying structure required attention. There were whole areas of the site that users simply were not finding, why was that?

mastheadreimagined2

Another looked at the commercial integration strategy and how we needed to modernise the way that we looked at our ad portfolio and how this balanced with the editorial strategy and growth of our subscriptions.

mastheadreimagined8

An audit of the different brands that were represented throughout the site was conducted to understand brand hierarchy and another focused on the differences between the Mastheads in print was useful to isolate their differences and begin to understand their individual identities.

mastheadreimagined6

The Vision

Once the current site had been audited and the fundamentals of the design system resolved, the next task was to socialise the work in a more overt fashion. A short film was realised to the wider business showcasing the new design system in the context of some of the site templates, but Reimagined. It was a great way to communicate impact and give tangibility to all of the work we’d been doing. The release of the showreel marked an acceleration in the project development and the next step was to facilitate a vision workshop with the editorial heads from across Australia.

mastheadreimagined10
mastheadreimagined11
mastheadreimagined12

Work in Progress

In terms of design structure, an audit of the site templates were made to understand the variation and ascertain the minimum requirements for the new design patterns. This helped me lead the development of the different content types, which included working through how carousels, video, story cards would work within an atomic design structure.

mastheadreimagined9

With the underlying structure is in place and the pattern library in progress, there have been regular opportunities to test the design systems on other sites within the network which acts as a sandbox for ideas that are in flux. It’s been a great stress test for the system itself and its ability to scale, which is key to this approach.

mastheadreimagined15
mastheadreimagined14

Client

News Corp – Oct 2014 to Present

Responsibilities

Strategist, Design Director, Workshop Facilitator, Mentor, UX Designer

Summary

The UXD team manage the design system that supports numerous sites across the network of some 126 separate brands. News Reimagined is an initiative that aims to create a robust platform that all sites can share. The benefits are many, but simply put ‘design once and use many times over’ which speeds up our time to the market ultimately benefitting both the business and the user.

Due to the active and high profile nature of this project I am limited in what I can reveal, however a wider and more detailed case study and showreel of the work is available for special interest.