Onboarding Design for AR Applications
My team was recently tasked with doing some research and design work focused on what an onboarding experience might look like for an enterprise Augmented Reality (AR) application delivered on the HoloLens. Our work was broken down into a few phases.
- Phase One focused on researching onboarding and what does and does not make a good experience for different types of applications.
- Phase Two we huddled together for two days where we shared our research, identified types, or as we came to call them, levels of onboarding, and we set goals and a timeline for the project.
- Phase Three we began to design and prototype against the 5 levels of onboarding we came up with while also exploring methods for rapid design and prototyping.
- Phase Four we put our ideas to work and ran a small group of about 12 through a usability test to gather data.
In the following I will primarily be focusing on what we learned about onboarding and how we set out to design our ideas. My other colleagues will take a deeper dive into the prototyping, testing, and more AR goodness.
KEY CHALLENGES
Let’s start off by identify some key challenges that we needed to consider while working on this project.
#1 Augmented Reality is new: At this point in time most people’s experience with AR revolves around Hollywood depictions and facial tracking apps that allow filters of fun things like cat ears and sparkles. While there is a growing number of apps out there using AR, it is still relatively new territory to many people. This is especially the case in the enterprise setting.
#2 HoloLens and Head Mounted Displays (HMDs): These devices are not readily available to most people outside those of us trying to design and build for them, so most people have no experience with HMD’s, how they are worn and thier unique interaction types.
#3 Rapid Design and Prototyping: There aren’t standard tools for doing rapid AR design and prototyping. There are emerging tools that show promise, but for the purposes of our work we still found ourselves trying new ideas out and hacking our way to something that worked. For the HoloLens, the Microsoft Mixed Reality Toolkit (MRTK) does have many components that can be used, which is nice for testing some interactions natively, but doesn’t really help as much when you are looking at custom designs.
WHAT IS ONBOARDING
So what is onboarding anyway and why is it important? We defined onboarding as “the process of improving a person’s success with a product or service through a managed learning experience”. In our research, which took us through many applications and across a broad spectrum of desktop, mobile, and HoloLens applications, we identified key elements and common UI/UX patterns that helped deliver successful experiences which I’ll talk more about below.
We also found that there are typically two primary stages of onboarding. The first stage gets the user to realize the core value of the product, while the second introduces new features that build on that value.
Why is onboarding important? For a lot of reasons really, it increases the chance of adoption, reduces support for new users, helps reduces churn, and the list goes on. The big thing to remember is that onboarding is meant to make your user successful with your application. If they find it difficult to use or can’t realize the value then guess what…poof they stop using it.
In this Passive and Active learning pyramid, you can see that as the engagement and interactivity goes up as does the learner’s ability to retain knowledge. This is important to understand when evaluating your product and what your users will need to know to be successful.
ELEMENTS OF ONBOARDING
So what are some of the elements we discovered?
- Persona and user journey- It’s really important to understand who will be using your application, what their motivations are and how the product will help them achieve their goals. For enterprise this can be easier as product, marketing, and sales teams often know who they are targeting and have data to back it up.
- Defined goals- I think this is one of the most important elements. Taking the time to clearly define the goals you have for the onboarding experience is critical to its success. Break down your application or process and think about what a user needs to know to get the value. A goal could be to teach a unique interaction or a process to perform. Spend time here, it’s an important one.
- The aha moment(s)- Rays of light may not shine from the heavens, but this is often a delightful moment where everything comes together for the user and the perceived value becomes real to them. This is why they are trying your product in the first place, does this solve my problem or make my job easier? Getting to this moment early might also help keep your user engaged. In fact, you may have several aha moments depending on your product.
- Added value features- Building on the aha moment and the core features, now is a great time to add value by introducing additional features that make the experience more robust and sticky. A good example of added value is being able to edit photos you took on your phone. They could have stopped with just a camera, but they take it to the next level and allow you to edit your photos in some pretty amazing ways.
- Mid-to-Long term retention- Lastly onboarding doesn’t just end when a new user has adopted your application. As the product evolves there will be new features that will hopefully bring more value to your users and this needs to be communicated through ongoing engagement. They will also need to learn how to use these shiny new things.
COMMON UI/UX ELEMENTS
We tried a lot of applications and we noticed lots of common elements and methods used to get new users acquainted with applications.
Welcome messages, progress bars, check lists, product tours both interactive and non-interactive plus many more. People tend to like a checklist and progress visualizations because they give a sense of accomplishment. Each experience is different and require different elements to make the great. The key is finding what works for you and your users. We found that looking at our goals and priorities helped us in figuring out what elements made the most sense for us.
LEVELS OF ONBOARDING
In our workshop we came up with 5 levels of onboarding that we wanted to do some design and prototyping work around. They fell into two categories, Documentation and Tutorials, below I’ll talk a bit about each and our thoughts on them.
Documentation
- Level 1 — UI Callouts: Think video game controller layout, it points out the UI and tells you what it is. It has a pretty low implementation cost and can also live in a Help or Resources section of your application. It doesn’t require any interaction and is best for simple interfaces that don’t require a lot of explaination.
- Level 2 — UI Callouts with Explanations: This takes level one a step further and adds additional context using copy, images, animation, GIF’s, or video. It teaches the interface by explaining and demonstrating its use through copy and media. It does’t give the user any feedback, but does add value with the greater context of the content.
Tutorial
- Level 3 — Walk through (passive): This is a guided tour, users follow along clicking on Calls of Action (CTA’s) or highlighted areas of the interface in an order that usually shows some kind of work flow. In a more simple form, it only highlights key features throughout the application and gives information on how and why a user would use it. It also does’t give the user any feedback, but does add value with greater context and a sense of a work flow, descriptions, and the UI progression.
- Level 4 — Walk through (active): Building on level three by adding interactivity makes this a more robust model. It has users perform tasks and interactions which help build their confidence in using the application and in our case, the HoloLens itself. It does require more time to implement and the experience is likely to take users longer to complete, but in our case having the participants perform interactions in the HoloLens increased their understanding and use of features.
- Level 5 — Project based: For our purposes this proved to be the most complex in both planning and execution. We created some mockups to communicate the concepts, but did not build out an experience choosing to focus our energy on the others. I think its best use is for applications that are robust and allow users to create or build things. We found that Unity does a good job delivering this model. Useing small projects Unity has you learn the basics and building up that work in each subsequent tutorial project. This type of onboarding also requires the most amount of resources and time for design and implementation.
DESIGN
With our research and identified levels in hand, we set out to design and test our ideas. We had some solid concepts of what Level 1 & 2 would look like, with the biggest questions about layouts and content types. So we decided to begin focus on level 3 & 4 as the tours would be similar. Level four had the inclusion of native interactions and a greater mix of performing them verses only being shown them.
We started our process by storyboarding our ideas of the high level interactions and talking through a lot of scenarios. Storyboarding is such a great way to place yourself in the users shoes and work through a process. Always be asking yourselves. Does this makes sense, is something missing, is there a better way? Lots of great insights and ideas come from this process, it’s iterative and collaborative nature makes it great for exploring options and having some fun with your team. Once we were in a good place we jumped in to designing and prototyping our experiences.
This became a bit of mixed bag as we broke down into two works streams. One, we designed out the necessary wireframes from low to pretty high fidelity, this was partially because we had existing designs to guide us and the interface was not very complex. And two, we investigated and tested out different prototyping methods to see what would work best for our needs. You can learn more about our prototyping process in this article by one of my team members, Augmented Reality Prototyping Tools for Head-Mounted Displays.
DESIGN TOOLS
Our tool chain was pretty straight forward and we tried to stay away from too much 3D design work other than for some validation and exploring.
- Whiteboards, paper and pencils- We started pretty traditional and sketched out early ideas so we could move quickly and validate our ideas.
- Sketch- We designed most of the 2D assets in Sketch, it’s pretty much our goto for UI design.
- After Effects- We mocked up some designs and interactions in After Effects which helped us validate ideas and give others a greater understanding of how something might look in app
- Cinema 4D- We primarily used C4D to test out some different ways we could bring attention to UI elements spatially.
With some solid designs and a good idea on how we wanted to build and deliver our prototypes, we started putting them into action. We decided to build our prototypes in PowerPoint, although we did build some with InVision, Sketch Box, and Unity for deployment to HoloLens. Our choice to use PowerPoint mainly hinged on the level of prototype we needed and speed to get what we needed functional.
By the end of 4 weeks we researched, designed and built several prototypes and mockups. We implemented usability tests with about a dozen internal participants who were all new to the HoloLens and the application we were investigating. Using a combination of survey data, participant feedback, and observational data we came to our conclusions and recomendations. With all this in hand we shared our learning with the product team, set some follow up meetings to discuss our different process and create knowledge sharing channels, as well as continue to support them as they work on their product.
In conclusion we learned and accomplished a lot during this process. My advice to anyone looking at designing and prototyping for the HoloLens, or AR in general is to keep things as simple as possible early on. Don’t focus too much time and energy on complex work flows until you have proven them out with smaller tests. You will find creative ways to achieve great results. Having worked and researched in the space for a while now, we are still learning new methods and finding new tools to help us design and create better….faster. It’s an ever evolving space, so always be learning and sharing. For more information on our prototyping and testing check out my teammates articles that dive further into those topics.
