• Main

    The new Guardian app

Graphic Design

Behind The Scenes: The Guardian's creative director on their new app

Posted by Rob Alderson,

When it comes to mainstream media, few organisations have embraced digital innovation with quite the same appetite as The Guardian. This week sees the launch of their new and improved app which creative director Alex Breuer and his team have been working on for some months, hoping to create a newly coherent and content-friendly mobile and tablet experience. We spoke to Alex about the design thinking that went into it…

The last big Guardian redesign was a huge success; did that add to the pressure when starting this process?

It would be fair to say given the quality of work by my esteemed predecessors, that in my mind at least, there was a little extra pressure on this redesign.

The initial pressure at the that blank-sheet-of-paper-moment quickly subsided once we began the thorough validation process of the organisation’s and readers’ needs and the subsequent synthesis of the ideas into a coherent strategy. The challenge of this redesign is very different from the previous ones. The Guardian has rapidly evolved as a news organisation over the past few years, we have new offices in New York and Sydney, we passed the 100million unique browsers mark, we have a pioneering open journalism ethos.

The overarching goal was to evolve a new design and brand language that is consistent, coherent and has fidelity of presentation and interaction across all our platforms, that can adapt not just to serve the readers’ changing needs but also the evolving global news organisation that The Guardian has become.

With readers there is always an element of resistance to change that adds a little pressure to the process, but we were clear from the outset that we would be developing and designing in the open so both readers and key voices within The Guardian were all part of the evolution of the new design. This not just alleviates some of the “shock of the new” but gives confidence that we were solving the right problems.

  • 7inch-home

    The new Guardian app homepage

What were the core improvements you wanted to make to the app?

When I arrived here it was clear that we were giving users completely different experiences – in terms of fidelity to the core Guardian brand – across all platforms. We have our Editions app, we had the old smartphone app, we had an Android app that was slightly different, we had desktop website and we had a mobile site worked on by a third party which also had a different design – all of which were vague interpretations of the original Berliner newspaper design.

The first improvement was to evolve a new design and brand language presented a familiar and consistent experience but was also adaptable and responsive to the volatile needs across the whole digital landscape. But as the new mantra goes, design is not just how it looks, it’s how it works. So some of the key facets and functions of the new improvements are:

– A new responsive design built around the key proportion of the core image size we use across digital platforms. This substrate helps us enforce how we use space across headlines and pictures, which has always been a very key part of our brand identity. 

– For the first time we have consistent use of Guardian Egyptian across all our products and platforms.

– We commissioned Territory Studio to design us a custom set of icons that had the character of and form of Guardian Egyptian. We felt it was a really important part of the detail of the design that even at the this small but high functioning level the fidelity of the brand was delivered.

– A new colour language highlights the significance of stories and guides readers to discover new writers and subjects. We have an overarching news colour palette, a features colour palette, one for multimedia and one for live content. This transfers to all the various touchpoints and platforms. In the past if you clicked on sports article everything would be green, but now for onward links we’re using the livery of that type of article, so you can quite quickly move to comment pieces for example.

– Greater personalisation means users can tailor the types of articles they want featured on their homepage, and create bespoke alerts to follow favourite journalists, stories and football teams, as well as having region-specific editorial curation.

– Flexible formatting allows editors to curate stories and clearer design and navigation helps readers to discover new stories and writers with greater ease. Also we are getting to the stage where we can art direct content allowing us to have bespoke presentation created within the tools. 

– First impressions are always powerful, we were keen that the animations and transitions within this app were at a level consistent with the latest evolutions of native operating systems. One of may favourites is the animation of our new ‘g’ brand as the refresh animation. A small touch but one of the elements that core to our unique brand.

  • G10

    Initial sketches for the redesign

  • G7

    The Territory Studio icons

  • G8

    Design guidelines for the redesign

  • G9

    Design guidelines for the redesign

  • G10

    Design guidelines for the redesign

Mobile and tablet design seems to be changing all the time; how do you future proof designs with this in mind?

