Mixed Realities — Tour of CMU
with Riya Bobde
Prompt: Create a mixed reality tour allowing visitors to explore both campus and the surrounding community that is a vital part of the CMU experience. Your goal is to tell stories, convey useful information and delight users.
Target Audience: Prospective students and their families
Questions to consider:
● What information about CMU and the surrounding neighborhoods is currently available and in what media?
● What are the affordances of augmented reality? What happens when you move beyond a flat screen into full 3D digital artifacts situated in place?
● Are there 3D physical objects, furniture, display cases/student work, etc. added to the environment to improve the interaction?
● How does our physical environment impact how we use digital devices?
●What are key stories that need to be told about CMU and the area? How should this information be delivered?
● What information is each type of user hoping to learn through the tour?
● What are the current identity guidelines for CMU and how can your design relate?
9/28/21 Building Personas
Developing Personas (Riya)
In class, we learned about creating a set demographic of people in order to understand our scope and audience.
Considerations regarding personas:
- Personas may be considered stereotypical and biased
- The qualities in a persona should range from a spectrum, especially those that have special needs or care
- No more than 2 personas should be prospective students
When developing personas, we wanted to make sure we got a wide range of students that each had specific needs and desires when coming into a University so that we could use that information to further enhance our tour experience. We made sure that one of our students was an international student and one was an International student and one was from the U.S. Other differences included their parents’ educational background, their activities and interests, GPAs, and overall goals that they wanted to achieve in college.
Rationale: we wished to create a diverse set of people, each with individual goals and interests. Thus we considered geographical location, ethnicity, financial status, and academic interests.
We also modified the personas slightly so they’d have a more high-tech profile image.
9/29/21 Researching UI in Mixed Reality + Self Reflection (Shannon)
Given that we are creating a mixed reality tour set 10 years from now, it goes without show that the expectations and success of virtual reality will greatly exceed that of our present time.
Like all UI designs, UI designs for mixed reality should have universal affordances of what each icon does.
Furthermore, the jump from 2D space to 3D space leads to expanded perceptions. As such, it’s important to consider the peripheral views, as well as the above v.s. below perspectives.
We looked into pre-existing devices, such as the Microsoft Hololens or Oculus to examine the UI interface, the play features, and overall color schemes
9/30/21: Planning + Storyboarding
First, we needed to create a main interaction idea. We wanted something that would define CMU quickly and with a solid first impression; at the same time, we had to ensure that visiting said interactive location would provide a meaningful, heightened experience.
We thought back to times when we visited campus, as well as common issues visitors have when visiting universities in general. In addition, we considered activities or benefits within CMU that we wish we knew more about, such as the various museums off-campus or the CPDC.
Location idea brainstorming:
Simulation of the bus system (off campus)
Off-campus activities, inbound v.s. outbound
UC
Maggie Mo?
Simulate times/weather
Tepper → Gates → Cut/Fence
In the end, we narrowed it down to two options: taking advantage of the transit system to showcase campus safety and off-campus locations, or creating an interactive fence to explain the clubs, organizations and students that have painted it prior.
Selection and rationale: In the end, we decided on the fence for various reasons; first, the fence is more integrated within CMU, and is a common tradition that is already mentioned in prexisting tours. Second, it has high potential for an interaction. Visitors are desensitized to fence marketing due to a lack of connection and understanding of CMU organizations. Moreover, when campus tours explain university traditions, it’s often portrayed as a sacrilegious, once-a-year event. In reality, the fence tradition is common, quickly iterative, and more student-directed than it may seem. This gives us an opportunity to make the tradition more normalized. Furthermore, this quick stop grants us the chance to also discuss CMU’s organizations and clubs. Prospective students are often unsure of what organizations or clubs to join, so this idea quickly lets them learn more about extracurriculars that they could be interested in.
(Riya)
After solidifying our concept, we created a few rough storyboards indicating the interaction, along with basic plans for the navigation UI:
Eventually, we came up with a basic storyboard and list of scenes for our video:
VIDEO RATIONALE (Shannon)
- Begin at Tepper: Given that all CMU tours start at Tepper, we continued the trend and decided to start our video there. Upon exiting the building, the visitor will wear the portable “Hololens” and we explain the main navigation features (map, arrows, time + weather, settings, etc.)
- Walk towards the fence: Between the fence and Tepper is a linear walk across the cut, so we’ll showcase the arrows more along with proximity thresholds (circle destinations of where students should stand)
- Fence interaction: Here, students will “recolor” the fence. By filtering organizations — similar to that of SLICE CMU or The Bridge — visitors can modify the fence and information will appear. On the top two corners will be two icons: on the left, a filter menu to sort through clubs and organizations; on the right, a bookmark icon to store information and save them to the cloud for later.
- Other features: We also thought about other aspects of tours. When I (Shannon) talk to my family and friends, a common trend in negative impressions from college tours is directly correlated to the weather conditions. Thus, it’d be interesting to have a feature that visually simulates a better, more positive climate. In addition, in class we learned about personas and how to consider them properly. For example, there’s a spectrum of people who are hard of hearing — each with their own level of disabilities and/or need for assistance. As a result, we thought about side features that are customizable, such as including a close captioning feature and options to change auditory responses and mute background sounds. This provides a more open-minded tour for those more interested in self-directed navigation, are neurodivergent, or have certain disabilities.
Experimenting with Augmented Reality
In class, we experimented with various AR apps. We learned of ways to create 2D or 3D assets, and import them into apps that create shadows, behaviors and animations onto horizontal surfaces
We also tested out Reality Composer for alternative AR methods:
10/5/21: Creating prototypes
Beginning Scene (Riya)
Few graphics were needed for the beginning portion. Using an existing campus map, we created a map graphic for the top left corner, and some default presets on the top right.
We created a vector arrow to show pathways, and filmed with Adobe Aero.
Main Interaction (Shannon)
Riya created a series of fence iterations, which we can quickly splice together to give the impression of “recoloring”
For every shot of the fence, we also provided labels and screen information. Essentially, as visitors interact/walk towards location, they’ll learn more about the club/organization.
We brainstormed a few clubs that would give an optimal amount of diversity, and would also showcase CMU’s best face:
Diverse ethnicity clubs
Career center: Displaying CMU alumni/career opportunities
CAPS (lol)
Tartan Scholars
Grants, funding
Research, independent studies
Carnival/buggy
We also created a hamburger menu that drops down to filters, which is ubiquitous to sorting information.
To create the club-fence interaction, we also created a set of interactive, 3D logos. Using Adobe dimensions we made a series of M&M-shaped spheres, and modified them per club logo.
After making each model, we exported them to Aero and set them as a group with individual behaviors. By setting them to spin around the anchor, we could simulate a “dashboard” that they move around. In doing so, the user can select a logo on the dashboard while the rest rotate.
(Riya)
We also created a set of information slides for each part of the fence:
FEEDBACK:
-Thresholds: as you approach the fence, the information works but where should it pop up?
- Interactions: pinch, drag, stretch. Don’t just think about clicking
- Approaching from different directions (side v.s. front)
- How much of the digital is being shown, and how much should you interact with it?
- Integrate features (filters)
- Organizations involved for fence, types of fence, etc. has a lot of information at once. Think about readability first
Regarding the third and last comment, Tay suggested that for our fence interaction, we should utilize the 3D space better. At the moment, the interaction was pretty flat, and could be replicated on a website or plain phone screen. Thus, we decided to include another scene, where visitors walk closer towards the fence. Different parts of the fence can have different sets of information, such as playable videos or holograms.
We also started to think more about color consistency. We decided on white for text and main navigations, and orange for screens and interactions. Anything else colored will be club/organization specific. Thus, we remade the club fence signs.
Ending UI screens (Shannon)
10/7/21: Re-recording, Troubleshooting and Layering (Riya)
Halfway through filming, we found that there were a few complications. After Tay’s suggestion with closeup interactions with the fence, we realized that with our pre-existing video it’d be extremely difficult to edit the interaction. The only way we’d be able to have a seamless video with the painted fence (with the abortion text) is if we either created a 3D rendering or used complex masking techniques, both of which would take extremely long periods of time.
Instead, we re-shot a couple of third person close-ups, so that the majority of the fence wouldn’t be visible. Then, we’d mask out the existing fence colors and color correct it so that it would be more similar to the fence design we planned. By doing this, we could transition to the close-ups without much error.
(Shannon)
In addition, we were trying to figure out how to make the background of the Aero logos transparent. After some thought, we decided to film the logo animation on a green screen, and keylight it out.
10/12/21: Editing (Shannon)
The most difficult part of this entire assignment was going to be layering the interactions, especially the ones with the fence.
Our main interaction with the 3D logos was essentially going to be edited with five layers:
- VERY BACK: Background video of the fences transitioning into the next fence (should be at the very back of the video
- Illustrator vectors of the circular orange dashboard and destination thresholds
- 3D logos anchored around the circular orange dashboard
- Photoshopped png’s of the flat 3D logos, so that selecting one of the Adobe Dimension icons with your finger provides feedback
- VERY FRONT: A green-screened hand, so that the hand interactions are on top of everything else.
The entire video was comprised of a few compositions: beginning, walkway, main interaction, interaction close-up, and ending functions.
For additional graphics, such as the circular proximity thresholds, signs, and arrows that we wanted to edit in After Effects instead of Aero, we used the 3D obsolete effect to give the impression of different perspectives, so that the signs wouldn’t appear so flat.
10/13/21: SOUND EFFECTS (Riya)
When incorporating sound, we thought a lot about existing platforms and successful sound effects. For example, it’s universally agreed upon that appearing and disappearing have pitched-up and pitched-down sound effects respectfully. A flick to “send” something should have a “whooop!” sound. Simple clicks should sound quick and satisfactory.
MUSIC AND NARRATION (Shannon)
Music credit: Dream by BenSound
Our (royalty-free) music choice is meant to be uplifting, but clean and innovative. Due to the nature of our beginning slide and ending sequence, we needed something high-tech, simple and not too distracting from the narration. We also created a quick script to record off of:
Final Video
Personal reflection
How were the skills you developed in the first project similar and/or different from the second project? What is your understanding of the role of an Environments designer?
I definitely learned different skills from the first project: in comparison to learning new softwares, I felt that I instead had learned new skills. Anything that was completely new, such as Adobe Dimensions, was self-directed, and instead I began to think more deeply about the experiences of people around me, and what can be done to accomodate that.
For example, one thing I didn’t consider as heavily in the first project than I do now would be the audience spectrum — specifically those that have special needs. This may be because of a design talk I recently attended, but being more open-minded about our target audience broadened the creativity and solution-building in this project.
As for my role as an Environments designer, I think I’m at this period of understanding where, ironically, I’m realizing that technology doesn’t need to be applied to everything in environments. I spoke to an Environments alumni the other day, and after talking to him immediately after this project ended, I had more time to reflect and analyze our approach. After all, the interaction of painting a fence already exists both physically and digitally. Riya and I didn’t create anything revolutionary by any means; we simply thought of a more immersive experience (if the technology was willing). During the 2020 quarantine, the class of 2024 received an email stating that due to cancelled orientation, we instead could paint the fence ourselves but using our mouse to paint over a digital fence graphic. In all honesty, that email was pretty pathetic. So after finishing this project and looking back on that for comparison, I think I’m beginning to understand how an Environments designer thinks about and improves the space around them.
