• 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

    It’s the overriding rule of all things trend-driven that as soon as we take a big leap forward in technology we start to look back nostalgically, triggering all manner of retro imagery, touches and techniques. At least it seems that way, and I’m sure I’m not alone in how often I’m drawn to graphic design which places hand-drawn type and recycled imagery alongside high-tech touches.

  2. List

    At its core, dance is about innovation, beauty and movement – ideas executed brilliantly in this identity for a European contemporary dance festival by Verena Hennig and Ludwig Janoff. The clever designs take a very hand-crafted, even scrawled look, aiming to play on the idea that “the classic ballet thrives on the idea of perfection,” according to Verena.

  3. List

    Parisian studio Playground’s website really does reflect its name – a joyful metaphorical ball-pond of colour and fun. The studio works on graphic design, illustration, branding and motion graphics projects; uniting all their work through a fantastic eye for colour and line to retina-grabbing effect. As something of a huge Of Montreal fan, I was particularly drawn in by their work for the band’s 2012 release Daughter of Cloud, which offers a lush, psychedelic alternative to the band’s usual illustration-led artwork.

  4. List

    Wilfred van der Weide was once part of Dutch design duo wilfredtimo, whose work we’ve been admirers of since we came across these superheroic graphics in 2012. After several years in each other’s pockets they’ve gone their separate ways, but unlike most break-ups, some of the results have been beautiful.

  5. List

    Dutch designer Roosje Klap recently set up an international initiative known as The Design Displacement Group with the intention of approaching modern design in new and unusual ways. Their intention is to “form a group together which creates work as seen from the future. Yes! We time-travel 20 years and look back on today, to understand the discourse of graphic design as it is happening today – with different eyes and speculative future categories.

  6. List

    Belgian designer Corbin Mahieu learned his craft at the prestigious Sint Lucas School of Arts in Ghent, following in the footsteps of a legion of other respected Belgian designers and illustrators. His work is academic in style; specifically focussed on arts projects for the local creative community in Ghent. Although he’s recently completed an internship in London at Zak Group, presumably developing into further spheres of design in the process. Pictured is a beautifully realised catalogue for his alma mater, exploring the facilities and faculty in detail.We’d say he’s definitely one to watch, and hopefully he’s sticking around in London a little longer.

  7. Furnlist

    Berlin-based consultancy D describes itself as a “two-headed quadruped that focuses on graphic design and illustration” that “was born, speaks, thinks, and of course eats Italian.” It’s this heritage and appetite that explains the beautiful identity work the studio has created for Italian furniture design factory Edizione Limitata. We don’t often get excited about catalogues, but this one really is lovely, showing well-shot images of the furniture alongside more playful, painterly illustrations with brushstrokes and doodle-like patterns acting as a lovely contract to the slick imagery of the pieces on sale. It’s great to see the usually rather serious world of furniture given a less stony-faced identity, though the careful use of colour and typography as shown on business cards, stationery and technical sheets still shows Edizione Limitata as very much the high-end Italian operation.

  8. List

    There’s nothing heavy-handed about Seoul-based design studio fnt’s work. It’s like the graphic design equivalent of that little dish of mint-flavoured ice cream you get handed between courses at fancy restaurants to refresh your palette; something about their refined use of thin lines in muted colours on a white background feels newly delicate, when you’ve spent several hours being accosted by great slabs of colour and text that feel like a knock to the head. Maybe it has something to do with the Korean script, introducing a whole new realm of possibilities to the ways they treat typography, or the studio’s willingness to dabble in patterns and geometric shapes in a simple and understated way to jazz up otherwise clean layouts.

  9. List

    Furniture, typefaces, identities and posters, websites, limited edition fashion lines, music packaging and abstract works all exist within the broad practice of Berlin-based designer Till Wiedeck. Under the moniker of HelloMe, he’s been a constant creative force on the contemporary graphic design scene for the past six years, accumulating big-name clients like The New York Times, COS and Warp Records among others. This recent work for German/French art fund Perspektive, is characteristic of Till’s holistic approach to his process, with print collateral, web and all other elements of the identity created by the studio, all united by a bespoke typeface.

  10. List

    It’s all well and good writing about slick, big-client, big-agency graphic design. But once in a while it’s bloody lovely to cast our eyes over a graphic design project that takes itself not-so-seriously. One photographed using Polaroid, and sent to us as if broadcast directly from amidst a 90s Kevin Smith film. The projection questions is the visual identity for Baohaus – a restaurant that takes its name as a smart little play on, er, bauhaus and Bao – the form of Taiwanese food the restaurant specialises in.

  11. List

    Some people may be already winding down for Christmas but not so Rob Gonzalez and Jonathan Quainton, aka Sawdust. They’ve just updated their site with so much new work that we were genuinely spoiled for choice when it came to selecting what to focus on. Great typographic illustrations for_Men’s Health_,_ Wired and The New Republic didn’t make the cut on this occasion; instead we decided to showcase two very different, but equally excellent, print projects.

  12. Listhkagw-1

    It can’t be easy working on a brief set by a client that’s both an art event organised by a non-profit and a big banking firm. How best to balance a slick, serious look with one that shows creative awareness? For The Partners’ branding for the new Bank of China-sponsored Hong Kong Art Gallery Week event, the consultancy cleverly chose to look to a sense of place to inspire its look, which is informed by the area’s hilly topography. The event bring together more than 50 local galleries and museums, who spend ten days opening their spaces up for all, aiming to promote the work of local artists and contemporary Chinese Hong Kong art to the world.

  13. List

    There’s something deliciously tactile about Anne Jordan’s book cover designs. Much of her work unites a very materials-driven approach with clever typography, resulting in work that makes a two-dimensional image feel extraordinarily physical. The designer is based in Rochester, New York, and is also one-half of the duo behind the Walking blog, a rather sweet project in which she and her husband take half an hour a day to make something creative and post it online. However, we wanted to focus on her designs for books; and especially hone in on the way she takes an often oblique title and creates a design that plays off it, frequenly in smart, unexcited ways. Her look for The Woman Who Read Too Much, for instance, plays with cliched images of femininity like hair and curves to render the title less legible; and the look for Kevin McLauhlin’s Poetic Force uses feint lettering and thin-to-breaking-point paper as a backdrop. The choices seem obvious as we write them down but her work is anything but, creating covers that delight and make you think in equal measure.