Summary

In the Spring of 2014, I was working for FiftyThree as we were completing Paper by FiftyThree, version 2.0. The flagship feature was an image sharing service called Mix. In Version 1.0, the company had learned that the app's unconventional gestures were frustrating customers and in some cases, turning them away.

Wanderthrough was intended to be an approach to onboarding that was non-linear and non-intrusive. Ideally, it would teach new users how to use the application while staying out of the way for more advanced users.

Definition

The first step in designing Wanderthrough was identifying where the problems were occurring. During the design process, I worked with the design team to identify the key problem areas before I started to explore design alternatives. Most of this original work was done using Keynote.

Exploration

For the initial proposal, I worked through rough flows and states in Keynote to explore several divergent directions.

Choosing a Design

During the design review process, we decided to go forward with an approach where a guide would appear when a user entered specific contexts, and disappear when the user left the context or completed the specified instruction.

Previously, I had prioritized the key features that would activate Wanderthrough. Next, I had to map them together into a single flow.

Protoyping

Around the time I was working on Wanderthrough, one of my coworkers was building a prototype of the larger navigation structure for Paper 2.0. I built on top of his work to complete a few visual and behavioral studies for how Wanderthrough would behave. I worked with a visual designer to create the graphics.

With one prototype completed, it was simple to try out additional visual changes:

I ran a few informal studies of Wanderthrough to determine how users would react to it. The results reinforced the interaction design, though we made a few visual changes later on.

Final Design & Development

The final flow that shipping in Paper 2.0 covers all of the gestures for navigating to Mix, sharing an image, and then navigating back to journals. Though I most frequently work as a designer, I was loaned to the development team to act as a developer to complete Wanderthrough.

The way it worked was simple:

• When a user entered certain contexts, Wanderthrough would show a Guide in the upper left hand corner of the screen with some basic instructions.
• If the user tapped the Guide, the interface would demonstrate the gesture with finger dot overlays.
• Once the user completed the gesture that was specified in the instructions, the Guide would change to a checkmark and permanently disappear.
• If a user ignored the Guide and left the context, it would show again the next time the user entered the context.

Response

Overall, the response to Wanderthrough was relatively muted, which was viewed positively. We didn't get complaints that it was in anyone's way, and we did see relatively frequent completion of the "name tag" sharing at the end of the Wanderthrough flow.

Wanderthrough was later replaced by a Tip Center in Paper 3.0, which provides video tutorials for the common gestures and interactions. Additionally, the navigation changed significantly in Paper 3.0 in such a way that the interface was easier to use for new customers.