Prototyping Paper on iPhone, Part I
It took only minutes from the moment we first released Paper in 2012 for our new fans to request a version for iPhone. Paper had transformed the iPad from a device for consumption into one for creation on which real work could be done. It soon became clear to our team that we could bring the same transformation to the most personal devices of all — our phones. It made sense: our phones are always with us, always connected, and ready to capture the world around us. After all, great ideas can hit at any time, and the best tools are the ones you have with you.
About a year ago, a group of FiftyThree designers and engineers started to consider what Paper on iPhone would look like. A big part of that process was prototyping a brand new user experience based on flow, creativity, and the unique challenges of designing for the phone. In this two-part series, we’ll walk through the steps we took to prototype Paper on iPhone and bring those new ideas to life.
Paper on iPad on iPhone
When you think of designing and building an iPhone version of Paper, you probably assume the task would be straightforward — just shrink Paper on iPad to fit the iPhone’s smaller screen. Well, that’s where we started.
A member of our App Team took our existing iPad app and scaled the whole thing down. The goal of the prototype wasn’t to provide a basis for the final application. Instead, we wanted to get a feel for how the elements of Paper would scale down to a smaller screen. How would basic navigation perform at such a small size? Which gestures break down? Could you even draw in a meaningful way on a phone?
Because this prototype was done very quickly, there were visible errors, including black bars on the screen edges, and buttons that were too large and too small. But when you looked past the aesthetics, the prototype gave us the answers we needed as well as a few we didn’t expect:
- Journal view, as much as we loved it, was cramped and slow on the phone.
- 2-finger gestures like pinch and rewind that Paper on iPad relied on were much harder to activate on a small screen. It was too difficult to use Paper on iPhone with one hand — the default mode for phones.
- The 4:3 aspect ratio of Paper on iPad translated well to iPhone in landscape orientation, but portrait orientation felt more natural on iPhone.
- We believed users would want to create as quickly and easily as possible on iPhone, but Paper on iPad required multiple taps before you could start drawing.
All of this meant we would need to go back to basics to define what Paper on iPhone needed to be.
Expanding and Constraining Paper
At FiftyThree, we see the creative process like this:
On the left side of the squiggle, ideas come and go in every direction. As you move through the ideation process, the squiggle narrows as you learn more, select the best ideas, and apply constraints. Sometimes a decision might set you back, but eventually you adapt, evolve the idea, and keep moving forward. As you move toward the right side of the squiggle, the path streamlines as your ideas converge in a single direction. In creating Paper on iPhone, we followed this exact process.
After reviewing our scaled down version of Paper, we established some constraints to guide us toward a better design:
- Fast. Paper on iPad required multiple taps before you could start sketching or writing. We knew that Paper would need to make it easy to get an idea down quickly.
- Organize later. The original Paper on iPad required people to choose a journal before adding new ideas. But organization is secondary to creation, so we prioritized speed on iPhone, giving people the flexibility to organize ideas after they’re created.
- One-handed use. Many of Paper’s core gestures required two hands on iPad. On iPhone, people will need to be able to navigate Paper with just a single finger, usually the thumb.
- Assume that people are experiencing Paper for the first time ever. In the eight years since its launch, over 700 million iPhones have been sold. To prepare Paper for this potential new audience (or even just a fraction of it), we had to imagine that many users would be experiencing Paper for the first time.
- Universal app. Because FiftyThree is a small team, maintaining two completely separate apps was out of the question. Thus, the new Paper design would need to work on both iPad and iPhone.
- Responsive design. Since Paper would need to run on devices with various screen sizes, we needed to choose an approach that would work across all of them.
Brainstorming Paper
With these basic constraints in place, we brought the team together to brainstorm potential directions and features.
Together, we reviewed our ideas from brainstorming, grouped similar ideas together, and identified themes that ran through each of these groups. From here, we jumped into prototyping.
FiftyThree does a lot of prototyping, as you may have learned from previous articles we’ve written about the making of Paper’s Think Kit diagramming tools, Pencil’s Blend feature, and the color mixing feature in our app. Our goal with prototyping is always to try to make things as real as possible, as fast as possible. We never judge a new feature or service until we can see and feel it.
We knew that Paper on iPhone would be a larger undertaking than we’d ever taken on. Given the high stakes and the breadth of ideas, we spent two weeks early on putting together three prototypes that explored a range of possible concepts that excited us the most.
People Prototype
The first concept we prototyped was a people-focused approach to Paper. This concept functioned like a messaging application — creation is focused around people.
In this prototype, there’s no journal or local storage as we had with the original Paper app on iPad. Instead, the app would open directly to the canvas. You could swipe the canvas out of the way to reveal the people you had previously interacted with. The canvas would always be visible on the edge of the screen, so creation would always be, at most, one tap away.
To navigate further, you could tap on a stream to expand it into a single column. If you scrolled to the top of the list, you could pull down a bit further to close the stream.
Though we didn’t end up using a people-focused approach for Paper on iPhone, we liked its gestural approach. Paper on iPad avoided exit buttons in favor of a two-finger pinch-to-close gesture. The People prototype showed us how we could pull against the edges of a stream to navigate and avoid buttons altogether.
Pocket Prototype
The second concept we prototyped we called Pocket. We based this prototype on a layered structure for navigating your ideas: Spaces at the top, then a grid, then a linear list, then the canvas. Each layer would expose a little bit more detail than the previous layer.
Navigationally, this prototype relied on a back button fixed in the lower left hand corner of the screen. You could tap it to move back to the previous view, or you could use an edge swipe from the left edge of the screen to move back.
The Pocket prototype also included a prominent new page button at the bottom of the screen. From every view, a new page would only be one tap away.
This prototype was also one of the first instances in which we began to look at how Paper on iPhone would handle ideas of different sizes and resolutions. For instance, when you open an idea in landscape orientation, it will rotate into place to maximize the area on screen. It also shows some of the difficulties of using widescreen (16:9) ideas in the same grid as traditional iPad (4:3) ideas.
Sharing Prototype
The third concept we prototyped we called Sharing. Like the previous People concept, this concept would not feature local storage. Every idea would be shared to a stream.
Although we love the open journal view in Paper on iPad, we saw its limitations. It’s slower to find and reorder pages when you need them. People with hundreds of ideas could no longer get back to early ideas — this was a problem. Early in these prototypes, we began exploring alternative ways of displaying ideas in a masonry grid in which ideas were stacked together like bricks in a wall. Even on a smaller screen, you could browse your ideas much faster.
The Sharing prototype also introduced what we called the “idea view.” When you tapped on an idea in the grid, adjacent ideas would shift out of the way toward the edges of the screen. You could scroll down on the idea to continue scrolling in the grid, or you could tap on an adjacent idea to bring it into focus. We liked this view because it felt like it was only half a step past the previous grid view. In most iPhone apps, you would need to tap a back button to return to your previous selection, but the idea view seamlessly tied idea selection with scrolling through the grid.
When you tapped on an idea in this prototype, it would open a canvas with basic ink functionality. To exit the canvas, you would swipe down on the tray, which seemed like a subtle and gratifying way to exit from the canvas using one finger, without relying on a button.
Synthesizing the Prototypes
Over the weeks we worked on these prototypes, we continued to update and refine them, pulling ideas from one prototype into another. Around the same time, Apple released the iPhone 6 and 6 Plus. Once we tested our prototypes on the larger screens, we realized we had a problem: A back button in the top or bottom left corner would be hard to reach with one hand for most people, and an edge swipe gesture would be difficult. The looser swiping gestures we tried in the Sharing Centric and People-Focused prototypes would be much easier to use on the larger screens.
Ultimately, we combined our efforts into a single prototype that featured the best aspects of all three:
- From the People prototype, we kept the grid layout and the idea view.
- From the Pocket prototype, we kept the prominent “new page” button on the bottom edge.
- From the Sharing prototype, we kept the one-hand gesture in which you’d pull against the edge of the stream to navigate.
With a single direction set, we started to pull more members of the FiftyThree team into the project, and broke up the project into smaller and more manageable pieces. We split our prototyping efforts into two separate tracks, Navigation and Canvas.
Navigation Prototype
The Navigation prototype was updated to include pulling against the edges of the stream to navigate as well as a new idea button on the bottom edge. The animation was updated to make it feel tighter and more responsive.
Canvas Prototype
We created a Canvas prototype that tested some of the features we wanted to include in Paper on iPhone: A tray with multiple pages for tools, and a partially-hidden tray so that the user would have more room to draw on the canvas. The Canvas prototype also served as a testbed for how we wanted ink to behave across different devices. For example, the prototype let you load an image created on an iPhone 4 to see how it would look on an iPhone 6 Plus, using real ink from Paper on iPad.
Refining The Prototypes
In this article, we covered how we navigated through the early part of the squiggle — the ideas stage — for Paper on iPhone, going from many rough ideas to a single promising direction. Next, we’ll walk through how we took this direction through testing, refinement, and readiness for production to inform the Paper that you can get now, for free, in the App Store.
Makers
Eric St. Onge, James Paterson, Amit Pitaru, Andrew Allen, Amy Cao, Yoojin Ivanovic & Ian Curry
