These wireframes and designs are from the original Washington Post for iPad. The app launched shortly after the iPad was first introduced. The content of this page was originally published as a series of blog posts describing my design process.
My contribution: Overall UX, design strategy and visual design
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 former Director of Digital, Mobile and New Product Design. 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.
Here are some examples of how the home screen wireframes evolved:
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.
Tackling navigation was a huge part of the detailed wireframing process. I immersed myself in the ways a user might get from one thing to another and how I could leverage iPad device capabilities.
For weeks I walked around thinking things like… Should it be a tap or a swipe? Would any double mouse-clickers try double-tapping an iPad screen? Is there such a thing as a tap-flip? Do I use traditional navigational items like buttons or is this beyond the button? Am I going crazy?
A basic, but important step for me was figuring out events that would occur when a user touched a module — where would it take them and how would they get back? Sounds simple, but without conventional web browser controls, like the back button, it was difficult to grasp how someone might use the app controls and design to get from one thing to another.
Bottom line: It’s important to remember that everything on the screen is something a user can interact with. Navigating an iPad app is full of accidental discoveries — making it extremely important to design consistent flows and transitions. A tap should do one type of thing while a swipe should do a different type of thing. Similarities must align themselves with behaviors and user actions.
Beginning the visual design
Approaching the visual design of the iPad application was pretty easy at first. The Post has a very recognizable newspaper that recently went through a redesign and a web site going through tremendous visual and technical transformation. What elements across these products can we borrow? What do the very loyal users and readers want to see?
We started by licensing Post fonts from The Font Bureau to use on the iPad — Headlines use variations of Postoni, blurbs and article content use Georgia Pro, and all section labeling and buttons use Franklin ITC Std. We carried over other visual elements from print, such as columnist head shot styles, headline font weights and line styles.
All these elements played a huge part in making the iPad app design tie into The Post brand. Borrowing visuals from print made this new device, with an interface so different than anything else, suddenly start to feel comfortable — the unfamiliar became familiar.
However, assimilating visual details from the newspaper wasn’t enough to create a device-specific design. It’s great to push the idea of a brand-centric app, but you can’t just remake the print product to fit the dimensions of an iPad and call it a day. Where’s the line between brand familiarity and creating a custom design for tablet devices?
We explored this idea by designing textures and definition that would avoid us ending up with a flat, familiar visual identity. We applied simple patterned, diagonal line textures throughout backgrounds and anchored the topics bar with similar detail to create depth. It doesn’t take much to make flat, colorless surfaces become dimensional.
Here are a few ways this visual identity evolved:
Modules and Rules
It’s easy to spot the grid within the section pages in The Post’s iPad app and notice how each story is treated in a singular way. This isn’t far off from the way the newspaper treats stories — but it’s a much different approach from what you see on the web, where stories are packaged with tons of related content.
The modules created for the iPad app borrow from both worlds. In print, a reader can focus on one story — there’s an advantage to being unplugged and able to let your brain relax and absorb the content. Truly the opposite experience exists on The Post’s web site, where admittedly, we throw way too many options into the users lap.
A modular approach to design is nothing new. In fact, we’ve seen tons of iterations of modular design on all types of web sites. When components are designed and created to be reused throughout a site, it’s flexible for editors and producers to pick and choose elements for their pages. They’re free to move things around all while maintaining a consistent user experience from page to page.
For iPad design, however, not all the same principles are in play.
The modular approach to each story on our app seemed to be the right approach, both technically and visually. Modules combine in various ways to produce unique section layouts — paying homage to reading in print, while allowing for dynamic web-like entry points. They also created a method for easy navigation — fat-fingered and small-handed people unite!
The entire grid is based on one unit modules (M1s) using the dimensions of the golden ratio. Each unit measures 256 x 159 pixels. In a single unit, we created many display instances:
As you can see from the examples above, there isn’t a lot of space in the M1s — especially for all the types of stories we were hoping to surface. In order to accommodate more information, we combined M1 units into M2s and M4s for different module variations:
All the module variations gave us the flexibility to arrange sections based on the content we were getting from our feeds. Below is a sketch of how modules are assembled for selected sections, and how they appear based on the orientation of the device:
The iPad is a huge opportunity for a designer like me. I owe it to our readers to create an experience that makes it as easy as possible to find what they’re looking for and to communicate and inform people in the most appropriate way possible. What better way to do that than in a medium where few rules and standards exist.