From print to iPad, Worthing Digital meet-up

At the end of last month, I went to the March meet-up of Worthing Digital where Harry Brignull from Clearleft described the development of an iPad app for The Week magazine. Taking a print magazine’s content and designing a tablet app in ten weeks was, I think, a tough challenge, so it was great to hear the project described in some detail.

On the web: The Week magazine

Organising the content in the iPad app

There was quite a lot described in the presentation but the key point that I took away was how the magazine’s content was organised in the tablet app. This was one of the primary issues at the start of the project and, after assessing the magazine, the first version of the app was based on the types of content in a news publication like this.

• a contents or index page
• sections containing excerpts of articles
• the articles themselves (some with maps)

On top of this, there were adverts which would also have to be included.

This resulted in the initial version of app having an index/contents screen, which would click/tap through to screens containing each section, and then the articles. Moving between sections (horizontally) used gestures and there was an advert between each section. Clicking/tapping on an article link in each section allowed the user to read the full article. Even though this seemed to be a logical way to organise the content, after user testing the app, it was realised that users were not always able to find their way back to the contents/index page, the ratio of adverts to content was too high, and too many gestures/screens were involved. This was three to four weeks into the project (gulp!).

After a rethink, the next version of the app used a different approach where the contents/index was displayed in a left hand pane on most of the app’s screens (with the exception of articles with maps, where more screen space was required). The right hand pane was either the section content (with article excerpts) or the articles. In addition, the ratio of advert to content was reduced. This gave a much better user experience because, amongst other things, the contents/index was easy to find and users found it easier to navigate between sections and articles. This was the content organisation/UI design that made it into the final app.

In summary

Overall, I really enjoyed hearing about this app’s development because it was an honest account of what went wrong and what worked. I’ve hugely simplified it in my description but it was interesting to hear how the UX lead worked with the front end developer and with the app developers and the iterative process they used.

The Worthing Digital events are held in a spacious, modern office belonging to Fresh Egg and there were about 35 to 40 people there for this event. It was easy to talk with anyone before and after the presentation so I’d highly recommend these meet-ups if you are near to Worthing. Many thanks to Mark Ford for organising the event!

Update: The same presentation was given at UX London 2012 and here is a transcript on Harry Brignull’s blog