Irish Reality by WatchND
Case Study
About The Project
Notre Dame was seeking a mobile augmented reality feature for their 2018 football season. The feature would allow season ticket holders to scan their football tickets on Game Day, and view an exclusive video using AR technology.
The Challenges
-
WatchND has been Notre Dame's athletic app for several years now, so how can we properly inform users of this new feature?
-
Apple's Human Interface Guidelines emphasize the mindfulness of the user's comfort when it comes to AR. So we had to consider if this experience would be comfortable for a two minute long video.
-
Fortunately, Unity allows a lot of freedom when it comes to UI. So how many control options should we allow the user to utilize?
-
And finally, our team only had less than a week to prepare this feature for development.
Task 1 | Wireframe sketches
The Final Deliverables
During the UI exploration phase, our team decided on simplifying the ticket scanning process. While testing, we discovered users didn't need a flashy 'unlocking' or capturing experience. They were strictly there to view the exclusive video content.
While keeping the users' comfort in mind, we decided to add a full-screen option to the media player controls. Although this option took away from the AR experience, we believed users were more comfortable with their standard media controls.
In the end, I believe our team decided on the best scalable design and experience. With an easy change of assets, this feature could quickly adapt to any of our other apps branding.
Main Takeaways
-
Transparent communication was vital to implementing this feature. Our developers played a huge role in advising the best practices and overall experience in this project.
-
Our team was able to work efficiently because of early defined requirements.
-
Breaking the requirements into tasks at an early stage allowed design to spend more time exploring UI/UX options and testing the build.
Early stage user journey map
The Proccess
Due to our tight deadline, our product team had to work extremely lean. We had to prioritize functionality over form. We broke this feature into two tasks:
-
How will we introduce this feature to app users?
-
What is the UI/ UX of the AR feature?
Task #1:
Our team originally ideated four solutions to introduce this new feature. We began with wireframes of in-app-messages, footmarks, and featured content blocks. Since we already built a featured article carousel in a previous version, it was a quick and easy decision to go with that option. (And luckily, our preferred IAM designs were implemented in a later version.)
Task #2:
After researching a handful of AR examples, we decided our experience needed to cover four primary requirements.
-
Allow access to the devices' native camera
-
Show coach marks or reticle to indicate scanning process
-
Display an error state if no ticket is found
-
Provide standard media player capabilities
Task 2 | Reticle UI Exploration for an InVision prototype