Building a multi-brand design system

How do you quickly accelerate to testable solutions?

Following a discovery phase the team moved into usability testing on the existing products. Incisive Media had previously conducted only limited user testing on their products, so this process was crucial to gaining insights on how customers perceived the brands, site experiences and content.

All of the learning and immersion gained during this discovery and testing phase set the team up for the next phase — two back to back Design sprints.

The first of these design sprints focussed on the opportunity for content within each site, principally how to surface engaging editorial pieces, expose different media types and enhance the core reading experience for users. The team were also keen to use this sprint as an opportunity to test how users perceived the value of content and subscription to the individual brands. Due to the specific nature of the desired sprint outcomes, this was a ‘custom’ design sprint structured specifically to tackle these challenges. Whilst this custom structure was still based on the basic design sprint principle of quickly defining and testing a solution, the individual activities undertaken by the team were designed to test these specific opportunities.

Building on the outcomes from the first design sprint, the second design sprint tackled the subscription paywall, sign-up process, and the language used to communicate this messaging. This sprint was structured ‘by the book’, designed to give the Incisive team first hand experience of a classic Google Ventures style sprint, and a repeatable model they could use for future work.

How do you move from prototypes to detailed, hypothesis-driven design?

With a discovery phase, multiple rounds of user testing, and two design sprints completed, it was time to build on the outcomes of these activities and focus on improvements to existing user journeys. It was evident from testing that in order to simplify and streamline the subscription process, specific detail would need to be paid to the language and communication of the proposition and model. By bringing in a dedicated content strategist with a focus on UX writing, the team were able to analyse the varying language and microcopy being used across all brands and produce an optimum subscription model. Simplified terminology and a move towards ‘membership’ helped produce a more human, welcoming feel for users and a streamlined approach to the business model.

But a fundamental change like this is risky, so the team structured further rounds of testing to test the sensitivities of the revised business model. Did users understand the value proposition and what they were getting for their money?

These changes repeatedly tested well, so the new logic and associated content principles were successfully applied to all of Incisive Media’s brands and membership flows. It was a tested, hypothesis-driven improvement to a crucial, fundamental business model, and real testament to stakeholder and business courage and trust in the team.

How do you implement a truly multi-brand design system?

Alongside the detailed content work the team were also building out the design system foundations. In any system, the rigidity of the design fundamentals (colour, typography and layout) is equally as important as the flexibility. What can and can’t be flexed in order to express brand, content, and maintain a rational volume of system parts? In a multi-brand system such as Incisive Media’s, developing and stress-testing these complexities was key to enabling individual brand expression and the confidence required to move into full-fledged design implementation.

The aim for the system was to design a solution in which all of the sites shared a common set of design fundamentals, templates and components. Each site would then be built using its own ‘theme’ of this common set, enabling brand and content expression without compromising on colour or brand flair. Through a series of multi-brand component tests, it became evident that using design tokens to manage some of this theming would help enable the required brand expression while keeping complexity at a minimum. Design tokens are the values of any design system variable (colour, spacing, styles etc) represented as data. In the case of the Incisive Media design system, tokens were used to manage colour. The system contains a set of common colour tokens, the values of which are defined for each brand within its own theme.

Once these foundations were established the team compiled a comprehensive backlog which contained details of all the required templates and components. Throughout the system implementation this backlog helped monitor progress, prioritise efforts and capture ongoing requests and feedback. Adopting an Agile(ish) sprint process, the initially-daunting volume of design was broken down into more manageable blocks of effort, enabling feedback and review in parallel with the design implementation.

"I've watched hundreds of anonymous session recording videos over the years, trying to work out what people are doing on the website. I've learned far more watching the interviews and tests with actual customers during this project."

Clear progress

Incisive Media are currently working closely with their technology provider on the implementation of their first brand site using this new design system. This site will provide the foundation and proving ground for the development of the remaining brand sites.