We are reaching the stage where presentation is evolving beyond skeuomorphic presentation of non digital content and as using mobile devices becomes second nature, we can develop designs that are inherently of the devices and how people use them.

This is not just a challenge of presentation but also acutely tied to content types and strategy. As an editorial organisation we know going forward that the form digital journalism will take is evolving. We felt it important to build a system that didn’t merely tag different types of content in simple lists as links to “article pages” (video/podcast/gallery etc) but gave enough space to properly present and signal the rich variety of content.

If I am honest there is a small proportion of the people using the new app who are convinced it should be just a list of articles. To me this would shackle our evolving content strategy; our competitors in terms of great presentation and usability are not just news apps. We have learnt from a whole range of other experiences in the space and tried to build an experience that doesn’t just sit comfortably alongside the best out there, but always gives us a platform to evolve the form of Guardian journalism in the future.

How much do you test changes like this with focus groups etc?

Even from early stages before we committed any code we built wireframes and flats – we have a great UX and testing lab here – and so from the very beginning we put our ideas in front of readers. We started with some very radical ideas but we knew we had to see if our thinking really tackled the right challenges.

We had three very different initial takes: one which was completely socially driven, where we took cues from how people were responding to content that was out there; one which was led by our open journalistic ethos and one which looked at that fact that there are multiple news sources out there, but people come to The Guardian for our particular take – so what if we dealt with stories as particular packages that lead people through the arc of comment and analysis of a story as well as the core new reporting?

We decided a quick browsable app combined with that authorial story arc and social cues is what people want. After that initial wireframing we went very quickly to rough prototypes and when we had a Beta version we opened up access to our most engaged users to let them play with it. We learned a huge amount that influenced the design and structure. Getting the balance right between beautiful presentation and story density was one of the key issues we did a lot of work on.

  • Nav-3-example

    Navigation page example from the new app

  • Footballtest-4col

    The new football homepage

Ra

Posted by Rob Alderson

Editor-in-Chief Rob oversees editorial across all three It’s Nice That platforms; online, print and events. He has a background in newspaper journalism and a particular interest in art, advertising and photography. He is the main host of the Studio Audience podcast.

