• 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. 5173

    As the creative world digests last night’s big D&AD winners (those that scooped Black and White Pencils), there was a host of interesting work recognised in the 44 Yellow Pencils given out at the London awards bash. In total, the D&AD juries considered 847 projects this year and so less than one in five made the prestigious Yellow Pencil cut. Here’s our rundown of those winners that caught our eye for one reason or another – you can see the full list of winners over on the D&AD site here.

  2. The-plant-art-15-its-nice-that-list-

    Staying two seasons ahead (calendar-wise, at least) of the autumn art fair scrum, Art 15 takes place this week over in west London, heralded by some unmissably bright new branding by The Plant. The annual fair – now in its third outing – used to take place in February, and its new look aims to reflect its sunnier spot on the calendar. “As it’s spring and it’s a fairly new fair, we felt [the new identity] needed to look quite bold,” says Matt Utber, founder of The Plant, who also designed the fair’s initial identity. “We chose colours that were very bright and vibrant because of that light change – it reflects new life, flowers bursting into existence, it’s that kind of feel.”

  3. Thomaswilliams-bolo-itsnicethat-list

    Australian designer Thomas Williams’ work has appeared on the site several times over the years, in the shape of his editorial work for MADE, Nourished Journal and The Process Journal. He has recently decamped to Los Angeles and set up his own studio, Thomas Williams & Co., which comes complete with a newly updated site on which you can peruse his publication work alongside all manner of considered and communicative identity projects.

  4. Chwast_nose_08-1020x1600its-nice-that-list

    I don’t use the word “iconic” lightly, but in the case of designer Seymour Chwast, it fits. Co-founder of Push Pin studios, Seymour shaped what graphic design and being a graphic designer meant in the 20th Century, creating images that not only looked incredible, but distilled a message that could be anything from a light-hearted comment on design itself to an anti-smoking poster. His much-imitated graphic and illustration style still holds up brilliantly today, as proved by a fantastic new online resource, the Seymour Chwast archive.

  5. List-naonori_yago_laforet_itsnicethat_1

    I’m all for a bargain but when I hear about people queuing up at 4:30am for the big Next sale every year I can’t help but sigh. Surely sleeping is more preferable to numb lips chapping in the wind as you stand next to other haggard shoppers? Even bigger than Next’s sale is Japanese department store Laforet HARAJUKU’s annual “Grand Bazar,” which has taken sale shopping to a new level.

  6. Ah_ha_ciclovia_de_aveiro_it's_nice_that_list

    “Studio AH-HA started as an experiment. We never took ourselves too seriously, and we think that is why things have been working out,” say Carolina Cantante and Catarina Carreiras. For the last three years the Portuguese designers have been making lovely things out of their studio just a stone’s throw from the Lisbon City Museum and the university where they studied and met. Between them, Carolina and Catarina cut their teeth working with some of their heroes; Catarina at Fabrica with designer Sam Baron, who they still collaborate with, and Carolina at the renowned OMA led by “starchitect” Rem Koolhaas in Rotterdam.

  7. List-vasundhara-pachisia-its-nice-that

    Brookyln-born graphic designer Vasundhara Pachisia is still studying, but has managed to clock up a CV including work with MoMA Design Studio and Ralph Applebaum Associates. Not bad at all. She’s currently studying at Cranbrook Academy of Art in Michigan, where she’s making some great work combining vivid colour palettes with some gorgeous experimental typography. This is perfectly exemplified in the piece Until Perfect Comes , a typeface the designer says is “an ode to Victor Vasarely.” We’re sure the “grandfather of op-art” wouldn’t be disappointed.

  8. Antonio_ladrillo_lines_it's_nice_that_list

    Back with a colourful series of minimal, origami-like creations, Antonio Ladrillo’s Colors, Lines and Dots continues the same optimism and sense of play that has made the Barcelona-based illustrator is an It’s Nice That favourite. You may remember our enthusiasm for his exhibition of 40 small paintings on repurposed wood, Crash or his book Being a ghost is cool! The three new softcover books are designed with the same cuts, folds and palette but use different patterns, taking on multiple 2D and 3D combinations like folding cards. Part papercraft, part publication, like all of Antonio’s sunny portfolio, Colors, Lines and Dots is simple yet striking.

  9. Shannonlea-philliplarkin-itsnicethat-list

    In our recent interview with Spin’s Tony Brook he spoke about the shift in his design approach towards a fixation on conceptual work – “I wanted reasons, I wanted intelligent thought.” Tony of course is one of the best in the business with a great deal of experience; it’s less common to see this same concept-driven lust in young designers, particularly those still learning their craft at university.

  10. Alain-vonck_ruins_it's_nice_that_list

    Whether it’s glitchy internet art, streamlined design and art direction or bespoke typefaces, Alain Vonck has been building a strong portfolio since graduating from Paris’ ESAG Penninghen in 2012. Concentrating on visual identity as well as editorial and web design that communicates a passion for pattern, Alain confidently moves between a variety of commercial and self-directed projects. Whether a book and net archive inspired by early web designs and 90s digital culture, ilIustrations for the daily French newspaper founded by Jean-Paul Sartre and Serge July, Libération, or super minimal art direction for a digital magazine, the Parisian designer has proven his approach is both contemporary and versatile.

    The pixelated, retro-tech visual language of many of his self-initiated projects has taken cues from GIF revival and the unrefined aesthetic of the internet’s early days, carving him a niche as something of a digital archeologist. Further illustrating his creative range, one of Alain’s most recent commissions marked a departure into new stylistic territory with a bright book of over 250 block-coloured illustrations vaguely reminiscent of Matisse cut-outs for Franco-Lebanese publishing house Tamyras.

  11. Alex-horne-do-it-poster-its-nice-that-list

    As the likes of Haw-Lin and Tom Darracott have proved in recent years, club posters are no longer the all-caps, bright yellow, shouty things on lampposts they used to be. Well sometimes they are, and there’s something quite charming in that (UK GARAGE SENSATION in Surbiton, anyone?), but there’s certainly a finessed approach to many of the posters now, as Alex Horne proves. The designer, who also founded label Fine Grains Records, hails from Aberdeen but now lives in London, working with clients including The Financial Times, The Vinyl Factory and Vice. Today though we’re looking at some great music posters, namely those for AV collective Do It! and Oslo-based club night promoter The Drop, which Alex runs alongside Norwegian record label boss and musician Andre Ishak. Throughout the work there’s a leaning towards Bauhaus-esque typography and clean, graphic shapes, with crisp layouts proving once again that the marriage of graphic design and electronic music is one made in heaven. Or in this case, in Aberdeen, London and Oslo.

  12. Arthurfoliard-mood-itsnicethat-list

    Arthur Foliard has some impressive design experience on his CV – Pentagram, Landor and Moving Brands – and he’s been honoured by both ADC and the Cannes Lions. Not bad for a 25-year-old, but this London-based Frenchman has a portfolio of work that makes sense of these accolades.

  13. Mirko-borsche-itsnicethat-list-2

    Is there no end to Bureau Mirko Borsche’s brilliance? Having already produced season after season’s worth of printed collateral for long-term client the Bayerische Staatsoper, Mirko’s eponymous studio has just released its newest collection of work for the theatre. Spanning a series of events entitled Die Unmögliche Enzyklopädie, plus posters for the house orchestra Bayerisches Staatsorcheter and premiere posters too, the newest selection might even be the most diverse to date.