Notes on designing the Guardian iPhone app

gdn_app1

Finally the Guardian iPhone app is out there – I’m distracted by Tweetdeck and buzzing with excitement. Congratulations to Jon Moore, Andy Brockie, Akemi Takagi and all the others from The Guardian and 2Ergo who I worked with on this. And cheers to Emily Bell, Tim Brooks , Alan Rusbridger and others at GNM for giving the go-ahead for the app.

It was a huge job getting it done and I can’t pretend to know everything about the process but I was involved from the outset in devising the look of it, the user interface as well as the navigational structure. I am very proud to have played a part creating the first Guardian iPhone app, pleased with the result and ecstatic with it’s reception.

notebookI started looking at a news app around April with Marcus Austin, who was product manager for mobile and had ushered in m.guardian.co.uk. He left, and in June I started discussing specifications with Jon Moore (@moorej) who took over. I started  making wireframes and with Akemi from the web design team worked on a map of what the app might look like. I designed screens and wireframes (using Indesign and Illustrator – both v fast to work with) and It was up to the good folks at 2Ergo to interpret these images, supplemented with detailed specs. There were really useful meetings with the developers which helped me to understanding how the data flowed, where problems arose and how to resolve them – how to get maximum stories while not making the user wait ages for downloads. These discussions were also crucial to ensuring the developers got the detail right in custom UI elements like tag overlays and the photo carousel – it was a learning curve for them as well.

From early on Jon made it clear he wanted a lot of customisation, mainly in user choice of which sections appear on the front. There was also some thought about twitter, but the guardian tweets all refer to articles on the website and we didn’t want to bounce the user into a browser. We were keen to give the user a lot of news content and a great experience doing it, and getting that right was more important (in the timeframe) than adding other features which might feel incomplete. The ability for readers to comment was in the designs early on but there were some technical issues which meant they couldn’t be included. I’m sure these will both be addressed in a later version

gdn_app6

My focus was on to how to take what is essentially an RSS fed app and leverage the layers of content in that feed to give more depth at every stage. 
The Guardian uses tags or keywords extensively throughout the website, so the ability to delve deeper into topics using keywords seemed a great way to get more depth from any section front. Touching on a tag icon calls a popup which shows the topics available related to the article you’re about to read.
 It took a lot of work by the developers to get the popups working as they do – Initial versions had the popup scrolling with the list, and articles still clickable while the popup was present. The animation is beautifully smooth now, and the keyword popup is a great way to delve deeper into a subject .

A001S101c28_L1I wanted to draw on the design of the newspaper, which has a lot of type and colour elements each carrying small bits of content to make the bigger picture. There is an element in the paper known as a “gizmo” which consists of a quote or other text element plus picture or large number (see left), and coincides nicely in style with a cell on the iphone. I used some of the spacing detail of these in the app and I added the tag icon plus keywords. We wondered whether we should use the Guardian Egyptian typeface, but in the end went in favour of Georgia – which has similar qualities, but has been designed for use on screen. It is also used on guardian.co.uk.

There were discussions about how the user selection of sections on the front would work. At times this was combined with a bigger *settings* section, but eventually this was trimmed this back to a drag-and-drop section chooser, with a slider to choose the of stories per page. We tried to ensure that all “administrative” parts of the app maintain the iphone UI feel – the consistent UX helps users understand what type of activity they are doing there. 
In fact a big part of the design process was finding the right balance between vanilla iPhone UI and Guardian look and feel. For example the website uses colours to signpost different sections, so we created section headers which reflect this, and which DO use Guardian type for section names, whilst maintaining the size and controls from standard UI.

Gallery carousel animation sketch

Gallery carousel animation sketch

Another element which we devised is the gallery carousel. Jon really wanted a way to see images on the front, and I felt that vertical and horizontal browsing would feel uncomfortable. Jon pushed on this, so I thought about it and saw that in the app store on the iphone, when you scroll down, as a screengrab takes up the whole screen the app freezes vertical scrolling and only allows you to scroll horizontally. I thought this type of behaviour gave us the answer: that when one touched on a gallery thumbnail it could launch a browser which would zoom out and take over the screen. In the end we have a double tap to zoom the carousel, which gives you the ability to preview an image from read about the gallery before choosing to go and look at the photos. Once again it took a lot of iteration to get the detail right on the zoom and where you end up when you close the carousel… and I am happy with the result.

gdn_app3

Andy Brockie did a lot of work on the “trending” front and “most read” as well as many other screens, and we spent a lot of time working together on refinements. One area I particularly remember was getting the offline reading process right, which mostly involved taking out or not adding features but refining the experience. A tweet on the day the app was launched asked where the offline copy is, and I’m glad to say that my answer was that there is no special place, you just read it offline.

The design process took about 2 months, and the development took a similar amount of time. Much of the time these processes ran concurrently, with the shape of the app being modified by technical feasibility or small changes to UI.

There were many times when people asked (internally) what the USP (unique selling point) is for this app, and this lead to some suggestions of cool new ways to do things. To me the content IS the USP: it’s the Guardian, with a huge amount of great content, and other than the features mentioned above which help you get more without leaving the page you’re on, I felt nothing should get in the way of the mission to give the user really elegant ways to access the stories.

Amongst the many tweets and blog entries at launch there were some requests for features in further versions. I’m sure we will be doing our best to ensure that the Guardian app maintains its place at the top of news app sales. There have already been some discussions about new stuff and features which didn’t quite make it. Roll on the next instalment of this mobile multitouch world!

I am available for further app design and consultancy should any of you be looking…

twitter: @johnhenry
email: johnhenrybarac at me.com
linkedin: http://uk.linkedin.com/in/johnhenrybarac

Comments

9 Comments so far. Leave a comment below.
  1. marcus austin,

    Don’t I get a mention ;-(
    marcus

  2. John-Henry,

    Marcus: *bing* you’re in…

  3. The best news app around – I would have expected no less. Top work mate. I’m in UK … pint some time?

  4. Hi. Thanks for giving some insight into the design process. One question. Are you embedding the webkit in the app and making use of CSS3 (e.g. for pop ups) or is it a completely native app? I’m looking into whether hybrid apps are the way to go, rather than native. Great app. good work.

  5. Hi John,
    Truly awe-inspiring work, and app! I’m sure you have probably seen these, but I thought I’d send you a link anyway. I bought a pack and they’re brilliant; although I’ve yet to actually use them to design an app. #idiot

    http://www.uistencils.com/products/iphone-stencil-kit#

  6. John-Henry,

    Thanks howie. The app is native, not a hybrid app. Interesting thought though.

  7. sonia,

    well i dont really understand much…just caught my interest!…Sonia

  8. Kodd,

    Great point from Ian Tait – notes on designing the Guardian iPhone app.

  9. i like this post , thank you for share.

Add Your Comments

Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Your email is never published nor shared.

Ready?