The Wider Image began life as a highly awarded iPad app. The head of innovation at Reuters wanted to reach a broader audience and include people on all platforms and devices. The most cost effective way of doing this was to create a fully responsive website.
Although the iPad app had won countless awards, I felt it had a number of usability issues. One of my main goals when designing the website was to address and improve these issues. This meant easy transitions between content and better taxonomy. I started designing “mobile first” as this obviously presented the greatest challenges in making all the content work on the smallest real-estate.
One of the main challenges was that the stories had different widgets that had to be redesigned to be usable on the web. In the app there was no need to have volume controls as they were controlled externally on the iPad. This of course needed to be addressed for the web. I tried to simplify the interactions as the app had a lot of modal windows opening so that the user could interact. I wanted to, where possible, make all the interactions happen on the page without the need to have multiple modal windows. To help myself and the client understand the redesign, I printed off all the widgets with their respective different states. I hung them side by side with my proposed responsive web designs beneath. Although I could have presented them on a computer having them side by side helped me illustrate the simplification of the widgets.
I conducted user testing adhering to Steve Krug's techniques outlined in Rocket Science Made Easy. A number of usability issues transpired. I compiled a report outlining them and the ways to fix them. Once the usability issues were addressed the website was pushed live. It was so successful the iPad app was redesigned and simplified to reflect a lot of the improved usability of the website. In the initial design phase I was restricted by the size of the images created for the iPad app. This meant I couldn’t make full use of the images and had to keep the site fairly slim. In the second phase the developers created their own CDN to deliver images at any size. This gave me great flexibility to make better use of the images particularly to accommodate the large desktop breakpoint.
