Interview: The Guardian's creative director on redesigning its mobile app

We talk to creative director Alex Breuer about the highly praised redesigned Guardian mobile news app.

The Guardian app has been redesigned to deliver a more personalised and engaging experience for its readers. We sat down with creative director, Alex Breuer, about the digital design behind the online news app.

Freely available across all Android and iOS phones and tablets running Android 4 and iOS 7, the newly redesigned The Guardian app aims to showcase its journalism in more interactive ways to readers across the globe.

Alex Breuer has been creative director for the Guardian for the last year and half, having previously worked across a wide range of editorial brands including The Times, Esquire and Men's Health, as both creative director and as a consultant.

His role extends across all editorial products and brand identity from print to digital, driving The Guardian’s design vision, and giving creative direction to The Guardian’s design team. We asked Alex to reveal the creative process behind the digital redesign.

Use the slideshow controls above and right to read the interview, as well as to see more pages from the app.

Michael Burns: Why did The Guardian need a new app?

Alex Breuer: 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 100 million unique users mark in March, we have a pioneering open journalism ethos realised not just through commenting but also our award-winning GuardianWitness platform.

We launched our award-winning mobile app over four years ago, followed by our iPad edition app. They have proved extremely successful, driving high levels of loyalty and engagement among our readers. This is the next step in our 'digital first' journey.

As a brand we are constantly innovating and improving what we offer our audiences. With this launch we have created the best possible foundation for us to continue to evolve and improve the experience of readers. As more and more of our readers are accessing our content on mobile, we want to offer a best-in-class mobile and tablet app and a consistent experience across all devices.

MB: What was the concept you were aiming for?

AB: In design terms we had an overarching goal to evolve a new design and brand language that is consistent, coherent and has fidelity of presentation, interaction and experience across all our platforms, one that can adapt not just to serve the readers changing needs, but also the evolving global news organisation that The Guardian has become.

In terms of functionality, we had some key pillars. We wanted to build on the personalisation features in our existing app, and extend that functionality. For example, readers can choose what sections or types of content feature on their own home page, save stories to read later in the day, follow stories in real-time, choosing to turn on up-to-the minute alerts to keep up to date as major events unfold, as well as follow individual writers to ensure they never miss a story.

We also wanted to make it even easier for readers to contribute to our stories, by adding photos, videos and comments, bringing the Guardian’s unique open journalism values to life. We have built up a great deal of knowledge of how our readers want to engage with our journalism from our current online offerings and our innovative GuardianWitness platform. We wanted to use this insight and feedback to create what we think is a truly interactive app.

Our aim was to harness technology to help our journalists to tell their stories in the best ways possible. We developed a responsive approach to allow articles and content to adapt seamlessly, providing a consistent storytelling experience regardless of device. We also wanted to provide more and better tools for our journalists, and the new functionality of our app is a step forward on this journey.

Advertisement. Article continues below

MB: What are the key new design elements for the App? What was the thinking behind them?

AB: Underlying the whole redesign a responsive grid system 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.

In terms of typography, for the first time we have consistent use of Guardian Egyptian across all our products and platforms. We also commissioned Territory Studio to design us a custom set of icons that had the character and form of Guardian Egyptian. We felt it was a really important part of the detail of the design that even at this small but high functioning level the fidelity of the brand was delivered.

We also have a new colour language. This highlights the significance of stories and guides readers to discover new writers and subjects. As we were building this system we wanted to help readers navigate content by what they read. 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 touch points 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.

MB: What about the development side? What key functionality was part of the concept?

AB: Greater personalisation: 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.

The flexible layout allows editors to curate stories, using powerful new content tools according to their significance, meaning readers are able to get an instant picture of the news agenda and The Guardian’s editorial voice. 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 my 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.

New and improved pages for stories, galleries, live-blogs and videos will showcase Guardian journalism and give the reader a more fluid and interactive experience. New advanced caching and offline reading capabilities mean that users have more content at their fingertips no matter where they are.

MB: Were there any particular development or design challenges? How were these overcome?

AB: Mobile and tablet design is still an evolving language. 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. The 'card' design system is the first step on this road. These cards not just being links to articles but inline examples of live data (football, weather, interactives, callouts for user contribution, etc.)

One of the biggest challenges to bringing this to life was the range and variety of content types that could constitute a story. Headline lengths vary, formats vary. The whole system is built on a modular grid that takes the sizes/proportion from the core image size that is served for articles.

This allows us to define the space for each card/story element with consistent spacing, both positive and negative that hopeful presents a section or article with a degree of consistency and fidelity that makes it easier for the user to learn and navigate content and to understand the richness of both tone and hierarchy.

Advertisement. Article continues below

MB: How does the flexible formatting aid editorial staff?

AB: We don't have fixed templates that take an automated feed from our content system. The flexible and responsive format allows journalists to present their stories in the best way possible regardless of the platform, for example interactives are now available in the app for the first time.

Inbuilt tools allow embedded media from a greater range of sources, increasing the tools journalists have to tell a story. We have created new article creation tools and new image processes to deliver new, high-quality, high resolution images as well as a tool to allow editors to apply a number of different weighting factors, importance of story, boosting images size that give a greater amount of control to the weighting of the presentation of stories so the agenda and authorial tone is much clearer to readers.

MB: What new features are you planning to implement next?

AB: The card system we are using also means we can add new features/cards nimbly and without major alterations to the app structure. You can expect us to be experimenting with new and different content types like weather, sport, or data visualisations.

We are also looking at how we present longer reads and packages of stories around a major event, as well as how we bring the less time sensitive journalism such as travel writing, recipes and the arts using a more image rich presentation and discovery format.

Conscious of the fact that many readers use many devices, syncing your favourites across all readers’ devices is something that we know is important to address too. There is a lot more still to come.

From a tech point of view, we have created the best possible foundation for us to continue to evolve and improve the experience of readers. We tested our app through feedback questionnaires, user experience groups and beta testing with our readers. We are continuing to test, and listen to feedback from our readers, to ensure our app delivers the best possible experience for them.

We are already working on updates that have adapted and finessed the presentation of content based on what we are learning from people using the app.