Onboarding at your own pace, built into Paper by FiftyThree.Visit Website
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.
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.
For the initial proposal, I worked through rough flows and states in Keynote to explore several divergent directions.
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.
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.
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:
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.