Most Recent: Graphic Design View Archive

  1. List-motherdesign_sundancefilmfestival_2

    “It’s been funny seeing ‘Robert Redford to sign off’ on our work plans in recent months,” Mother Design London’s Nick Couch tells us, revealing the new identity for the 2015 edition of the Sundance Film Festival. The independent film festival, which started in 1978 in Utah, is chaired by Redford, who from the sounds of it, takes quite a hands-on approach.

  2. _llisr-meteor

    French design duo My Name is Wendy caught our eye earlier this year with the innovative D/I/M/E/N/S/I/O/N typographic poster series. The studio recently launched a new site showcasing some great new projects that suggest the pair’s Bauhaus-esque graphic approach is going from strength to strength. Two projects particularly intrigued us – the first being a poster series which acts as a part of a wider project in which the studio creates the fictional land of Meteor.

  3. List-tumblr_ncojdd7pid1tap5jeo1_1280

    Taiwan-born graphic designer Wang Zhi-Hong claims the place that most stimulates his imagination most is one with “no one but me”. In a somewhat reluctant-sounding chat with French magazine Post IM, he paints a careful picture of himself as a man of solitude and precision. Whether or not this makes for a happy life, it certainly makes for some superb graphic design work. From his impressive portfolio we were most drawn to his book design, which takes this idea of a simple, uncluttered existence and turns it into beautiful pared back, precise creations. We were particularly seduced by the monochrome Yohji Yamamoto book designs, with the glorious curved forms of Japanese kanji characters given space to breathe against this restrained aesthetic.

  4. List-dhub_brochures_inside

    Pitching for a design museum identity that will act as the platform for some of the most celebrated designers the world over can’t be an easy task. How to merge tradition and modernity? To create something beautiful, that doesn’t detract from the work itself? So when Mallorcan agency Atlas put forward their proposals for the new Barcelona Design Museum’s identity, it’s perhaps little surprise they worried their ideas were “too modern and risky.”

  5. List00_mitml_posters

    Pentagram partner Michael Bierut and designer Aron Fay have designed a new identity for the Massachusetts Institute of Technology (MIT) Media Lab, creating this striking, labyrinth-like look that brilliantly communicates the faculty’s “anti-disciplinary” approach.

  6. List-2

    When it comes to psychedelic album artwork, it sometimes feels like the very best might already be behind us – Wes Wilson, Mouse & Kelly and Rick Griffin already having worked through the golden era. There’s something reassuring about the knowledge that graphic designers are still looking for ways to incorporate psychedelic elements into their designs though, and French graphic artist Lucas Donaud is foremost amongst them.

  7. Stationary

    Hotel branding can so often be a dowdy affair, as if the design nods to the temporary nature of the building’s inhabitants – something to move on from, rather than to dwell on. So it’s wonderful to see a brave, opulent new identity for the Connaught in London’s Mayfair, designed by The Partners around a stunning new artwork by Kristjana S Williams which now hangs in the hotel.

  8. List

    I was surprised to learn that Amsterdam’s HOAX studio don’t seem to have been on the site before, and faced with their wide-ranging portfolio it was a challenge to focus in on a narrative that made sense. Founders Bram Buijs, Sven Gerhardt and Steven van der Kaaij joined forces based on their “shared love for typography, material and experimentation” and this passion for fresh creative thinking runs throughout their work.

  9. List

    Creating a cohesive identity for a design conference might not seem like such a tall order, but the reality of producing flyers, bags, programmes and that all-important logo mark for an international event isn’t as simple as you might think. For starters there’s an abundance of conferences out there, each with it’s own unique look and feel, so creating visuals that present a point of difference will always pose a challenge; secondly how on earth do you make a talks timetable look exciting?

  10. List

    Boasting PVC-clad bottoms, surreal jazz photography and beautifully-rendered risograph prints of basketball hoops, Shabazz Projects’ homepage certainly offers a well-curated and striking experience. The LA-based publishing platform was founded by Hassan Rahim and Brian Okarski, releasing art, photography and design-focused books and objects, all with a run of 200 or fewer editions. Stand-out pieces include the Various Basketball Hoops risographs, which put a whimsical spin on these often weary-looking monoliths; and Eric Wrenn and Antje Peters’ Jazz photographs, which place instruments against a dramatic plume of smoke. Hassan and Brian say their aim is to “provoke and surprise,” and from the images on their site alone, they’re certainly not letting themselves down.

  11. Hellotalja_kit-list-image

    Many a blue-sky-thinker and envelope-pusher has been extolling the virtues of meditation and mindfulness to pseudo-spiritually swell their business jargon lately. So it’s refreshing when a beautifully branded, creatively-minded product emerges that promises to offer that lucrative “pause from modern life.”

  12. List

    If all the magazines and small publications that used the internet as their subject matter were dumped on your head it’d be curtains for you – there’s bloody loads of them. Some, like Offscreen, deal with the people that make digital culture happen and try to bring these unsung heroes out from behind their screens into the RGB limelight, others, like French publication Nichons – Nous Dans l’Internet (Tits – We In The Internet) are more conceptually-minded, analysing and assessing the social and cultural phenomena brought about by the ubiquity of technology.

  13. Main

    Setting up a design studio and changing your name to a cool pseudonym is a good two-fingers-up to life on the quiet side. Parisian designer Julien Ducourthial decided to make this leap, and now overseas The Jazzist, offering bold, fluoro design work “serving in fields of graphic design, illustration and art direction in digital & printed media.” When Julien emailed us he told us he was inspired by 8-bit imagery and cartoons, which gave us an immediate inkling that we were going to like his work. Anyone looking to commission a great French designer any time soon? Julien is your man.