Creating effective onboarding experiences with AR
Memoire is a mobile commerce app for photo/video sharing. Users can order a “Memoire”, a physical print, which can then be transformed into a video using augmented reality within the Memoire App.
My role as product designer
Because augmented reality is still such a new field and users don’t know how to use it, I used the ethos of rapid prototyping to create numerous interactive prototypes in protopie and validated this with users, on top of all the research done. I was the product design lead consultant for Memoire in which I led a team of designers to create prototypes in Protopie.
Grandmas are able to understand augmented reality
Design an onboarding experience that gets users to the Aha moment* seamlessly.
*The Aha moment—Realizing that a video overlays over a physical photo
How will we provide a simple way for users to understand the value and get them to sign up?
Research and Discovery
Leveraging usability testing to uncover blockades to getting to the ‘Aha moment’
I tested 8 users in San Francisco with the initial Memoire app. It was important for me to focus heavily on research since augmented reality is still a relatively new field and although a good amount of people played Pokemon Go, there are still lots of people who don’t know how augmented reality works. I conducted user interviews, created two personas, researched our competitors and other companies in the AR space, and used the Jobs to be Done framework as part of my research process.
I split the users into two categories, givers and receivers. The givers were tasked with ordering a memoire though the app, and the receivers were given a gift code to hold their phone up to the physical photo.
Insights from usability testing
Currently, grandmas struggle with using augment reality
Video camouflaged as a banner ad
Users tap “Get Started” before watching the video leading to utter confusion about what to do on the camera screen.
Not priming the user for camera access
After tapping getting started, users are asked for camera access, without understanding what it’s used for.
Synthesizing pain points
Making the value prop of Memoire clear for grandmas
Recalling the project’s goal to get users to the aha moment seamlessly, I set out to accomplish 3 objectives that were informed by pain points from usability testing.
Have givers and receivers understand the purpose of the app
Get receivers to hold their phone up to the photo
Simplify the icons for both user types
Creating a framework for validation Testing
Qualitatively evaluating prototypes
I used qualitative feedback to evaluated all the following prototypes if they were successful or not. If after completing the onboarding, users can succinctly explain, “What is memoire?” and if given a gift code, they could successfully find the flow to activate it, then I considered the iteration a success.
Iteration 1: Chat User Interface
From my research in comparative analysis, I found out that IKEA has an AR app called IKEA place that allows users to place augmented furniture into the comfort of their home. Given how successful and easy it was to use, I took parts of IKEA’s onboarding and adapted it for my own app.
Feedback from Testing
Increased Cognitive Load
A modern form of an instruction manual, user’s have to go through and read each point to understand how the app works.
After finishing up the chat onboarding, I have an icon overlay that describes what each icon does. Unfortunately it is still a huge performance load.
Iteration 2: Video Onboarding
With the popularity of how-to youtube tutorials, I created an iteration where users would be able to see how others use the app through GIFs. Unfortunately, our attention spans are incredibly short in today’s world and so users would skip through the videos without watching them.
Feedback from Testing
Show content as soon as possible
The users I tested skipped all the videos and jumped straight into the camera view. User’s attention spans are short in today’s world and captivating them with a video is difficult.
Expect apps to just work
Landing on the camera view page without anything to scan leads to frustration for the user.
Iteration 3: Visual Storytelling Onboarding
I created a succinct illustration based approach where users could see images and captions showing how the app would work. I made sure to optimize our copywriting for a show not tell approach and for givers and receivers so that both personas understood the different functionalities inherent in the app.
Feedback from Testing
Get to the action quickly
Having a progress bar allows users to see the visibility of the onboarding system. The idea for this approach is to create illustrations and copy that is easy to process so that even when users smash the button to get to the camera screen, they can understand the app from a high level.
Design your app for the majority
Having a colored FAB with a tooltip clearly nudges the majority of users into the preferred flow. Unfortunately, the choice of the icon confused many people. They thought that they were creating something instead of browsing memories.
The initial testing of users proved positive, so I tweaked the illustrations to consistently match one unified brand. I added swipes as the transition between screens because it’s a more fluid navigation pattern for users. On the camera screen, I added a question mark button for users to anticipate the need for help.
Feedback from Testing
Anticipate the need for help
Because there was not a clear hierarchical structuring of the icons, I took a step back from the highlighted FAB. Instead the middle icon has a question mark, so that users know clearly where to go if they are stuck.
Stick to the essentials in tutorials
I got rid of all the superfluous screens and trimmed the onboarding to 5 key screens. Users now swipe between the screens so that it is more intuitive to navigate back and forth.
The designs will be implemented Q4 2019. The designs would be considered a success if I see growth in
number of gift codes activated
number of accounts created
daily active users
Importance of iteration
By exploring many different types of onboarding and evaluating them, I converged onto a final solution that was the result of our accumulation of knowledge and experience.
Building out mental models for AR
Since the majority of users worldwide don’t have a clear model of how to interact with augmented reality systems, the knowledge gained from priming users to change their psychology and behavior was crucial.