Client:
Case Study
Role:
UI Designer, Experience Designer, AR Developer
Project Duration:
2 Weeks
Tools:
Sketch, Unity Hub, Unity Store, XCode, Apple iPhone SE, Google Drive
Project Summary
Over the course of 2 weeks, create an AR MVP for a hyper-specific subculture group of people. Using Unity to successfully show examples of AR Lean Touch, 3D model spawning, and showcase any other features through user research.
Initial Research
Understanding Subculture
After doing research, subculture is defined as a cultural group within a larger body of people that differentiates itself from the parent group. This smaller group maintains some of its founding principles but often has its own norms and guidelines.
“Across the country, as the pandemic emptied roadways and parking lots, cities including Portland, Los Angeles, Albuquerque, Dallas, Denver, Atlanta and New York reported an uptick in street racing activities and so-called sideshows or takeovers.”
Research Analysis
Through lean research, auto shows have been on the decline for years. Now with COVID-19, almost all automotive shows to this day have been canceled or delayed, or rescheduled for future dates.
For underground car meetups, it’s become more and more difficult to find parking lots to safely host a ‘sideshow’ or ‘takeover’. According to a reporter for the Austin American-Statemen, rather than attending a meetup of parked performance cars, there is a rise in illegal racing activity and arrests across the country.
Who are we designing for?
For this project, I reached out to a friend that was an avid car enthusiast. I listened closely to their answers during the interview to gain a perspective of needs and challenges during the pandemic. Through the interview process, I heard these main points:
I no longer get to experience the cars I love in person.
I read blogs and articles about the cars I like, but they are a little boring and uneventful.
I enjoy learning about the specifications of the cars I like.
Our Persona
The Problem
Ryan feels isolated because local car meet-ups are no longer happening. He wants to learn more about his favorite cars but struggles to feel the connection of seeing cars in real life.
Where can we help?
Project Goals
Create a way for users to spawn and interact with their dream cars using 3D models anywhere they are.
Use informative animations to educate the user when navigating the application features.
Make the solution that is exciting and makes the user feel like they are experiencing something real.
How might we create a solution that gives our users the ability to interact with their favorite cars during the pandemic?
The Design Process
Feature Prioritization
With Ryan in mind, I started our design process with the MosCow method would help decipher which features were completely necessary. With the fresh and new ability to program AR, I knew these features would be fun, yet challenging.
Having Ryan’s needs front and center, some features were not as important to him and others. With some time constraints, other features would not be possible in our finished prototype.
User Flow
Later I’ll explore more of the feature flows, but for now, I wanted to focus on the initial start of the application. When the user enters the app, it is important for the user to immediately explore the AR capabilities right from the start.
Sketching the Design
To avoid a copious amount of time writing scripts, I decided to use the free Virtual Reality Toolkit available on Github. VRTK allows the quick and easy application of scripts to the scene and controllers to give the user freedom and accessibility to heighten immersion in VR.
Building the UI in Unity
Building the UI in Unity is much more different and time-consuming than in other prototyping software.
In Unity, we use UI Canvas GameObjects to construct layers of the user interface. Each Canvas layer needs specific properties in order for the user to interact with it.
Below is a Unity build example of the UI:
Testing the Design
It was time to build the prototype and put it to the test. I had a list of goals to test out for the first iteration.
Test the user flow.
Are the signifiers clear enough for the user to navigate the application’s features with ease?
Does this solve Ryan’s problem?
Key Insights
Give clear action indicators - Excited users enter the app, then start clicking away at buttons rather than jumping into the AR session.
Test, then make a list - Scenes and experiences can look a completely different way in Unity versus using your real surroundings through your phone camera. I learned that creating a list of changes and making those changes in one swift go can ultimately save more time for testing.
Signifiers
Signifiers were not clear when trying to spawn a 3D model of the 1988 BMW. Navigating the app’s features was difficult.
“I opened the app, but I’m not sure what to do now?”
Solution
Add an information icon for the 3D object spawning screen.
The “Tap to Place AR” instructions should sit higher on the screen to guide users on what to do next.
Add menu titles for buttons.
Solution
Create a ‘How to’ page prior to the main AR camera screen.
Again, add icons and language, so the user can understand what can be done when entering the app.
Confusing User Flow
This issue was mainly caused by no signifiers or language on what the user could do in the app.
Users opened the app and immediately clicked the left button, thinking that would spawn the 3D model of the BMW.
Development Issues
When entering the ‘Parts’ menu, the app freezes the camera and the build of the BMW parts cannot be seen.
Music is supposed to play when using the app to enhance the experience, for some reason the music didn’t play for 50% of the user tests.
The green overlay is a bit overwhelming during the plane detection period.
Did our solution solve the problem?
Key Learnings
AR is exciting! - With each usability test, it was clear that augmented reality is fun and immersive. Users really enjoyed playing and exploring with the 3D BMW M3.
Make usability clear - This technology is new and most users don’t know how it works. Affordances need clear signifiers in order for most users to enjoy the experiences.
Information with animation - Let the user have fun. Ryan expressed his need for learning, but screen real estate is minimal. For future iterations, using animations to unlock and hide information might be the best solution for the user.
High-Fidelity Prototype
Next Steps
More Testing - Had it not been COVID times, I would have liked to test this with a range of users. The iOS development software needs to be plugged into the computer to bypass the Apple Store.
Add More Features - Light baking is key to having a smooth running experience. Unfortunately, this scene was too big to add baked lights on my machine. Unity would crash every time.
Make it fun! - Add more fun interactive tasks or games to the scene, enticing users to return to the experience and play longer.
Photo Courtesy of Car and Driver
