ActiveAR
Overview
The goal of this project was to create my first UI for AR, using Apple’s Spatial Design guidelines. I wanted to challenge myself to lean into the future of UX Design, and create an AR user interface that is both practical and sleek in its design. The ActiveAR app concept made the most sense for this project as it was a great way to integrate a user interface into a real-world, outdoor space.
Tools used: Figma, Photoshop
Resources: Principles of Spatial Design, Human Interface Guidelines, Designing for visionOS
The original concept for the ActiveAR app started as sketches on the back of an instruction manual on my desk. Here, I sketched out the general idea of how an AR user interface could help provide useful information to someone who is snowboarding or skiing outside, without being a large distraction. I also wrote down a list of existing Apple apps that could serve as inspiration for the new design concept.
Ideation
Concept sketches
Ideation
Mood board
After the initial concept was created with sketches, I headed over to Figma to create a mood board using images of similar applications that could provide visual inspiration for my new app. I asked myself how I could translate 2D apps into a spatial interface, that is both familiar but new feeling with it’s visual identity.
Wireframes were created to determine the best layout for an augmented interface such as this one. The decision to position all widgets at the top of the viewport was made in the sketching phase; I believed this placement would cause the least amount of distraction for a user doing something that requires extreme focus such as snowboarding or skiing. The idea is to provide only the critical information a user would need while doing outdoor sports.
Design
Wireframes
Design
Accessibility
Before creating the final visual design for the new UI, I had to ensure that the glass panels of the interface would be accessible. Having an AR interface means that the real world can influence the accessibility and colour contrast of the UI at any given moment, so I had to ensure the styling I used for the widgets was accessible in 100% of the viewport real-estate regardless of what may be behind it.
Design
High-fidelity mockups
Browse the gallery below to view the final iteration of the AR interface using spatial design principles. Each image highlights a different use case for ActiveAR, and showcases how this UI can adapt to real-world events while staying active outdoors (best viewed on desktop).
