• 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. A2-moscow-int-list

    Somewhat lazily I’ve included an image in this post that concisely explains exactly what Moscow Sans is, who’s created it and why – which pretty much negates this whole piece of text. But in truth it was the best example of the typeface in use that I could find, hence its inclusion with the images below. Anyway, rather than repeating the sentiments of this text I’ll just say how excited I am to see Margaret Calvert lending her expertise to this project and reiterate a widely-held view that Henrik Kubel and Scott Williams are some of the finest typographic designers working today. Enjoy!

  2. Artworklove-jeff-koons-int-list

    You’d struggle to make a big, bright, shiny Jeff Koons balloon dog anything but visually brilliant, but Parisian studio Artworklove has surely done more with it than most, making it the star of some beautifully designed invitations to the artist’s show at the Pompidou centre. The colours, the scale and the stock selected work together beautifully and make a nice introduction to what the studio’s been up to since we last posted about them in 2012, when we flagged up some great art direction using a nice Julia Roberts quip. Other cool noteworthy projects they’ve carried out of late include a great identity for French furniture and homeware site La Chance, which takes a simple icon and colour palette and twists the mark into something more dynamic.

  3. Nbstudio-almeida-int-list

    It’s often the case with design work that the final outcome is quite different in scope to the original brief. So it was for NB Studio, which was originally asked by the Almeida Theatre in London for a brand review and refresh. After what the studio calls “an intensive period of immersion and briefing sessions,” the NB team came back with a more wide-ranging proposal – “It was clear then that this was to be a bold re-brand rather than mere cosmetic enhancement,” they say.

  4. Vg_alphabeta_04

    About seven years ago Village Green produced a series of iconic posters for London’s infamous Fabric nightclub… and then we haven’t checked up on them since. Poor form on our part as they’ve been busy expanding, improving and creating work for bigger and better clients. Currently it seems they’re specialising in architectural branding for commercial property developments, cladding the Alphabeta redevelopment in Finsbury Square, London and The Bonhill Building office spaces on Old Street. Of course they’ve done other stuff too; like the identity and exhibition design for Jean Paul Gaultier’s Barbican show and Nike’s 2013 Hypervenom campaign, but frankly there’s just too much stuff to cover in one article. We’ll be sure to keep closer tabs on these guys in future.

  5. Quimmarin-posters-int-list

    Barcelona-based designer and art director Quim Marin has a strong visual sensibility and a prolific work-rate if scrolling through his site is anything to go by. There’s a load of impressive poster and other print design on there, with particularly effective use of some trendy tropes which can often feel stale in less talented hands. “In such a visually polluted environment I try to come up with fresh and memorable designs with a clear aim at essential beauty and equilibrium that, at the same time, will ensure communicative effectiveness,“ Quim says by way of a mission statement, and it’s hard to sum up his work better than that.

  6. Chevalvert-int-list-2

    You wade into Chevalvert’s portfolio rubbing your hands across your eyes, unsure of what you’ve stumbled across. The Paris-based studio was founded in 2007 by Patrick Paleta and Stéphane Buellet and describes itself as being based on an “open, multidisciplinary approach,” which might go some way to explaining why it feels like a cave laden with treasures. So many treasures.

  7. Fantastic-man-list

    Fantastic Man magazine has been redesigned, as shown in its teaser image of its tenth anniversary issue. The magazine’s new issue cover star JW Anderson has shown the new cover on Instagram, which reveals a new design seeing the masthead run vertically and horizontally, instead of its previous preluder horizontal configuration. The cover image also runs to both sides, moving away from its previous white-edged format. We’re excited to see what changes might have been made to the inside of the mag…

  8. Dwp-bikestock-int-list

    This morning I had a puncture that I couldn’t fix and had to get the train to work, so it feels timely to be writing about Bikestock, a range of vending machines full of cycling essentials that can be found all over New York and Boston. The concept is a simple one; inner tubes, spanners, tyre levers tyres and any number of other little bits and pieces that make your wheels turn smoothly are boshed into a vending machine so you can grab them on the go and, more importantly, at any time of day!

  9. List

    Joost Bos is a recent graduate from the Academie Minerva Groningen in The Netherlands where he’s spent three years studying for his bachelor’s degree. Like many of his Dutch counterparts he’s a dab hand with typography both traditional and experimental and has a plethora of printed pieces in his portfolio. This one, Sequence 1, is an exhibition catalogue for a show of artist books at Joost’s alma mater, which perfectly demonstrates his design sensibilities. Immaculately set type is interspersed with hand-drawn elements and bright colours bring intrigue to an otherwise monochrome publication. Like what you’re seeing? He’s available for freelance work right now!

  10. Sam-coldy-penguin-int-list

    Is it just me or is Penguin killing it at the moment? The publishing house only recently celebrated its 80th birthday by launching a range of its classic titles for 80p each, accompanied by a slick website and a poster campaign which has reached even the furthest corners of London’s transport system. And right now, they’re in the midst of a new campaign called On the Page which celebrates women authors and characters in literary masterpieces.

  11. Karansingh-mop-int-list

    The glorious coming together of pattern, shape and colour makes for a joyous experience and that’s why print designers are held in such high regard. Last week we commissioned Animade to turn three eye-poppingly good Pucci x Orlebar Brown patterns into trippy GIFs, this week we’re turning our attention to profiling creatives we believe are among the best around when it comes to working in this area. We are proud to present these #mastersofprint.

  12. Gerard-marin-int-list

    There’s something of a trend going around at the moment for identities using 3D logo-marks, and with this one by Gerard Marin we can see why. Barcelona-based designer Gerard developed the branding, stationery and corporate materials for interior designer and visual merchandiser Neus Ortiz. Recognisability and malleability were at the forefront of his mind for this project, and the flexible “N,” which changes according to its application, prove a neat solution to both. His is an unfussy aesthetic which lends itself perfectly to branding projects – here’s hoping more make their way to him very soon.

  13. Nike-logo

    There’s a moment in this film where Michael Bierut comes over all Hayley Joel Osment in The Sixth Sense as he declares: “ I can see things in typefaces that normal people can’t.” It’s part of his discussion about how “design can be a lonely thing” and that as you immerse yourself in that world “you’re actually making yourself less normal than regular people.” Filmed at Design Indaba in South Africa last month, this interesting short film moves onto to look at logos and why designers are so interested in them. Using famous examples like the Nike swoosh and the Target, um, target, Michael explains his theory that we’re drawn to them because they’re primitive and yet we invest them with so much meaning. “A lot of what we see when we’re looking at the logo isn’t really happening in the logo; it happens in our own mind,” he explains.