• 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. Grilli-type-int-list

    It wasn’t long ago that we were singing the praises of Grilli Type, a foundry looking into new and innovative ways to show off the new typefaces that their designers produce, and coming up with fun and playful mini-sites in the process. Now we’re back to let you know that it has done it again for GT Cinetype, a font designed by Mauro Paolozzi and Rafael Koch, which was inspired by cinematic subtitles.

  2. Zoo-art-and-music-int-list

    “Each project is an adventure,” says French design agency Zoo. And their enthusiasm shows – the work on their site is fresh, dynamic and brilliantly executed. The visual identity for Musique en Ville, a multi-venue event run by Rosny-sous-bois city council, manages to be hip without losing all-ages appeal, and is adaptable across any season or touchpoint. “We aimed to express ideas of a party and a travelling stage while leaving room for imagination,” says Zoo. “The images show one area with several spots of light; each word is the central point.”

  3. List

    Tonight sees the launch of a new book by photographer Annie Collinge at Ti Pi Tin bookstore up on Stoke Newington High Street in London. Some of you should get down there, but we appreciate that others of you are perhaps thousands of miles away. So here for your delegation are some spreads from the book and some close-ups of the images within.

  4. Currency-post-4-int_copy

    The Royal Mint has unveiled a new coinage portrait of the Queen, only the fifth during her 63-year reign. The new coins, which will go into circulation later this year, feature a portrait designed by engraver Jody Clark selected in a competition hosted by the Royal Mint Advisory Committee. In light of this, we thought we’d have a look at some proposed and actual redesigns of currencies around the world, from age old gold standards to Bitcoins, and abstract pixels to odes to scientific discovery.

  5. Paul-schoemaker-eventburo-int-list

    If nominative determinism had been a stronger force in German designer Paul Schoemaker’s life, perhaps we’d have a cordwainer on our hands. Or feet. Instead, Paul chose a graphic design route, and we’re glad he did.

  6. Paulinelepape-int-main

    Exciting new student alert! Meet Pauline, currently working on her advanced degree in type design at École Estienne in Paris – how glamorous does that sound? It’s rare to find a student with as much consistently fantastic work on their site, and for a while I didn’t actually twig that Pauline was still studying. She’s designed typefaces, had a bash at letter pressing for her business cards, and made some publications that I’d actually buy. The way she represented a bunch of Stéphane Monnot short stories is well-designed without overshadowing the writing, and that publication about the concept of an ornament just looks fantastic. Remember this name: Pauline Le Pape, she’s got big things ahead of her.

  7. Gabriela-maskrey-lapulperia-int-list

    In the two years since we first featured nomadic designer Gabriela Maskrey she’s taken on a lot of new projects and pushed her skills in all sorts of new directions. Originally she was all about editorial design – which it has to be said, she was great at – but she’s recently branched out into branding for Peruvian luxury food company La Pulperia. Her bold serif rendering of the company name coupled with historic imagery referencing Peru’s gastronomic culture combines to satisfying effect, and the addition of hand-drawn icons is a great touch too. All in all a great first foray away from the world of books and magazines.

  8. Freytaganderson-fraher-int-list

    Often the most interesting branding work hinges on a simple twist, and such is the case in this work by Freytag Anderson for Fraher architects. The Scottish studio’s concept revolves around the neat idea of the “F” in the logo doubling up as an architectural floorpan.

    “The intersecting compartments or rooms create a simple graphic device for containing text, images and texture,” the designers say. “A vibrant red accent colour supports the minimal yet functional aesthetic.” Rolled out across stationery, a soon-to-be-launched website and internal presentation documents, it’s a really impressive idea executed to perfection.

  9. Karl-anders-vitra-int-list

    Designing for a design fair must be as much of a dream brief as a terrifying one. But one agency more than up to the task is Hamburg-based Karl Anders, which is behind this brilliant campaign for Vitra’s presence at the Maison et Objet fair in Paris. We can’t get enough of the bright colours, playful art direction and unusual way of presenting the Swiss furniture brand’s products. The concept behind the campaign, Home Complements, is based around the idea of “unexpected outcomes,” hence the gloriously haphazard feel to the display of the products in the photographs, which are shot by Nicolas Haeni and Thomas Rousset. It looks brilliant, and marks a nice departure from the more serious look interiors brands often go for.

  10. Bdb-portfolio-7-int

    Amsterdam-based designer Bart de Baets has been making great work for ages, and 2014 was no exception. There are conference posters for the Goethe Institute, brochures for architecture pavilions and a really nice record sleeve for Melbourne-based band Total Control. Bart manages to combine minimal line work and graphic humour with a vast frame of reference and really great colour-ways. There are also slugs kissing.

  11. Michaelbierut-nyt-signage

    Michael Bierut is a designer, Pentagram partner, writer, lecturer and self-confessed nerd. Taking the stage at the Design Indaba festival in Cape Town yesterday, he announced his new book, pithily titled How to: Use graphic design to sell things, explain things, make things look better, and (every once in a while) change the world. Published by Thames & Hudson it won’t come out until later in the year, but we felt it was a good excuse to look at some of Michael’s most interesting work from across the years.

  12. List

    You’re 25 years old and Richard Turley calls you up out of the blue and says; “Hey, I’ve just got this sweet job at MTV and I’d like you to come on board as my senior designer, are you interested?” Of course you’re interested! You’d be a fool not to be interested, even if it means leaving your current (also awesome) job as an art director at The New York Times. Sounds nice right? Well this isn’t some fictional story I’ve just concocted in my head, this is the soon-to-be legendary tale of Erik Carter, a Virginia native turned New York City creative powerhouse who’s filling our (music) televisions with choice tidbits of witty animation and humorous asides from the world of the web.

  13. Rawcolor-febrik-4-int_copy

    Eindhoven-based graphic design and photography studio Raw Color has created a great multi-platform identity for interior textiles brand Febrik, using horizontal, laser-cut lines as a reference to archiving methods in textile sample books. They are utilised both for this purpose and as decorative details on business cards, stationary items and online.