What We Learned About Web Design from App Designers

Last Thursday, two of us on the Vox Product team braved the winter storm’s leftover slush and headed downtown to an event hosted by the NYC Digital Product Design meetup. Fortunately, we were rewarded for our efforts with lots of pizza, drinks, free gear, and great conversation.

The topics of the evening were prototyping, user testing, and iterative design. Design startup FiftyThree co-Founder Andrew Allen and Head of Prototyping Amit Pitaru went through their process of taking their note-taking app Paper from iPad to iPhone. They started with a broad overview of their design goals and then dived into the specifics of how they made that happen.

As responsive web designers, we rarely find ourselves in the position of redesigning a single product to fit a different device. Even so, while the details vary between our work and theirs, the larger design principles hold true. Here are our takeaways from that evening:

Design tasks are like onions; they have layers.

Any design task can be interpreted on a practical, emotional, and philosophical level. Practically speaking, Andrew and Amit wanted to translate Paper from one device to another. That task was driven by an emotional desire to expand their brand. And deeper still, that desire was rooted in a philosophical goal: that Paper would cease to be an individual’s tool and become a platform for collaboration.

Identify a core mechanic, and use that across the product.

The core mechanic of Paper is drawing, principles of which are applied to many of the interactions in the app. Users can swipe lines of text to turn them into checkboxed list items, and draw on and mark up photos.

Develop a working prototype as quickly as possible.

Seeing how a product works and feeling how a product works are two very different things. To that end, Andrew and Amit first prototyped Paper as a web app. They could then model and test interactions, involve more people, and iterate faster than they would have had they attempted to develop an iPhone app straightaway.

A prototype is a means to a test.

Testing prototypes is crucial to ensuring that your designs are on the right track. Design prototypes with specific questions in mind, and iterate based on the insights gleaned.

"We’re trying to build products we want to use ourselves."

Andrew and Amit admitted this is perhaps a selfish way of thinking, but much of their initial design decisions were based on whether they would want to use their own product. If you’re unsure of the next steps in your product design process, turning inward may be a good place to start.

As designers who work primarily in responsive web design, we found that certain parts of Andrew and Amit’s process would be difficult for us to implement—rearranging content to match how people hold mobile phones, for instance. Whereas Paper was designed for specific devices, the work we do is intended to live on any device and screen size. Still, it’s important to keep in mind that people do behave differently based on device and context, and this meetup certainly spurred that type of thinking.

In the Alpha team on Editorial Products, we focus on designing forward-thinking, experimental products in quick three-week cycles. Despite the short turnaround, we need to make sure we take the time to understand how and where our products will be used, and incorporate those insights into our designs.

What’s your approach to prototyping? How do you account for varying contexts and devices? Leave your advice and best tips in the comments below.