The Guardian’s iPhone app was launched last month and is going from strength to strength. It hit the top spot of paid apps in Apple’s App Store for its first week and has remained as the No. 1 paid news app ever since. John-Henry Barac was an art director on the print staff at The Guardian but with his strong interest in mobile media, and the iPhone in particular, he became the principal designer on the project, working alongside Jon Moore who is the Guardian’s product manager for mobile.
Andy Brockie, from The Guardian’s digital design team, was also involved with the design while the paper’s creative director, and past SND speaker, Mark Porter, took an overview of the whole project.
SND Region 15 director, Alan Formby-Jackson, caught up with John-Henry and Mark to ask about the design and development of The Guardian’s app.
1. How did you go about starting to design The Guardian for use on an iPhone app?
As newspapers become multi-channel publishers, a consistent identity and design philosophy become increasingly important. The Guardian is well-known as an organization that cares about design, and our print product has been
universally acknowledged as one of the best in the world. We try to take this attitude into everything we do in the digital world too, and design in the broadest sense is very important to us. On one level, this means maintaining the graphic identity of The Guardian through typography, color, use of images, etc. On another it means that we aspire to create the
best user experience with our content in every medium.
The challenge with the iPhone app was to take what is essentially a huge amount of RSS feeds and make the experience feel as rich and editorial as possible.
Although the screen is small it is about as wide as a column of newsprint — and it felt natural to try and maintain the feel of newspaper typography. The high resolution screen on the iPhone combined with the touch interface and the focused behavior of the user mean that typographic details are very important.
We tried to offer the reader many ways into the content, but to keep the experience ordered and usable, and avoid clutter. We wanted to include some keyword functionality. Keywords are used extensively on guardian.co.uk and are available in the feeds. The solution was to create a tag icon, which can be tapped to reveal keywords relating to that article.
The picture browser was another opportunity to add value. The Guardian has a tradition of strong use of photography and carries a lot of galleries on the Web site. The implementation grew out of how Apple handles images in the iPhone App Store. In the Guardian app if you double-tap on the galleries, a “carousel” expands which enables you to see a synopsis about the gallery and a count of available pictures before you open the gallery itself. If you change your mind you can close the carousel and return to the front page.
The design process involved a lot of wireframe drawings, which were made using Adobe Illustrator. Finished screens were drawn up in InDesign and pdfs including detailed specs were sent to the developers. We tend to use Illustrator and InDesign for sketching and mockups because they’re familiar tools here and editors find them easier to work with than Photoshop. Much of the iteration was done through notes passed back and forth using basecamp, and conversations on the phone.
2. Did you look at what other newspapers (UK and the rest of the world) had done with their apps and what do you think of the competition?
We looked at many newspaper apps in the process of researching the design. The ones which stand out are the New York Times, Le Monde, USA Today and the web-app for Die Welt. They all do many things in a similar way: scrolling lists for news headlines and when you tap a headline it takes you to the story. The differences are largely in typographic detail and performance. Any lag in loading is very noticeable when you are on the go, so this is a very significant factor and this affects the use of images and data.
Le Monde loads images very fluidly and they have also implemented push notification for news stories. The NYT does a nice line of small icons — it is actually quite an art to get the small icons right. Many apps feature icons which are too detailed, or just too cold. We tried to inject a touch of wit into them, and make them slightly cartoonish.
The NYT icons were a definite inspiration and The Guardian graphics department developed the final versions.
3. Did you find the process of designing for a small screen restrictive?
The physical size is clearly limiting, and it is important to be selective with the content, and to take navigation and interaction very seriously. But each device brings its own conventions, and expectations on the part of the user. The most important thing is to work with the limitations of the device to create the best possible expression of the content.
4. What has been the response from readers?
User comments have been very supportive, 573 people have given it a rating on the app store, with an average star rating of 4.5.
Not only have they rated it they have reviewed it: “I can’t praise this highly enough, well designed, colorful, huge amounts of intelligent content, offline capabilities, a brilliant application”.
Another new experience for us has been the real-time reviews on Twitter. Emily Bell (The Guardian’s head of digital content) tweeted about the irony of the Guardian being top of the paid for chart while Sky News (owned by Rupert Murdoch) was top of the free news app chart. There are still people retweeting that comment three weeks later!
There have been a number of requests for features which are not yet implemented such as being able to tweet stories. One of the things about apps it that you learn very directly about what works and what doesn’t.
5. How successful has it been since the launch?
The downloads speak for themselves. The app was No. 1 paid app on the App Store for the first week, and has remained No. 1 paid news app ever since launch. It also takes the No. 1 spot in Canada, Australia and three other European countries and is currently third on the U.S. paid news app chart after dropping down to 23rd place over Christmas.
NB: Up to and including Tuesday, Jan. 12 2010, the Guardian App has been downloaded 68,979 times from the App Store.
6. As apps become more popular, do you think it will have an adverse effect on The Guardian’s circulation?
Most publishers acknowledge that print circulation is in terminal decline. The challenge is to find new digital forms for our journalism, and new business models to finance them. Paid-for apps on mobile devices offer a new revenue opportunity, which might help to keep organizations like The Guardian alive, so we can only view them positively.
7. Will there be any changes or updates to the app you can tell us about?
Regular bug fixes are being released as with any other app, and more functionality will be added in the future.
8. Which other apps, newspapers or otherwise, have got it right from a design aspect?
Facebook, McSweeneys, Momento, Tweetie, Tweetdeck, Radio Times, Ocado, Time, Tuner and Groups have interesting UI and good use of typographic detail. All of them are strong on user experience.
It also pays to look closely at the apps which come with the iPhone. There are great details which can help solve some interface problems – like the way the screen locks into horizontal scrolling when you scroll down to screen grabs on an app screen in the App Store.
9. Though no official word from Apple yet, rumors of a tablet device are already making publishers produce concepts, is The Guardian working on anything for this?
We can’t design products for platforms which don’t exist yet. The possibilities of slates and tablets are very exciting, and we aim to engage fully with any new medium which might help us communicate with our audience. Of course, what we can do depends on the capabilities of the device.
See more of The Guardian’s app here: www.guardian.co.uk/iphone
John-Henry has now left The Guardian and has set up his own company called Barac Consulting. He focuses on design consultation for iPhone apps, print, mobile and the web. You can see images of the app development from his sketchbook over at his blog: http://johnhenrybarac.com.