David has quickly become a crucial asset to the Fyusion team. As a designer he is extremely precise, with a great eye for consistency, balance, and clean simplicity. As a communicator he is clear, rational, and preternaturally patient with his engineering colleagues; crafting our (frequently conflicting) opinions into coherent goals, and following them through to execution. His most important role, though, might be as an advocate for organization and process: he came in at a time when things were chaotic, and helped us institute something uncannily resembling order. I would highly recommend him as a collaborator.—stephen miller, co-founder / vp of engineering
I was fortunate to approach an onboarding project because of my thorough user testing experience for Trullo, an app I designed previously. There I learned the importance of metaphorically holding a new user's hand to explain an app's purpose. This doesn't mean catapult paragraphs of text at the user or show a busy overlay to label everything on the screen, but, instead, walk the user through the app's primary screens step by step. In fact, in some cases it is necessary to force the user to reach certain screens to construct context.
Before jumping into Sketch I took a thorough look at the data, spoke with current users, and created wireframe flows. They would see a few screens, try capturing a Fyuse, occasionally share it, and, hopefully, launch the app again within a day or two. I learned that users were confused: What is a Fyuse? What can I do with a Fyuse? How do I take a Fyuse? Why should I use Fyuse over other photo-related social networks?
Instead of a collection of random Fyuses, the most popular, high-quality Fyuses are presented to new users. An animating circle representing the motion the user's finger should make also appears on the screen. The user is unable to tap on anything; only swipe. The goal is to demonstrate the app's amazing potential. Below is a prototype I quickly built in Principle.
After seeing a few rows of Fyuses, the feed freezes in place. The goal is to teach that one should tap on a Fyuse to view and tilt a larger version. Below is another prototype I quickly built in Principle.
Normally when a user views a Fyuse in full screen, there are many, many actions: like, comment, share, export, report, convert, search, etc. During onboarding, however, the goal is to simplify. Therefore, the user can only tilt to reinforce that a Fyuse should always be tilted.
One complete tilt reveals a large back button to provide the user a clear way to return to the feed and continue the tour.
Now, the user has the opportunity to record her own Fyuse. In fact, distracting screens like explore, notifications, messages, settings, add friends, and the user's empty profile are completely hidden until the user attempts to record a Fyuse.
Previously, a video appeared showing a woman record and tilt a Fyuse of a Russian nesting doll. After pouring through new user data we learned that the tendency was to record a 3D selfie. I storyboarded a quick video tutorial of a woman performing the proper motion to capture the perfect Fyuse selfie.
Previously, the user was forced to grant access to the camera before watching the video. We delayed the iOS permissions request until it was time to actually use the camera.
Decreasing fiction, providing context, and requesting access at the appropriate times are all crucial parts of onboarding.
When the user's front-facing camera activates, a white oval appears where the user should place her head. The same white oval is used in the tutorial video because the goal, as discussed above, is to help the user capture the perfect selfie Fyuse. A progress bar and text are used to instruct the user to record a semi-circle around her head. If the user goes too fast or reverses direction, a warning appears.
Normally when a user records a Fyuse, there is a suite of editing tools, stickers, tags, etc. Since this is onboarding and we only want the user to understand what a Fyuse is and how to record one, all of those tools are removed to decrease complexity.
The app finally requests permission to send push notifications to the user. After activating or skipping, the user returns to the feed where the entire app is unlocked and ready to use.
After testing with a variety of potential users and releasing to a subset of new users, we discovered that by providing clear instructions and explanations, users were much more likely to understand and, most importantly, return to the app again and again.