Product designer with a statistics background
2.2 Iphone X-memoire.png

Augmented reality that even your grandma can understand | dennis xing

Memoire

1.1 Memoire fixed.png

Overview

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.

Final Screens

Grandmas are able to understand augmented reality

 
4. final illustration prototype.jpg
 
3. The Problem.jpg
 

The Goal

Design an onboarding experience that gets users to the Aha moment* seamlessly.

*The Aha moment—Realizing that a video overlays over a physical photo

3.1 memoire.gif
 

Balancing Needs

How will we provide a simple way for users to understand the value and get them to sign up?

2.1 memoire needs.jpg
 
 
 

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

14. current onboarding.jpg

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.

  1. Have givers and receivers understand the purpose of the app

  2. Get receivers to hold their phone up to the photo

  3. 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.

 
1. taylor prototype.jpg
 
7.1 chat based interface.gif

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.

Processing Flow
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.

 
2. Final memoire screens alex moon.jpg
 
8.3 .gif

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.

 
3. illustration prototype.jpg
 
11. illustration XD.gif

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.

 
 
 

Final Designs

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.

 
4. final illustration prototype.jpg
 

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.

 
 
 

Results

Impact

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

  • email signups

 
 

Project Learnings

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.