How the Guardian is rethinking its digital design language

Design Week: What is the background to the new app launch?

Alex Breuer: I’ve been at the Guardian for about a year-and a half – prior to that I was digital design editor at The Times. 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. While the typography and key brand elements of the Berliner design are still core to what we do, it felt like there was a moment to evolve a new design language to serve our digital audience, many of whom aren’t familiar with the newspaper. The new design language had to be consistent, coherent and have fidelity of presentation and interaction across all our platforms.

DW: What are the key elements of this?

AB: Underlying all of this is a responsive grid system built around the column proportion taken from 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. My feeling was that those kind of elements aren’t particular to a platform, so having consistency at that level gives familiarity, but we can then use respective platform technologies to apply different experiences.

DW: What is unique about the app experience?

AB: It’s a more tactile experience, so the interactions demand that animations and transitions feel more graceful and elegant than web technology currently allows you to do. Live data graphics performance is much better and there is better image quality, so we focused a lot on image galleries. We did some really nice stuff in the Beta for European elections using live data. We can also look at bring things like football results to life – we’re building special functionality for the World Cup.

DW: How does the app’s personalisation element work?

AB: We wanted to make personalisation very tactile as well – because app readers are our most engaged readers it was a really important issue. Our previous phone app’s UI had conformed very much to proscribed Apple guidelines, which are out of date as I think even Apple has realised there are people out there who have solved some of these problems. Their original guidelines were very clunky – you had to click away from screens and select things and drag & drop. We felt access to this personalisation was very important wherever you were in the app – whether its about following a writer or a particular story for updates or pinning sections to your homescreen.

DW: How does the app’s colour-coding element work?

AB: If you look at the tradition in a lot of news apps, many still refer back to the print view, which has a much more linear section structure. This always feels quite inward-looking – users don’t consume content based on departments in newspaper buildings. We discovered with the desktop website that people would sometimes click on story and be surprised at the content they got – for example they might click on a story headline and get a live-blog. 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 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. This means people can much more successfully navigate the story arcs we have and discover what they want. We know digital journalism will have to change form; there might be stories that are just based on a piece of interactive graphic, or some might be gallery-based or live-blogged. One of the things about the colour language we’re building is that we’re building spaces to really evolve those forms and bring them to life.

DW: How is the system built?

AB: We don’t have fixed templates for what we do – the content comes from an elegant tool in the CMS. Layouts across articles and pages can vary across the day and that will be an editing decision. We can art-direct article pages with different images uses for example. Whereas in past you might have had four front-page options, now we have a system that gives editors control over presentation – and now we’re going to have designers on the desk helping them to create these pages.

DW: What is the structure of the design team?

AB: We have tight composite teams of programme managers, designers, UX people, developers and editors, who all sit and work together. While we have overarching timelines it’s important to allow that team to build hypotheses and work without needing to go up and down a complex management chain. The old waterfall structure, where editors would say, ‘we want this’, designers would design it and developers would build it – it takes years and invariably you don’t discover problems soon enough.

DW: How did you bring users into the development process?

AB: Even from early stages before we committed any code we built wireframes and flats – we have a great UX and testing lab here, led by Nick Haley. 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 imposed a hierarchy 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 a story? We wanted to nail whether any of these radical concepts were right. The thing that came out of that was that 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.

DW: Was there much change from Beta to the final version?

AB: 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 which we did a lot of work on. People are used to scanning lists and RSS feeds and that offers a certain degree of speed, but you sacrifice a great deal of identity and differentiation between content.

DW: Are there further developments planned?

AB: Very much so – one of fundamental ways in which this project is different is that previously there’s been a tendency to build something and let it sit there for a while. With this process we’re already planning future releases. We had a whole range of extra functionality that didn’t make it into initial release but is being developed for the next six months or so. There will be some updates that will bring to life the UI in ways that will make people understand why we’ve done some of the things we’ve done.