THE U EXPERIENCE

INTERACTION DESIGN

MIXED REALITY

Tools

Figma

Adobe Illustrator

Blender

Unity

Methods

Research, Wireframing, Prototyping, 3D Modeling

Context

My Role: UX/UI Designer

10 weeks - Summer 2019

THE CHALLENGE

I worked on this project during Summer 2019 for The University of Miami Center for Computational Science. I received the prompt for a project to design an app using The Magic Leap One wearable device. This project was part of an alliance of UM with Magic Leap whose aim is to transform learning and make spatial computing an important part of the UM experience.

After the first meeting with the stakeholders, we stated the following problem statements for the project:

  • How might we get students excited about coming to UM?

  • How might we help students familiarize themselves with the University?

  • How might we transform culture and perception of UM to indicate that it is becoming a technology hub for teaching and research?

THE SOLUTION

"The U Experience" app is a mixed reality (MR) application that explores The University of Miami’s Coral Gables campus through the Magic Leap One wearable device. This app is mainly targeted towards freshmen students. The first version has been released on August 2019 and is currently showcased at The University of Miami's main library and used in tours or special events.

I assumed the role of UX/UI designer for the project, working on the early conception from gathering the requirements, stating the user journey, creating a template for wireframing for Magic Leap and, finally, designing the UI elements for the app. This project was a collaborative effort between graduate and undergraduate UM students from multiple disciplines, as well as University Faculty. I worked directly with two other graduate students who were the script writer and the developer, and we reported weekly to Faculty members. 

PROCESS
Background

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.

PROJECT ALEXANDRIA

Back on November 12, 2018, at an event at the School of Architecture’s new Thomas P. Murphy Design Studio Building, UM President Julio Frenk, Magic Leap CEO Rony Abovitz, and UM Provost and Executive Vice President for Academic Affairs Jeffrey Duerk discussed how an alliance with Magic Leap (which they called “Project Alexandria”) would transform learning and make spatial computing an important part of the UM experience.

“This partnership is about the campus taking the field of computing and running with it. We hope UM can be the global dominant player academically,” said Abovitz during the discussion with Frenk. “There is a power of place,” said Frenk. “If you look at history, most major cities were a product of chance. Alexandria in Egypt was selected on the basis of a strategic choice. It was meant to be a connector for the east and west. I think of Miami as the Alexandria of the 21st century.”

THE U EXPERIENCE

The first project to come out of the UM-Magic Leap Project Alexandria collaboration is “The U Experience”, an augmented reality tour of the Coral Gables campus. The team working on this Magic Leap experience celebrated on Friday, August 16th at the Newman Alumni Center. The project was completed in time for the President’s Celebration for New Students taking place on Saturday, and being offered to 2,800 incoming freshman.

Center for Computational Science, University of Miami. Celebrating the Creation of Magic Leap Mixed Reality Campus Tour

Idea Generation

The UM Center for Computational Science had previously scanned and obtained a 3D model of the UM Coral Gables 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.

The best inspiration for the project were science fiction movies where innovative interfaces are used to navigate through different places.Using Mixed Reality we could juggle holograms like Tony Stark!

Design Precedents

Once we had an idea of the we wanted to show in the app, I researched about existing products that include a map or some kind of navigation using emerging technologies. By the time we made the project, there were few solutions that show maps but this step was useful in the process because it helped me to imagine the experience. From this research, I took into account ideas such as using pins and names for places, and the use of hologram effects.

User Journey

We wanted to show interesting information for incoming students about UM. Therefore, we needed to plan the user journey accordingly. First of all, we wanted to include a welcoming video that makes students feel proud about coming to UM and we thought it could be a good opportunity to give instructions to the users for using the app. After this scene, information about living on campus would be available for the user. 

This step helped to define the features that we wanted to include as well as thinking on what was feasible taking into account the available resources and the time constraint. 

Wireframing

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.

UX/UI Design

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. For example, the trigger is only used to select options, and the touchpad is only used to interact with the radial menu. Also, Magic Leap suggests some standard controller interactions that I followed such as pressing the bumper 2 times to exit the application. 

  • 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 being viewed.

  • Content will always look different on-device than on-screen. Colors appear brighter and more saturated, so it is essential to check and iterate on assets while monitoring them on-device. Also, it's important to know that colors as black renders as transparent and that white is the brightest and most visible color on Magic Leap.  ​

  •  People have limited capacity for new information at one time. The novelty of this new medium can overwhelm many people’s comfort. I designed a radial menu that allows to select one scene at a time and that shows only one type of information such as dining, sports and other interesting information about UM for freshmen students. I iterate through different designs until finally get the last version included in the app.

THE FINAL DESIGN

The final version includes a short intro that was recorded by a film students with 2 actors from UM. The content was compiled by another graduate student who had the role of script writer, and the audio was made and recorded with students and faculty form The Center for Computational Science.

This is how the experience looks when you put on your Magic Leap goggles! 

See more projects

  • LinkedIn - Círculo Negro
  • Instagram
  • Email

© 2020 by Maria Aguilar