• 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. Tomaslaar-itsnicethat-main

    Nice body of work here from Dutch design student Tomas Laar, who has a pleasing understanding of typography and the fun there is to be had in publication design. Even though he’s still studying he’s been very busy immersing himself in the design world, taking part in Hort’s raucous After School Club and a number of different group shows and workshops. What I like about his work is that he’s not afraid to mess around a bit, and the more professional journals he’s put together and professionally bound are contrasted by mini-projects that see him making posters in homage to designers he admires and pasting them up on walls around The Hague. Even his typography is light-hearted, and shows how unafraid he is to get stuck in with different materials and processes in order to get the best result. He’s also got an absolute ripper of a blog.

  2. Spd-newyork-itsnicethat-list2

    Call me a massive magazine nerd if you must but I really enjoy the conversation about what makes a great cover. Is there a science to it as Tyler Brûlé maintains? Does it have to be meticulously planned or can it be the simple execution of gut instinct? Where is that fine line between bold and daring on the one hand, and obtuse and gimmicky on the other? Anyway yesterday two “best cover” shortlists were unveiled which gives us a glimpse into what two leading industry bodies think (The Society of Publication Designers and The Professional Publishers Association).

  3. Flatland-itsnicethat-list

    “We hear a lot about the death of print and the dominance of digital,” begins Epilogue’s Kickstarter pitch video for a new version of Edwin Abbott’s Flatland, “but it’s having access to either that makes this an exciting time. The challenge is, how do you make something that is interesting and meaningful with both?”

  4. Jaimezuverza-itsnicethat-main

    If you ever want to read a truly inspiring interview with one of the coolest designers out there, look no further than this one with Jaime Zuverza we ran on the site back in 2013. In it Jaime said: “Lately I have been inspired by the strange things the body and mind create. I think those things must be welcomed in a friendly manner. The body produces blood, tears, boogers, vomit, caca, gas, wax, urine, spit, odours, etc. The mind produces dreams, hallucinations, delusions, paranoid associations, psychic vibes, phobias, visions. All of these things are usually kept hidden but they play a big part in people’s daily lives.”

  5. Stosh-itsnicethat-list-2

    Stosh is the leading case in my new argument (actually my only case, but that’s neither here nor there) that all studios formed of two or more people should be named by combining those two names together. Freelance graphic designers Stephanie Cuérel and Josh Schaub (Stosh!) have been collaborating since 2010 and judging by their website – a trichotomy of bold design made by one, the other or both of them, with the odd GIF thrown in for good measure – it was a good decision.

  6. New-dps-itsnicethat-list

    It probably won’t be of much interest to you, but I wrote my dissertation on the intersection between digital platforms and physical publishing and the interesting ways people are finding to merge the two. For me it was fascinating, for some of you it’s probably exceptionally tedious. But for those of you with a similarly perverse interest in these curiously anachronistic forms of publishing there’s an interesting online archive that brings them all together. P-DPA (the Post-Digital Publishing Archive) is an impressive resource created by Silvio Lorusso dedicated to documenting projects at the forefront of modern publishing. It’s far from comprehensive, but the user-generated archive offers up some exciting examples of progressive publishing. I could go on, but I’ve probably already bored some of you to tears.

  7. Spin-itsnicethatlistfull_screen_simon_pengelly_2

    When graphic designers take on furniture designers, their broadening solutions can sometimes feel formulaic – all wholesome browns and chatter about “craft.” That’s why it’s so refreshing to see Spin’s work for British furniture designer Simon Pengelly. “The idea for Simon’s identity came from a visit to his workshop and noticing the lovely graphic stripes on the edge of the plywood used on one of his chairs,” says Spin. “The various iterations of the marque reflect different thicknesses.” Despite the fact, as Spin puts, it, Simon’s design approach “brings together a blend of organic minimalism and a distinctive feel for natural materials,” the identity focusses on the minimalism and shuns the organic, taking on a bold, direct and a very brave aesthetic.

  8. Anagrama-itsnicethat-list

    Mexican design studio Anagrama has turned its focus to one of its own this time around, creating a solid brand identity and new interior for a “cantina” called Botanero Moritas. Anagrama had the restaurant’s rich brand history – stretching all the way back to 1939 – to wrangle with, and chose to channel as much of its tradition and history into the new identity as possible while still striking a chord with contemporary branding. It went with a simple, bold logo on dark grainy backgrounds for much of the printed collateral including business cards, postcards and packaging, employing a rainbow foil to jazz it up where necessary, while the variety of typefaces used on menus and signage hints at the diversity of old and new references.

  9. Wife_web_backdrme-itsnicethat.list

    It’s always such a joy when great music and great graphics combine, as we explored recently in our Art + Music series. So when we found out that Manchester agency DR.ME was behind the sleeves for one of our all-time favourite record labels, Tri Angle, it was a happy day indeed. “Happy,” however, is perhaps not so apt for describing the sleeves themselves – or indeed the music of Tri Angle’s roster – characterised by a dark, brooding, experimental sound. Some dub it witch house, some rape gaze, others drag, but by any name, it’s downright weird and often rather brilliant. But enough gushing about these strange, cracked-out sounds, let’s talk about the sleeves.

  10. Graphilately-itsnicethat-list

    For some years now stamp collecting has been relegated from the status of a widespread and admirable pastime to a somewhat nerdy pursuit, and this is a perception that Blair Thomson, creative director of design studio Believe In, is keen to shake off. Having had a passion for stamps instilled in him at a young age, Blair is the designer behind Graphilately, an Instagram account dedicated to his own beautifully curated, and very well photographed collection, which celebrates stamps as a form of graphic art in their own right.

  11. Anna-kulachek-itsnicethat-list-2

    The very best graphic identities, as designer Anna Kulachek would attest, take on a life of their own. The Moscow-based creative has been working on identities for the Prague School of Design since 2012, and they’ve since grown into an evolving body which grows and reforms with each new brief. “In the beginning it was built on the illustrations of the city,” Anna explains, “because one of the points in the brief was to show what’s happening in Prague. So I decided to draw the school in simple shapes.”

  12. Chris-van-niekerk-itsnicethat-listfine_furniture_1

    Chris van Niekerk’s designs are direct, accomplished and considered, but what makes them extra intriguing are the process stories behind each. Take his special edition vinyl sleeves for Cheap Thrills. They look good enough – all dingy, limited palettes and dynamic type – but he explains that the imagery was created by sampling the sound waves from side A of each vinyl, and visualising them, which is pretty cool. The project that really caught our eye, not least because of how well shot it is, is Chris’ branding for bespoke furniture maker Jake Coleman, which takes a fresh look that’s true to its product, using a puzzle piece inspired by dovetails as the centre of the identity. To show the versatility of this kid, we’ve also included the designs for an Aperture publication, marking 60 years of the photography foundation, which looks very slick indeed.

  13. Emptyfilmposters-itsnicethat-list

    Sure this isn’t the kind of thing we usually post, but the sun’s all blazing and glorious outside our windows today, so we thought we’d be kind and give you something to stare at for the next few hours until it’s time to make your way to the closest beer garden available. You know what these images are don’t you? They’re iconic film posters with all traces of branding and characters removed – the bench without Forrest, a sunset with Simba removed and a deep blue sub-aquatic fade that’s one shark short of of a multi-million dollar blockbuster franchise. These posters are the result of hours of hard photoshopping by French art director Madani Bendjellal, and for making our afternoon pass that little bit faster we owe him our thanks. Thanks!