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
The Fyusion team simultaneously researches new 3D imagery technology, and maintains a social network that employs that technology: Fyuse. As the Principal Designer it was my responsibility to create interfaces that allowed users to interact with the world using 3D images (Fyuses). I spent my days prototyping new designs such as improvements to the Fyuse-capturing flow, testing them with potential and existing Fyusers (Fyuse users), working with engineers to deploy changes, communicating with the data team to discover successes and failures, and iterating on the original designs. One of the more significant projects I led was a revamp of the onboarding flow.
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?
The first version forced new users to tilt the screen to see all angles of a Fyuse before reaching the signup screen. We discovered two issues leading to a small percentage of users failing to even sign up: there was no obvious way to continue, and users were confused as to why they should sign up altogether. This was remedied by both adding a continue button, and using three screens instead of one to explain Fyuse.
After signing up users were subjected to a collection of "featured" Fyuses, and there were a few snippets of text sprinkled throughout the app. Users were still closing too quickly, and they were unsuccessful with both capturing and sharing an initial Fyuse. The question "What do I do now?" was surprisingly common.
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.