Halo AR
.svg)
Interaction Designer, Visual Designer, Prototyper
Whimsical, Figma
Halo AR is the latest addition to LightUp's growing collection of educational augmented reality applications. This app empowers educators with the ability to create AR experiences to supplement STEM learning and engage students in both classroom and remote learning environments through the combination of a trigger image and a 3D model overlay (tentatively called "Halos"). Although AR technology has been around for a while, it has only recently experienced a boom in adoption. But even then, AR adoption into education is still very limited.
Through interviews conducted by our User Research Lean, we discovered that a majority of educators were intimidated by their assumptions of the technical barriers for AR creation. For this reason, we knew that defining a streamlined, intuitive, and rewarding user experience would be our top priority. Scroll down to see how I solved for bringing simplicity and usability to AR creation.
HaloAR is now available on App Store and Google Play.
Unknown unknowns of Augmented Reality
Augmented Reality gives users an immersive, engaging experience that blends the digital world and the real world. However, delivering such a unique experience means that we as designers must consider the differences between AR experiences and traditional app experiences. How can we use traditional interaction standards to give our users a seamless and intuitive experience?
To learn more, I looked at Apple's Human Interface Guidelines (HIG) and Google's Material Design for inspiration, the two of which had unsurprisingly varied approaches to crafting AR experiences. However, both had several of the same considerations that I would have never thought as someone new to the AR space. The biggest insights I took in were techniques to unify a user's "Screen Space" and "World Space", and the necessity for a minimal design so that users would have as large of a viewport as possible.
Studying existing guidelines was a great crash course in creating delightful AR experiences, and I was ready to apply what I had absorbed. Because of the complexity of AR tech, it seemed like the best option to test our designs would be to build upon the already existing Beta version of the app to give testers a real AR experience. I touched base with LightUp's dev team to gauge the probability of early design implementation. They reported that because they were building the app using Unity, implementation of design assets would be relatively quick and easy.
Colors and Typography
LightUp has an established brand identity, and it was made clear that HaloAR needed to incorporate it into its aesthetic. I also chose a combination of sans-serif fonts for a slick and modern feel.
UI Design
Taking queues from Apple's HIG, we made our interfaces with 80% opacity to avoid blocking the underlying scene. I also took it one step further and implemented a layer blur over the translucent UI to increase the readability of the interfaces.
Crafting the Experience
I placed a high priority on having our permanent interface as minimal as possible. It was important to keep our users immersed in the experience while also giving them as much viewport real estate as possible. On the Homepage, users were immediately greeted with camera view, signaling that the device was ready for the user to immediately engage in the AR experience.
While designing the Halo creation flow, I constantly referred back to Apple and Google's guidelines. I knew that the users needed a simple and understandable guide through the creation process. I used simple text overlays and pop-ups to communicate instructions to guide users, as well as restricted actions and unobstructed callouts whenever incomplete user inputs were encountered
We presented the designs to the LightUp team, and to our relief, they were well received. There were a few notes and adjustments to be made, but it seemed like we had successfully joined LightUp's user goals and business goals in concept. The next step was to implement, but this was where we hit our first roadblock: The designs we had presented were more sophisticated than the devs had anticipated and implementation would take much longer than expected.
Plan B: Smoke and Mirrors
So we bit off a bit more than we could chew... Our designs were a bit over ambitious and the developers did not have enough time to implement them into the beta before our usability tests. We needed to pivot, but how?
I researched effective AR prototyping methods and found a few creative solutions, but several dead ends. Some designers at Apple developed an effective way of paper prototyping, but there was no way to bring it to usability testing. Previous designers had made prototyping software specifically for AR experience, but they had all been shuttered.
I reanalyzed our situation and realized that what we needed was simply the feeling of an AR experience. While scrolling through the screen designs on Figma, a particular screen with a carousel implemented caught my eye. Figma's frame content clip feature allows prototype viewers to "scroll", so maybe there was a way I could rig a 2D image to behave like a 3D model would. From my experiences in filmmaking, I knew that often times, the most simple solutions were the most effective. It was worth a shot.
Check out the prototype link below and tell me how I did!
Always Be Prepared
Reflecting on this project, I think the biggest lesson I learned was to be ready to pivot at any point. I've learned through experience that the design process is rarely straightforward, and the same applied for workflows.
Admittedly, this was one of my first experiences designing for AR. However, I think that the skills and insights I gained from designing Halo AR will prove to be invaluable. AR isn't the future, it's the present, and I'm grateful for the opportunity to contribute.
Project Gallery
projects
