Pompidou Nsangou
Product Designer

Beginner’s Guide to Designing for Augmented Reality (AR)

AR Navigation App

Image alt tag

How It Started:

The Dialexa Innovate program allows peers to come up with ideas or product concepts and work as a team to bring them to life. During the 2021 Innovate cycle, I proposed the idea of creating an AR indoor navigation app for our office.

I recruited two other coworkers making up a small team of two designers and one developer. The goal was to build an MVP within 6 weeks.

We were excited about this new territory we were venturing into and came out of it with something unique. I’ll be sharing what we learned designing for AR and how you can begin your journey into the world of mixed reality.

Step 1: Determine if AR makes sense for your business & establish an MVP
Beginner’s Guide to Designing for Augmented Reality (AR)

Although there have been successful applications in gaming, marketing, and eCommerce, a business case should still be made to validate if AR can benefit your product or customer experience. Immersion isn’t always needed. Falling into the hype of mixed reality can be costly. 

In the case of our application, we felt augmented reality would offer intuitive solutions for navigation. By showing virtual guides in physical space through the view of a smartphone, users would be able to easily navigate a new office and successfully reach their destination with minimal confusion. 

Once the business case has been determined, leverage your developers to brainstorm ideas and scope out a realistic minimum viable product. While you move forward with the design, it will give them the ground to start experimenting to see what can be implemented successfully. This is new territory for everyone, so collaboration is especially important. 

Beginner’s Guide to Designing for Augmented Reality (AR)

Identifying Limitations

Before crafting our MVP, it was important to understand the limitations of indoor navigation. Here are some questions we asked ourselves: 

  • How do we determine a user’s location in the office? 

  • How do we map out the office?

  • How does the phone know where the stairs are?

After exploring our limitations and agreeing on a plan of action, we designed simple wireframes to represent our MVP and maintain alignment. 

Step 2: Explore how users will be accessing the AR experience

Before diving into design, there are a few more things your team will need to consider. In what environment will your users be accessing your product? Because AR deals with digital graphics layered on top of physical space, that real-world environment can dramatically affect the experience. Here are some questions we asked that can serve as a starting point; 

  • Will this experience take place during the day or at night?

  • Will there be physical obstacles in the way? I.e. objects, people, cars, doors, etc. 

  • Will they need to hold their phone up to their face the entire time?

  • Will they access the experience from a QR code in a physical location? Scan a real image? Or simply click a button on your app?

  • How will accessibility be addressed?

Answering these questions early on will shape the design decisions your team makes. Accessibility for AR isn’t something that’s talked about often but absolutely needs to be considered. Any digital product that requires human interaction should be made accessible to everyone.

Step 3. Create a mood board – Explore new sources of inspiration.

Creating a mood board for AR might be intimidating because you might not easily find references for the solution you’re trying to solve. In our case, navigation has many GPS-related applications to reference. If normally you checked Dribbble or Behance for inspiration, maybe now consider video games and movies as a resource. Those designers created imaginative future states that we can work backward to recreate within the scope of our limitations. Once you have your snippets of inspiration, put together a mood board then dive into design. 

Step 4. Prototype and test your visual elements.
Beginner’s Guide to Designing for Augmented Reality (AR)

If you are proficient in designing web and mobile applications, then designing for AR won’t be much of a challenge. We took an image of a hallway in our office at eye level to serve as a background, then layered our digital assets on top of it using Figma. The image was taken during the day, representing the ideal condition our users would be in when using our app. 

  • If your app will primarily be used in the morning, or at night, consider taking pictures of all those environments to inform your decisions. 

When it came time to design our main navigation element, we opted for a design that resembled a stop sign. It was small enough not to block anything important, and with enough contrast for visibility in any lighting condition. Large arrows on the wall or ground could obstruct the user’s view and pose a hazard when navigating through the office. 

Testing UI elements can be done using Adobe Aero. It allows you to upload design assets and tag them to real-world environments to simulate a coded AR application. This allows you to quickly test contrast, sizing, and placement as you work. Unfortunately, the scope of Aero is limited to a few feet. We used it to test small icons that would appear along the hallway and completed the rest of the prototype in a video editing tool.

Step 5. Sell your idea.
Beginner’s Guide to Designing for Augmented Reality (AR)

UI Design

In AR, a clickable 2D prototype only tells half the story. It is useful for testing user interactions, but a video will be more effective at selling the idea to your internal team and stakeholders. It will provide a full picture of the interactive experience. Video also shows those real-world scenarios that you might miss in 2D design, such as how sunlight interferes with the fonts and icons you selected. If you took the time to test your elements with Adobe Aero, then you should have no problems switching to video editing.

For small-scale applications, Adobe Aero will be more than sufficient to prototype and record your interactions. In our case, we used Adobe After Effects to compose the scene and showcase what an ideal experience would look like. We modeled our MVP along with the future state of what we wanted for our application. Here was the final result:

Conclusion

Augmented Reality is one of many in the evolution of human-computer interaction. As companies like Google, Apple, Meta, and Microsoft continue to invest in AR technology, we will need designers that are willing to set the foundation for those user interactions. I am carefully watching the trends and hope to be part of the AR growth journey as more business cases present themselves. Ultimately, designing for AR shouldn’t be scary. It is a new opportunity to get creative and construct experiences that have never been done before. The real question is, are you willing to take on the challenge?