Independent Voices

A modular design system for outspoken opinion commissioned by The Independent

in Design, Work

We were approached by editor Amol Rajan at The Independent to concept and deliver a vision for the new opinion section. The aim was to take Independent Voices in a different direction to the rest of The Independent site, which initially seemed strange to move away from Indy guidelines, but Amol had a bold vision for the look of the site to match the outspoken content values.

It’s got very different editorial values, it will be more populist and outspoken, it will be more controversial, it will be more in your faceand it will hopefully offend people for the right reasons. Amol Rajan, Editor of The Independent

Defining the system

Given just two weeks to complete, we set about designing a modular system that aimed to amplify the authors and encourage participation. Initially we collected snippets from around the web of digital publishing that matched our aims to discuss with the team. This helped us prioritise features to include.

We started forming key modules, building the design as a system of components that would be needed across the site. These modules were then used to create wireframes to define page types. Working in this way allowed for quick variations in layout for review as well as defining a system that would work with and without certain elements. Already we could start to bring together article elements, authors, social sharing, rating, commenting and curation.

Module examples

Some of the ideas designed in detail included reaction voting which could become a label for an article, for and against commenting, a curated content stream (with a nod to the Daily Beast), highlighting and other rewards for top comments, fact files, ranked top content and social sharing. Some of the concepts remained as just that, but being bold with ideas was greatly appreciated.

Reaction voting

Outspoken style

The visual treatment was purposely characterful and bright in colour to meet the aim. The issue post launch, as initially feared, was that when other modules from around the site were included on the Independent Voices pages the overall feel of the page becomes too much with the different styles competing with each other which is a shame. The project was completed with an identity logo, as part of the overall style of the site, and specification for the proposed modules and style guide.

Independent Voices screens

 

Constrained design

The constraints of the project (all completed in just two weeks!) meant strict chunks of work and provided a clear brief for creativity. This resulted well as a coherent system for The Independent to take into development. However, the isolated timeframe of work didn’t allow for audience involvement and necessary refinement later in the process.

Nothing short of an inspiration to work with. At our initial meeting I laid out some broad principles for us to work to, which they adhered to superbly. The design they generated was extremely energetic, exciting, and unique, and throughout the consultation process both David and Tomek proved courteous, considerate, and highly competent. I would gladly go to them when designing a future website, and recommend that others do so too. Amol Rajan, Editor of The Independent

Independent voices was updated with a new global visual language in September 2015. It has grown to be a key section of The Independent online.

Read on

LEXI Paralympic classification

Second screen guide to demystify Paralympic classification for Channel 4

in Design, Work