• 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

    My favourite thing about Paris-based design studio Twice is that they continually combine texture and colour in such a way that I’m practically banging my hands into my computer screen with wanting to hold their publications in my hands. That’s the trouble with tactility – it’s not practical – but that shouldn’t mean designers abandon it altogether in favour of a wipe-clean, stark, sterile aesthetic that makes us lose all hope in print.

  2. List

    I was lucky enough to visit Istanbul for its inaugural design biennale back in 2012 and although I was blown away by its creative scene, I didn’t come across too much graphic design. Rummaging through Studio Sarp Sozdinler’s website this week, I had the nagging feeling that I might have missed out.

  3. List

    Belgian graphic designer Broos Stoffels has it all; great poster designs, great typefaces, great Dance Organ-powered drawing machine for the creation of custom vinyl sleeves – no really! The young designer is a former student of Sint Lucas in Ghent, a institution with proven design pedigree, and has spent the last few years honing his practical and conceptual skills into a fantastically coherent body of work.

  4. List

    If you aren’t familiar with The Casual Optimist blog about publishing and book culture then it’s well worth checking out (I’ll wait). Anyway last week its author shared these amazing posters created by the leading German graphic designer Gunter Rambow for the S. Fischer Verlag publishing house back in the 1970s. What’s interesting is that some of them tiptoe right up to the edge of being gimmicky, but always stay the right side of the line thanks to Gunter’s unerring image-making brilliance. I really can’t get enough of these.

  5. List

    When a studio does everything it can to get to the very root of a client’s working philosophy, it often leads to the most interesting and effective identity design. This is definitely true of Toronto-based studio Blok Design’s work for Dallas film production company Lucky 21. Created to mark the company’s new venture – “taking on the highly competitive LA market” – the identity takes into account the brand’s character, which the studio describes as “full of humour and fiercely passionate” to create a set of visuals that fall close to home.

  6. List-2

    Illustrator and longtime mate of ours Michael Willis is straying away from illustration and into something altogether more design-focussed. The elements at the heart of his images are the same; placing retro and contemporary influences side-by-side to create something so contemporary that it feels ahead of its time. He’s been working recently with Mood NYC, providing photographic manipulation and graphic treatment for their look book as well as helping create an overarching aesthetic for the brand, one which evades the recurring trends and repetitive styles that seem to permeate many designers’ portfolios.

  7. List

    Three years ago Milan studio Leftloft were commissioned to help iconic Italian football club Inter Milan with a ticket sales push, but the relationship developed into something much more comprehensive. Here art director Francesco Cavalli tells us how they came to lead an extensive rebranding of the whole club, from a new crest and a bespoke serif typeface to an exhaustive style guide for use across print and digital.

  8. List

    As of 6.30pm last night Airbnb looks a little classier. Having spent the past seven years growing a vast community of country-hopping collaborators, the world’s largest online accommodation marketplace has decided it’s time for a change. Gone is the awkward, dated logo that still reminds me of a bad ice cream parlour, likewise the cold, clinical blue that serves as the accent colour for all San Franciscan startups; and in its place is something entirely more exciting.

  9. List

    Massimo Vignelli was one of the most important graphic designers of his generation and his death in May affected the creative community very strongly and very immediately. The tributes poured in (some of which we included in our piece here) but for some the response to his passing would take a little longer to formulate. So it was with Colorado-based studio Berger & Föhr, who began this set of tribute posters when they first learned of his illness.

  10. List

    In our first feature on Shillington College we looked at why its founder was compelled to create a new kind of graphic design education to better prepare graduates for the working world. But how does the college pursue this aim in practical everyday terms, achieving what can take several years into other institutions in a matter of mere months? To find out we asked the people who make it happen– the teachers themselves. So we quizzed US director Holly Karlsson, Melbourne lecturer Carlos Chavez, Manchester lecturer Jeffrey Bowman and senior London lecturer Corrie Anderson. Here’s what they had to say…

  11. List

    Dutch illustrator and designer Eline Van Dam (Zeloot to her clients) belongs to the same circle of pals as Viktor Hachmang and Jordy van den Nieuwendijk, which goes some way to explaining why her work is so god damn beautiful. Although she’s about as versatile as image-makers come – her portfolio covers a variety of styles ranging from the niche to the commercial – it’s her posters that really stand out for their 1970s-inspired phychedelic iconography and bold, experimental use of colour; any colour she can get her hands on! Now we just need to work out what we can commission her for.

  12. List-2

    There are a couple of key points that underpin all really solid identities which, if one is removed, causes all the others to come tumbling down like marbles in a disastrous game of Kerplunk! It needs to be thorough, clear and communicative, it needs to be just as effective when pasted onto a giant billboard as it does on a tiny flyer, and it needs to contain elements which are applicable across the board including stationery, signage and printed collateral. I can just imagine Post Projects happily ticking all three of these golden rules off on a billboard upon finishing this identity for the 13th annual New Forms Festival, a festival celebrating arts, science and grassroots organisations across Canada and the rest of the world which took place last year.

  13. List

    Furniture company Fioroni had the wise idea to turn to Swiss design consultancy CCRZ when it came to designing their logo, catalogue and website, and they must be mighty glad they did. Their products channel a “contemporary reinterpretation of the Alpine constructional tradition, combined with carefully crafted details and a clever use of solid wood and industrial plywood.”