Challenge
Establish a presence for ABC News on the iPad with an innovative news application and HTML5 site.
Process
After some quick prototypes of a spinning sphere of news were created (and got key stakeholders very excited), the core project team knew that we wanted to pursue both an iPad application that would be experiential and an HTML5 site optimized for the iPad. One of the biggest challenges of the project was understanding how these two approaches would connect.
The HTML5 site exists on its own, outside of the application, for anyone visiting abcnews.com in Safari on the iPad. It can also be accessed through the application in a number of ways (such as going to a story, video, or slideshow).
To visualize how this could all come together into a cohesive user experience, I created sketches fleshing out the user flow and some early thoughts on the UI and worked with the core team to refine. Sketching from our brainstorm notes and early versions of the product requirements document was very helpful to highlight use cases we hadn’t considered yet and the editorial needs of some of the deeper screens.
Information Architecture
Once we had a requirements document and sketches that the core team was comfortable with, I created wireframes of the main screens to explore three things: how things would look with real content and our real asset sizes (video thumbnails, main images), how much content would be visible above the fold, and how content arrangement could vary depending on the device’s orientation.
For example, in portrait orientation, the “Videos in the News” area is locked to the bottom of the screen; more video content is accessed by swiping left.
In landscape orientation, the two main columns of content retain their size, but the “Videos in the News” area moves to the right; more video content is accessed by swiping up. The idea that content should look good in both orientations of the device was one of my main goals for the UI. We carried this through to all of the HTML5 site templates.
Design
When it came to design, the challenge was to translate the wireframes into a final designed product with its own consistent visual language. We kept the interface as simple and clear as possible, with references to existing ABC News products and program branding, while also taking the opportunity to introduce details that pushed the design forward.
A key business goal was to promote video. During the IA phase, video was given prominent screen real estate by always locking the video area to the bottom (in portrait orientation) or side of the screen (in landscape orientation). During the design phase, we took this further by giving this area a darker background to help visually differentiate it. The darker background carried through to other multimedia screens, like slideshows.
Sections and subsections followed a similar template approach as the homepage, with the addition of a section banner at the top of the page and navigation at the top of the right column.
Network coverage of live events as well as the latest video by section or program can also play fullscreen.
An interactive sphere mode is the main differentiator between the app and the standalone HTML5 site. Users can touch the screen and spin the sphere to browse the latest stories, videos, and slideshows. Ignoring the warped photos and typography as well as the arbitrary content mapping and visual metaphor, this interface does encourage a playful and casual approach to discovering content.
Promotion
On-air and digital promos of the app drove to a
microsite we designed showcasing the app’s features. Copy was provided by the marketing team.
Response
As of December 2010, the app is on more than 590K iPads and consistently ranks among the top ten of all free news apps in the app store. The app also won Ad Age’s Media Vanguard Award as Best TV Broadcast News iPad app.
“TV network ABC has released a custom ABC News iPad app that’s interesting for two reasons—its clever use of HTML5 and the amazing rotating Globe of News.” —Gizmodo
“A lot of people have just ported over iPhone applications, but this actually, is the first time I’ve seen a news site that’s actually taking advantage of the whole interface [of the iPad]..”—Nick Bilton from the NYTimes
“ABC News Puts A Different Spin On Its iPad App” —Paid Content
And my favorite critique from Twitter: “Glad to see the ABC iPad app has really taken key learnings from hip-hop music videos and brought the fish-eye lens to news UI.” —@rdesign
