THE U EXPERIENCE
Research, Interviews, Usability Testing
Wireframing, XR Design,
My Role: Lead Designer & Researcher
Capstone Project, Interactive Media M.F.A
Timeline: 1 year
Student Affairs in universities must re-imagine program and engagement initiatives,
especially with a new generation of students arriving on campus.
Extended Reality Experiences can attract large audiences and
positively impact students’ learning and engagement.
The U Experience - Trailer 🔊 Turn your volume up!
THE U EXPERIENCE
This project seeks to familiarize students with the University of Miami using an innovative experience.
The U experience is a Magic Leap application that will compliment the freshman orientation programs
by immersing students in a mixed reality experience. It will allow them to
learn about the different aspects of The University of Miami
and help them adjust to college life.
Platform: Magic leap
Magic Leap is a startup that released a head-mounted virtual display called Magic Leap One. Unlike Virtual Reality (VR) or Augmented Reality (AR), Mixed reality (MR) does not isolate the users from the world, neither it uses a handheld screen, Magic Leap superimposes 3D computer-generated imagery over real world objects. Magic Leap is composed by a headset, a lightpack device which is the PC and a controller that allows to interact with the elements in the space.
This Capstone project was developed in partial fulfillment of my Master of Fine Arts degree in Interactive Media at The University of Miami. I closely worked with a fellow classmate, Manouj Koumar, who was the developer. Our advisors, Dr. Barbara Millet and Kim Grinfeder helped and guided us through all the process.
The chosen platform for the project was Magic Leap One. This decision was part of an alliance between Magic Leap and The University of Miami (UM), aimed at transforming learning and make Mixed reality (also called Spatial Computing) an important part of the UM experience.
The project was supported by UM Student Affairs and The Institute for Data Science and Computing (IDSC). They had previously scanned the UM Coral Gables campus using a laser system, LIDAR (Light Detection and Ranging), and provided us a 3D mesh of the campus . We thought that this would be a great opportunity to use this model and create an innovative solution to show the campus to incoming students.
University of Miami Coral Gables Campus - 3D Model View
I conducted literature review in order to come up with the concept of the product. This step was important to strategize the content of the app. Some of the questions that I asked myself were:
What are the needs of recent admitted students?
What are the motivations of Gen Z students?
What are the benefits of using Extended Reality (XR) in education?
What are other Universities doing to show their campus to new students?
Usability Testing of a first version of the app
Phase one of “The U Experience” was developed during summer 2019, I was also the designer during this phase. The first version of the app was launched on August 2019 and it was presented on the welcoming event of The UM President to the new incoming students. The app was showcased during the Fall 2019 in the main UM library, the Richter Library.
This gave us a great opportunity to try an initial idea of the app with users, learn from them, and come up with the current version. Therefore, I planned and conducted usability evaluations with freshmen students. Then, I analyzed the findings and identified best practices to inform the design of The U Experience App version 2.0.
Some views of The U Experience App v1.0.
The app starts with a welcoming video aimed at making students feel proud about coming to UM. After this scene, a circular menu appears and the user can choose to display information about living on campus. The options include:
- Discover (explore 3d objects, videos, photos)
- Dining places
- Study places on campus
- Residential Halls
- Colleges & schools
- Transportation options on campus
View of The U Experience app v1.0.
In order to gather more information about what type of content we could include in the app, I conducted interviews to know about UM current programs, resources, and initiatives for freshmen. I visited 2 offices on UM: The Office of Admissions and the Student retention Office.
The promises of mixed reality (MR) include always-available digital lightfields, persistent virtual objects, spatialized audio, embodied interactions, room-scale experiences, and immersive social presence. A large part of my role as a UX designer was charged with taking all these opportunities into account and defining the interactions with the app.
I researched about different ways for wireframing and prototyping for VR and MR and I found out that there are not standardize tools for documentation. Based on other models for different devices, I created a template for wireframing Mixed Reality for Magic Leap. This template allows to develop annotated wireframes, using tools such as Figma and Adobe Dimension for quick 3D rendering. This template not only shows the initial front views with eye level indicator, but also the distance from the viewer (top view) and controller interactions.
Throughout this process I refined the template to include all the aspects that needed to be communicated to the developer and stakeholders and explain what was going to look like the whole experience.
Below are some of the wireframes.
The final concept
By translating the concept of Magicverse, different layers of information on top of a 3D map of the University of Miami Coral Gables campus were developed. The content for the layers was carefully selected taking into consideration the previous research to address the motivations and concerns of students. Each layer has a unique design allowing the user to experiment different feelings and increase their engagement with the app. The layers complement each other creating an experience that will allow students to learn about the different aspects of The University of Miami and will help them adjust to college life.
After launching the app, the user scans the room and place the table for the first time. The main table hosts all the layers of the experience. On top of the controller, there is a hand that follows the movements of the user, this makes the interactions more natural.
The U Experience app - First Scene
FIRST LAYER: FACTS ABOUT THE U
Interesting facts from a wide range of topics - all about the U. The visualizations were carefully designed to represent each fact. Topics include: Academics, Engagement, Research, UM Identity, Athletics, Financials, Notable Alumni, The Mascot, and a short clip about the story of the Coral Gables campus.
This layer is characterized by its "techie" interface, inspired in Iron Man! Big visualizations, numbers and a color palette of blues are the essence of the facts layer.
The U Experience app - Facts layer. 🔊 Turn your volume up!
SECOND LAYER: RESOURCES AVAILABLE ON CAMPUS
A list of available resources for students are included. They are organized in 4 categories: Academics, Personal Development, Campus engagement, and Student Diversity. The resources and their description are displayed at their physical location on the campus map.
The U Experience app - Resources layer. 🔊 Turn your volume up!
THIRD LAYER: NATURE ON CAMPUS
This layers shows wildlife and trees across campus. The trees and animals on this layer were carefully selected by experts about nature who helped us to gather this information. Users can grab trees and plant them around their own environment or grab animals and let them walk/swim/fly around them. An audio backstory plays when the user picks a nature item.
The U Experience app - Nature layer. 🔊 Turn your volume up!
FOURTH LAYER: MEMORIES
When we first ideated the app, we knew we wanted to create an emotional connection of our users with The U. One way of triggering emotions is by reliving past experiences. For the representation, we took inspiration from a movie scene in Inside out.
As a BIG FAN OF DISNEY, being able to bring one of my favorite movies to the real world was thrilling for me!
In this layer, users are presented with memory spheres that can be picked up to hear the memory of a student. This way, we aim to achieve emotional connection of the users with the campus. The audio recordings were collected by a class of journalists who contacted students around campus and got their best memories at The U.
The U Experience app - Memories layer. 🔊 Turn your volume up!
Ideally, we would perform another round of Usability testing with the current version of the app. However, due to Covid-19, we weren't able to meet people physically and try the app with the headset. We sent the .mpk file to some people who have the headset at home and we received feedback, especially from our advisors.
Compared to 2D interfaces, designing for Mixed Reality (MR) requires a completely UX and UI vernacular, both to overcome the limitations and make the most of its possibilities. Some peculiarities greatly influence the design:
Limiting the controller interactions is important for novice users. In this case, I decided to assign a unique functionality for each button. In this case, we decided to use just one button, the trigger allows to select everything on the app.
Feedback is extremely important because users are usually distracted with the 3D experience and there should be a way to catch their attention and make the interaction with the app easier. Thus, a short vibration in the controller and sound is used every time the user interacts with an element.
A narrow Field of View (FOV) means that elements will get trimmed along the edges. This is specially important with Magic Leap, because it is not Virtual Reality, we can add elements anywhere around the user's environment, but the FOV only allows the user to focus on certain elements. This makes it important to constantly run the application and adjust the depth and scale of the content.
Content will always look different on-device than on-screen. Colors appear brighter and more saturated, therefore it is essential to check and iterate on assets while monitoring them on-device.
People have limited capacity for new information at one time. The novelty of this new medium can overwhelm many people’s comfort. We iterated through different designs of each layer, we performed informal user testing and got users' feedback until finally got the last version of the app.