Beginning the Design Process
Before getting started, I gave some serious thought to the following questions: How do I approach design for a device that has yet to develop standards and rules? What is the best way to showcase The Washington Post in this space? Who will download the app — are they print subscribers? Do they use washingtonpost.com? Are they local? How do we want people to use this product?
Since the iPad is such a new medium, it was tough to answer these questions with 100% confidence. The only way I knew how to proceed was to focus heavily on the brand and create the best possible framework to showcase it.
I knew the design had to be more than a variation of washingtonpost.com. A browser comes native to the device so anyone can access the site using Safari.
Launching an app removes the noise you’re accustomed to when browsing the web. No more instant messages flailing around in your dock, no more e-mail alerts popping up in the corner of your monitor. Even all the opened tabs in your browser, craning their necks to be the next interruption grabbing hold of your once-focused mind — all gone. You can launch an app and immerse yourself in something to read. The only interruptions you have to worry about at this point are people knocking on your door.
I needed to use this fascinating and often hard-to-achieve quiet time to our advantage in the design. All the benefits of Internet connectivity paired with a feeling of unplugged, uninterrupted reading, watching and experiencing.
What I think we’ve ended up with is an app that combines the authority and originality of The Washington Post with conversation around the biggest news stories of the day — interruption free.
Wireframes & Architecture
The UI and visual design of the project was a team effort from the beginning. I worked closely with Justin Ferrell, the Director of Digital, Mobile and New Product Design at The Post. Coming from the print side, Justin has extensive experience integrating narrative and visual storytelling into his designs. Paired with my online experience in editorial design, graphics and UI, we had the right balance of design know-how to create an app for a device that borrows fundamentals from both worlds.
We started the process by sketching out user flows — everything including navigation, content sections, articles, topics, multimedia, overlay/pop-overs, authentication screens and social media integration were flushed out — once we had a rough idea of how the app would work and how users would get from one place to another, we began wireframing the home screen.
The grid changed about 15 times before we finally settled on the right dimensions. While Justin worked and reworked the measurements of the modules, I applied headlines, blurbs and various photo sizes to fit within these spaces. The whole process involved creating wireframes in various layouts, then testing PNGs on the iPad to see how everything would render on the display’s 132 ppi screen.
As I applied these elements at sizes large enough for clear, readable content modules, the grid became much bigger and more simple. Finally, we settled on a ratio allowing for enough headline space, blurb content and photography to display for each story. Plus, the ratio works equally as well in landscape and portrait orientations — the smartest ratio of all… The golden ratio.
» Download The Washington Post for iPad (iTunes Link)