• 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

Rob joined It’s Nice That as Online Editor in July 2011 before becoming Editor-in-Chief and working across all editorial projects including itsnicethat.com, Printed Pages, Here and Nicer Tuesdays. Rob left It’s Nice That in June 2015.

Most Recent: Graphic Design View Archive

  1. Dnandco-st-james-itsnicethat-list

    How exactly do you go about rebranding an area, especially one bookended by Mayfair and Soho in central London, which has been largely forgotten about by Londoners? When The Crown Estate turned to dn&co. for assistance in giving St James’s a bit of a makeover, the agency decided to consider every element of the region’s luxury status, from its street presence, through windows, hoardings and building wraps, to a new quarterly newspaper and website. Safe to say, it was no small task.

  2. Tres_tipos_graficos_itsnicethat_list

    Spanish studio Tres Tipos Gráficos has created these simple posters for plays that ran last season at Teatro de La Abadía, a theatre and performing arts facility in Madrid. The studio has represented each production with a photograph that encapsulates the general feeling and atmosphere of the play as opposed to a specific scene or character to encourage the audience to create their own interpretations.

  3. Gurafiku-itsnicet

    Clicking on to Japanese graphic design website Gurafiku is something like stepping feet first into a black hole of graphic design. Started by Chicago-based designer and researcher Ryan Hageman in 2009 as a way to learn more about the history of graphic design in Japan, it has since grown into a archive which spans over 200 years of work, from the 1800s all the way up to the present day.

  4. Foreign_policy_brandguidesingapore_itsnicethat_list

    Foreign Policy Design Group, who we featured on the site last year, has nailed the art of collating diverse and sometimes complex ideas into a beautiful, cohesive publication. The first book in its new series, Brand Guide: Singapore Edition is like a beautifully arranged scrapbook of your dreams, rounding up “iconic homegrown brands that attest to the current golden age of design in Singapore,” the studio explains on their Behance page.

  5. Leslie-david-itsnicethat-list

    Leslie David might be one of the busiest women working in her industry. We last checked in with her six months ago, to swoon over the identity and packaging her studio had created for Glossier, and a typeface which looked to be blowing in the breeze, among other things, but this week she’s back with no fewer than three new projects. Three! She never stops.

  6. List-ashley-stephenson-new-york-times-its-nice-tha

    Designer Ashley Stephenson seems to be a shy chap, perhaps explaining why he prefers to go by his creative pseudonym G/tr, and why it took a friend of his to get in touch singing his praises. We’re not sure why, as Ashley’s certainly talented: this project was created while interning at the New York Times, and looks to show the publication’s prestigious heritage while also celebrating its move into the digital era. For each of the images, Ashley has imagined what the stars of yesteryear might get up to if they were as preoccupied as we are today with the likes of Snapchat, Vine, Instagram, Periscope, Twitter, Facebook, What’s App, Club Penguin, Habbo Hotel…you get the picture.

  7. Studio_storz_itsnicethat_list

    Berlin-based Studio Storz has a portfolio chock-full of visual identities, editorial design and book design that’s varied in style. What differentiates Studio Storz from other design practices is its collaborative approach to design. As part of Spector Bureau, a collection of designers, artists and publishers, it actively works with other professionals in the field. It sees the role of designers as ever expanding and one that can manifest itself as researcher, engineer, craftsman and communicator; and the studio’s relationship with the Heidelberger Kunstverein has been ongoing since 2012.

  8. Alexandre-pietra-for-noise-festival-its-nice-that-list

    A good identity isn’t necessarily one with a mega logo – though it doesn’t hurt – but one that looks great and is instantly recognisable across any touchpoint, be it a coffee cup or huge stretch of hoardings. When we saw this festival identity looking bloody brilliant on a balloon, we knew it passed the test. This simple blue and white look for French festival For Noise was created by Swiss designer Alexandre Pietra, and aims to convey the festival’s new, less rock-orientated approach. “The concept of this 2015 edition is to let the music speak for itself,” says Alexandre.

  9. Byop_int_list

    Earlier this month, the Serpentine Pavilion opened to the public. The beguiling, multicoloured woven structure designed by Spanish architects SegnasCalgo sits in Hyde Park like a more grown-up version of a fort you might have built when you were a child. Over the last decade and a half the annual architecture commission has become a much-anticipated beacon of design, and to celebrate 15 years of the Summer Pavilion, the Serpentine Galleries have teamed up with Kidesign, Marina Willer and the team at Pentagram to launch a digital platform and national campaign to foster the aspiring young architects of tomorrow.

  10. Lust_typedynamic_itsnicethat_list

    LUST not only has a great name, but is a studio covering a huge range of disciplines in an extraordinary way. Based in The Hague, Netherlands, it’s this project the studio did last year at the Stedelijk Museum in Amsterdam that demonstrates the studio’s unique and varied approach. An interactive installation for the exhibition Type/Dynamics, the show aimed to comment on the work of experimental graphic designer Jurriaan Schrofer.

  11. Song-haein-itsnicethat-list

    I’m just going to come right out and admit that there’s an inherent injustice in trying to explain how beautiful a printed book is through digital images. This is especially true in the case of Haein Song, whose painstakingly bound publications go one step beyond plain old riso-printing and saddle-stitching.

  12. List-its-nice-that-mtv_premium_collage_300dpi_iam

    MTV is launching a new “louder, shorter and hyper-visal” look and feel, incorporating user-generated content for the first time. The positioning has been reworded to “I am my MTV” from its former slogan “I want my MTV,” aiming to celebrate its audience and “bring new video art to audiences worldwide,” according to the brand. MTV says that the new design work was created in house, and it seems very much in the vein of the bright, brash and rather brilliant work of its senior vice president of visual storytelling and deputy editorial director (snappy!) Richard Turley.

  13. Penguin_design_awards_2015_list

    Today Penguin has announced the winning covers for its 2015 Penguin Random House Design Awards. The awards are an opportunity for art and design students to get involved with design for publishing. Entrants are given a detailed brief from the publishing house and are invited to submit designs in one of three categories. This year Scott Kooken’s Freakonomics takes the Adult Non-Fiction category, Kate Gamet wins Adult Fiction with Oranges Are Not the Only Fruit, and Lucie Williams’ Carrie’s War wins the Children’s category.