| Prototype
- User Journey Scenarios
Goal :
Immersive/XR Service Design, Smart City Campus
Role :
Duration :
3 Months
Tools :
XD, Maya, Redshift, PS, AE
Participate and enrich your campus community's landscape of possibility via Mandorla's XR networking and visualization interface now! Connect in real life with services, information and like minds to grow, learn, inspire and be inspired on mixed reality terrains of the future!
Mandorla is an immersive networking and information visualization smart city campus portal prototype for universities. This multi-platform app facilitates campus, peer and academic information artifact discoverability opportunities across the interaction-attention continuum.
| The Problem
How can university communities utilize new media technologies to develop holistic architectures which augment potentialities of edifying academic and social, emotional and interpersonal connectivity as well as service based information artifact discovery in an efficiently engaging and participatory format?
"of students said their mental health had negatively impacted their academic performance...and that two-thirds of college students are struggling with loneliness and feeling isolated—an all-time high prevalence according to a 2020 survey of over 33,000 college students across the country."
Commuters might have a difficult time getting involved with the community resulting in missed opportunities for networking.
Introverted or extroverted members of the student body may need an ice breaker in their pursuit with making connections necessary for professional and overall character growth and wellbeing.
of students in fall 2020 screened positive for depression of anxiety
Professors or departments may be seeking means to further engage students in the reinforcement of concepts as well as sharing opportunities in the omnipresent mixed reality classroom of the future.
At a cursory glance, such institutions would appear to be accomplishing these networking and information sharing ends through traditional relatively one-sided interaction based routes. These include event calendar websites, social media posts, email newsletters or even print based flyers affixed to varying edifices throughout the campus. Other means of discovery encompass situational word of mouth or in class announcements.
Yet, the common denominator prevalent in all of these forms of informational media offerings is the lack of a networked mechanism through which the individual can quickly peruse, customize or even participate and post media relevant to them.
Having this in place could help people to feel as if they are part of and fully immersed the campus experience through enhanced creative agency to create opportunities for academic exchange both in and outside of formalized settings like group meetings, classes or events and more.
This fragmented approach can be contributive towards missed opportunities for growth and networking or may cause feelings of isolation.
Besides having raw information present, there also should be cultivated a user experience of such a platform to assuage some of the university student and faculty pain-points as well achieve goals in an inviting, fun and accessible format.
Yet, the common denominator prevalent in all of these forms of informational media offerings is the lack of a networked mechanism through which the individual can quickly peruse, customize or even participate and post media relevant to them.
Having this in place could help people to feel as if they are part of and fully immersed the campus experience through enhanced creative agency to create opportunities for academic exchange both in and outside of formalized settings like group meetings, classes or events and more.
This fragmented approach can be contributive towards missed opportunities for growth and networking or may cause feelings of isolation.
Besides having raw information present, there also should be cultivated a user experience of such a platform to assuage some of the university student and faculty pain-points as well achieve goals in an inviting, fun and accessible format.
| Opportunity
Elements of gaming along with social media networks can be utilized to craft and incentivize the UX of restorative/instorative real-world campus networking instances along with the conceptualization of enjoyably relevant information visualization scenarios.
It is often the case where individuals exist free from societally imposed inhibitions in their online virtual identities either in gaming or social media . This gives them license to think freely, engage in a sense of creative meander along with critical thinking, share experiences and information as well as connect to others.
Given the success in user adoption and retention of such platforms, it would be a worthwhile endeavor to investigate how some of these interaction design methodologies would translate into the development of a real-time campus networking and information visualization portal app such as Mandorla. Could it possibly be the case that some of these principles applied strategically ultimately serve to augment campus community involvement via the alleviation of some of the aforementioned user pain-points?
For example, it was reported in the survey mentioned above that some students were having difficulties connecting with peers and felt isolated. Even before the 2020 worldwide situation this has been an encroaching issue due to the prevalence of social media screen time eclipsing real world interactions. Imagine such individuals being able to open up Mandorla with the ability to respond to or create transitory XR immersive posts on a fun game map simulation of their campus setting. These temporally sensitive posts constitute either thoroughly planned or impromptu calls to action for real-life meetings. The meetups can occur on the basis of a multiplicity of topics inclusive of seeking study, lunch partners, participants for studies or surveys, RSVPs for lecture series and much more.
Having this digital intervention to condition their campus experience could serve to break the ice by streamlining meetings on the basis of shared interests. The individual would then be able to more comfortably formulate new connections that would have been difficult to forge by traditional means such as simply walking down or visiting communal pathways or spaces approaching random strangers.
Personalize activity broadcasts towards user customization or interest preferences to automate habitual or persistent actions.
Temporally based XR posts that will vanish just like snapchats meant to segue into real-life meetings.
UI location tracking for services, media and contacts/connections.
Personalize activity broadcasts towards user customization or interest preferences to automate habitual or persistent actions.
Communicate via engaging graphical map(2D), audio, legacy list or even hologram posts in situ of any given setting.
Play
Fun
Creativity
Free thinking
Imaginative visualization possibilities
Fun
Creativity
Free thinking
Imaginative visualization possibilities
Mandorla endeavors to give birth to a new type of immersive media experience in the co-mingling of core user needs and motivations from these domains as applied towards solving real world issues in the maintenance, cultivation and flourishing social/emotion and academic growth of university campus communities.
Personal Expression
Shared Connections
Belonging
Information sharing
Brand Cultivation
Meet new people
News and current events
Shared Connections
Belonging
Information sharing
Brand Cultivation
Meet new people
News and current events
| Business/Institutional Value Touchpoints
Be at the forefront of design futures extensible immersive campus experiences to enhance insights of learning, discovery as well as institutional growth.
Social and emotional learnings can increase cognitive processing and academic achievement scores by up to 11% according to a 2015 McKinsey analysis study on classrooms and education of the future. Even beyond these quantitative measurables, study participants also noted that the skills garnered from social/emotional learnings also increased their motivation and tenacity when working on projects while decreasing the stressors of anxiety and depression in everyday settings.
Diversity extends beyond having a multicultural student body towards the cultivation of varied learning and networking systems that facilitate academic along with social emotion learning interactions. This would widen the range of information accessibility options for the preferential learning styles in accordance with the theory of multiple intelligences.
For example, Mandorla offers a multiplicity of means of enabling the user to interface with the system such as audio, holograms, text, or other visuals that can be customized to their preferences. These information artifacts generated will ultimately lead into in person meetings which further foster tacit learnings such as the ability to empathize, view experiences from multiple perspectives as well as personal identity exploration.
The architecture of this system allows for complex information ecosystems to be filtered through activity broadcast layers which allow for greater efficiency of knowledge assimilations thereby increasing the diversity of opportunities for the user to engage with.
Universities can leverage the anonymized user input data from Mandorla to populate a backend analytics dashboard accessible to staff and thought leaders.
This could greatly assist in gaining ongoing valuable insights about the student/faculty user body to inform decisions about university growth and development, the allocation of spending/resources, populace needs/inclinations as well as recruitment and retention strategies.
| Introducing Mandorla
- Interaction Type, UI Skeleton, Onboarding Essentials
| Introducing Mandorla
- Interaction Type, UI Skeleton, Onboarding Essentials
Mandorla is an immersive XR platform for university campus ecosystems that fosters inclusivity, collaboration and diversity of academic, social and emotional learnings along with enabling efficient services discovery via participatory real-time interactive information visualizations.
Mandorla in it's essence is a responsive, extensible fluid living platform that is applicable within the currently dominant paradigm of smartphones and tablets along with future oriented mixed reality eyewear in addition to a range of upcoming XR aligned peripherals.
Namely, this prototype will showcase the holistic architecture of this service design through user experience scenarios from each of these concrete as well as speculative hardware angles. It will also demonstrate interface modality responsiveness/usage based upon the individual's environmental/attentional cognitive affordances.
Lastly, I will demonstrate how anonymized data from the applications user activity can be utilized to populate a university analytics dashboard that administrators and development staff can use to make important decisions for campus offerings as well as progressive iterations of the app.
Interaction - Attention Continuum
(Source)The environments in which we interface with our computing devices have long since left the stationary confines of a solely desktop pc venue towards one encompassing a greater range of ambulatory experiences. Most apps present on commonly used consumer devices have not developed robust UX schemes to account for these variances on the attentional spectrum to adjust interaction parameters accordingly.
In today's paradigm, we interact with our smart phones/tablets with a predominately centralized focus in much the same way we have in the past with desktop computing. This has lead to a host of unintended societal as well as social consequences especially in regards to the development of youth. It is at this touchpoint that I aimed to incorporate some of these attention continuum design methodologies into the architecture of Mandorla. As a rule of thumb, technology should be designed to assist or either dovetail the human experience, not to eclipse it. The interaction affordances should shift in accordance to setting whether one is walking, in a social setting, stationary or a panoply of variations.
This continuum consists of focused(centralized), peripheral as well as implicit interactions. The goal with Mandorla is to allow users to seamlessly make these UX shifts in accordance to their context or preference.
In accordance with this vein of thought, I have structed Mandorla as following:
| Hardware
The individual can elect to utilize simply one or a number of these devices in combination while transiting through different aspects of Mandorla's user experience.
After the splash logo display, the user is prompted to select from a list of participating universities with the ability to login with their school ID and password. The main screen either goes into the onboarding motion graphics if it is the first time logging in or is directed to the campus view populated by an interactive 3D isometric view of the campus map.
| Login
| Onboarding
The onboarding is split into three brief sections that acculturate the user into the why, what and how overview of the interface.
1. Emotional Appeal
Part one of the onboarding is constitutive of an emotional appeal to the user detailing why they might want to habitually engage with the app and the feeling based rewards to be reaped.
1. Emotional Appeal
Part one of the onboarding is constitutive of an emotional appeal to the user detailing why they might want to habitually engage with the app and the feeling based rewards to be reaped.
2. Use Case
Part two goes into explaining what the user can actually do in the app. This would be inclusive of XR posting content, sharing, feedback and much more.
2. Use Case
Part two goes into explaining what the user can actually do in the app. This would be inclusive of XR posting content, sharing, feedback and much more.
3. Overview
Part 3 wraps up the onboarding process by briefly showcasing the nuts and bolts of how the user could actually go about utilizing the app.
These motion infographics constitute a lean overview and are not purposed to be step by step instructions but to simply prime the appetite to foreshadow the UX of possibilities that will come.
These motion infographics constitute a lean overview and are not purposed to be step by step instructions but to simply prime the appetite to foreshadow the UX of possibilities that will come.
3. Overview
Part 3 wraps up the onboarding process by briefly showcasing the nuts and bolts of how the user could actually go about utilizing the app.
These motion infographics constitute a lean overview and are not purposed to be step by step instructions but to simply prime the appetite to foreshadow the UX of possibilities that will come.
These motion infographics constitute a lean overview and are not purposed to be step by step instructions but to simply prime the appetite to foreshadow the UX of possibilities that will come.
| Interface Skeleton
This section will showcase the core structure of Mandorla's user interface as applicable through the flat screen 2D display as well as holographic based 3D UI with controller free hands gestural input agency when see-through AR/MR glasses are adorned. Throughout the transition between these two view modalities, efforts have been made to maintain consistency of in terms of the placement and functionality of interface widgets and buttons.
Once the user logs in, they will see a procedurally generated map of their university's campus terrain in isometric view. This type of map along with animated visuals were utilized primarily to cut down on information complexity and cognitive load when browsing through vast sets of information. For this prototype, I 3D modeled all of the elements of what a potential campus could look like but also wanted to incorporate a anthropomorphized whimsical twist to some of the structures.
Once the user logs in, they will see a procedurally generated map of their university's campus terrain in isometric view. This type of map along with animated visuals were utilized primarily to cut down on information complexity and cognitive load when browsing through vast sets of information. For this prototype, I 3D modeled all of the elements of what a potential campus could look like but also wanted to incorporate a anthropomorphized whimsical twist to some of the structures.
The rationale is that I aimed to set the stage for a fun virtual environment that users feel like they want to engage with. Secondarily, I also wanted to open dialog between disciplines of design about how we shape and mold our future environments both physically and virtually and the impact upon our culture and cognition. For example, would having buildings which evoke the imagination such as those with eyes on them resembling our own cause us to have more empathy towards our living environments thusly cut down on environmental pollution or even spark new ideas of development for some. The possibilities are endless.
The remainder of elements of the user interface cater towards accessibility and enabling the user to interact with these terrains with from a multiplicity of hardware, filtering and modality view options. Although the primary functionality is default to map view, audio, augmented reality and the traditional textual based list view are also accessible.
The remainder of elements of the user interface cater towards accessibility and enabling the user to interact with these terrains with from a multiplicity of hardware, filtering and modality view options. Although the primary functionality is default to map view, audio, augmented reality and the traditional textual based list view are also accessible.
The rationale is that I aimed to set the stage for a fun virtual environment that users feel like they want to engage with. Secondarily, I also wanted to open dialog between disciplines of design about how we shape and mold our future environments both physically and virtually and the impact upon our culture and cognition.
For example, would having buildings which evoke the imagination such as those with eyes on them resembling our own cause us to have more empathy towards our living environments thusly cut down on environmental pollution or even spark new ideas of development for some. The possibilities are endless.
The rationale is that I aimed to set the stage for a fun virtual environment that users feel like they want to engage with. Secondarily, I also wanted to open dialog between disciplines of design about how we shape and mold our future environments both physically and virtually and the impact upon our culture and cognition. For example, would having buildings which evoke the imagination such as those with eyes on them resembling our own cause us to have more empathy towards our living environments thusly cut down on environmental pollution or even spark new ideas of development for some. The possibilities are endless.
The remainder of elements of the user interface cater towards accessibility and enabling the user to interact with these terrains with from a multiplicity of hardware, filtering and modality view options. Although the primary functionality is default to map view, audio, augmented reality and the traditional textual based list view are also accessible to the individual.
The rationale is that I aimed to set the stage for a fun virtual environment that users feel like they want to engage with. Secondarily, I also wanted to open dialog between disciplines of design about how we shape and mold our future environments both physically and virtually and the impact upon our culture and cognition. For example, would having buildings which evoke the imagination such as those with eyes on them resembling our own cause us to have more empathy towards our living environments thusly cut down on environmental pollution or even spark new ideas of development for some. The possibilities are endless.
The remainder of elements of the user interface cater towards accessibility and enabling the user to interact with these terrains with from a multiplicity of hardware, filtering and modality view options. Although the primary functionality is default to map view, audio, augmented reality and the traditional textual based list view are also accessible to the individual.
2D UI
2D UI Demo
Shown above are all the core interactions of this smartphone/tablet based interface. This is an instance where the interaction is of a focused or centralized type on the attentional spectrum.
The 2D portal serves as the main initiatory hub for the user to sync to other devices in order to experience both implicit as well as peripheral experiences such as audio, automated alerts and holograms embedded into everyday surroundings with XR glasses and much more. All of these interactions are quite standard such as search, filtering, messaging, account settings with the differentiating factor being the bottom menu that enables the user to switch between media modality viewing perspectives.
The 2D portal serves as the main initiatory hub for the user to sync to other devices in order to experience both implicit as well as peripheral experiences such as audio, automated alerts and holograms embedded into everyday surroundings with XR glasses and much more. All of these interactions are quite standard such as search, filtering, messaging, account settings with the differentiating factor being the bottom menu that enables the user to switch between media modality viewing perspectives.
3D UI
This section contains a 3D simulation of how the users can utilize hand gestures to control Mandorla's interface when wearing AR/VR see through HMDs while walking around or situated stationary on campus. Their hands will of course not appear blue(in AR, not in VR)but will be their own and the background will be the inhabiting environment but for demonstration's sake, I have illustrated a simple grid here to visualize the interaction possibilities with the 3D UI.
Each hand contains an element array of the 2D UI as depicted previously. When the user rotates their hand palm facing, it will trigger the specified menu for that hand.
Each hand contains an element array of the 2D UI as depicted previously. When the user rotates their hand palm facing, it will trigger the specified menu for that hand.
3D UI
Left-hand UI Demo
From this menu, the user is able to select between map, list, AR Camera/glasses, and audio mode.
Right-hand UI Demo
Although the above animation shows this menu being invoked from the left palm, in practice, it is designated for the right palm but the UI interactions are identical.
Bi-manual WIM Scene Scaling
Two hands can be used simultaneously to scale or reposition the world-in-miniature campus map hologram in front of the user when in HMD(head-mounted display) mode.
| Prototype
- User Journey Scenarios, 2D/3D, Mixed Reality
Browse + Search + Interact
pt. 1
Viewing/Hearing Campus News + Operations
- Audio + Screen UI
Hear the music of your surroundings with relevant locale specific audio informational broadcast posts
The audio section of the interface enables the user to access location based sonic posts by directly selecting them on the map or via walk mode. In walk mode, an individual has the agency to walk around campus with an audio listening device connected and certain posts automatically play in accordance with their location, chosen activity broadcast layer(s), filters or set routine.
This audio portion of the interface demonstrates all three interaction attention continuum potentialities.
Firstly, the user can access it from a focused or centralized perspective if they simply wish to tap on such posts on their smart phone or tablet. Secondly, they can still access audio functionality without looking at their phone by setting up an implicit or automatic routine to filter out posts based upon personalized subject interest. The creation of this routine or of a situational filter enables access to the app's peripheral functionality by enabling them to simply walk around going about their normal routines while still being connected to the app reaping the benefits of informational awareness but not via a cognitive load dominating centralized focus .
This audio portion of the interface demonstrates all three interaction attention continuum potentialities.
Firstly, the user can access it from a focused or centralized perspective if they simply wish to tap on such posts on their smart phone or tablet. Secondly, they can still access audio functionality without looking at their phone by setting up an implicit or automatic routine to filter out posts based upon personalized subject interest. The creation of this routine or of a situational filter enables access to the app's peripheral functionality by enabling them to simply walk around going about their normal routines while still being connected to the app reaping the benefits of informational awareness but not via a cognitive load dominating centralized focus .
Procuring Transportation
- Mixed Reality Eyewear
Jump gate Departure Booking
Campus services and transit literally within the reach of your grasp
While in AR View mode with the mixed reality headset on, the user can use their hands to select elements on the world in miniature interactive map in front of them. In this case here, the user wished to see the departure times for the campus jump gate and save one of the times to their schedule. This example demonstrates both a hands-free and voice based multimodal functionality of the holographic interface as the user gesture taps to invoke the menu and then voice selects the departure locale and then ending with tapping again to add to their calendar.
Hover Scooter Reservation
This showcases another example of a user selecting an element on the WIM(world-in-miniature) such as a hover transit vehicle to reserve it for use. In this case, it displays further context information relevant to the user so a sound judgement can be made if the individual wishes to reserve. This information includes distance away in minutes in addition to the battery life.
Hyperloop transit broadcast Filter
Every element on the holographic map is interactable with the exception of some background set dressing elements. The same goes for the hyperloop transist shown here. The user with their mixed-reality HMD on can view train arrivals as well as departures and tap to gain further context information inclusive of schedule, booking and more.Viewing animated virtual artifacts rather than scrolling through lengthy text based lists assists the user in quickly finding out information about activities and services on the campus in a efficient non-linear manner.
Joining Impromptu Student Group Pods
- Mixed Reality Eyewear + Screen UI
Study Group Search, Computer Science
2D Map View
Easily find and join with others to fulfill common academic or extracurricular goals
If on a whim, a user would like to join for nearby study groups, they can perform a search, and then animated map icons will appear on interactive map to reveal opportunities.
AR Glasses Hologram/Environmental View
If the user had performed a voice search with their mixed reality headset on as they are walking around campus with camera mode activated, they will see interactive holograms spatially embedded in their everyday surroundings.
Recreation Search, Pick-up Sports
2D Map View
Fun accessible animated posts to quickly convey information about campus events
This a general search for recreation or pickup sports. The map suddenly becomes populated with varying animations relevant to the location and activity of the endeavor.
AR Glasses Hologram/3D WIM(World in miniature) Map View
Close up screen shots of these immersive posts after performing a search for nearby pickup sports.
AR Glasses Hologram/Environmental View
These are the same posts as displayed above, yet in holographic camera view mode for the yoga practitioner.
Mixed reality headset view mode for someone or a group seeking skating exercise partners.
.jpg)
Discovering Campus Activities
- Environmental Smart/Touch Panels or AR Eyewear
Decorate your living space with customized and useful media artifacts
When the user enters into their dormitory or living space, they can either utilize their wall based smart panels or mixed reality headset to designate a routine for content relevant to their studies or interest to billboard throughout their surroundings. Such is the case here where the user first created a routine for campus activities to do throughout the day on the basis of interests or input keywords.
The animation you see above is the result of the user creating a routine for activities to do on campus outside the hours of their classes or study time. Instead of the user having to search across multiple webpages affiliated with the university and its departments, this aspect of the system is automated to allow for effortless discovery of customized meaningful opportunities.
This display is another example of all three interaction types on the attentional spectrum. On one instance it is focused in the initial setup process and also if the user decides at any point to interact with the UI in a more acute manner. On the same token, it is also an example of implicit interactions because of the automated setup of billboarding information. The fact that only one small element of function of Mandorla is distributed throughout the confines of the user's interior setting and does not require centralized attention to interact with also qualifies it as being within the scope of peripheral interactions. As, the user could just casually glance at it or interact with the interface casually while still performing other tasks or entertaining visitors.
The animation you see above is the result of the user creating a routine for activities to do on campus outside the hours of their classes or study time. Instead of the user having to search across multiple webpages affiliated with the university and its departments, this aspect of the system is automated to allow for effortless discovery of customized meaningful opportunities.
This display is another example of all three interaction types on the attentional spectrum. On one instance it is focused in the initial setup process and also if the user decides at any point to interact with the UI in a more acute manner. On the same token, it is also an example of implicit interactions because of the automated setup of billboarding information. The fact that only one small element of function of Mandorla is distributed throughout the confines of the user's interior setting and does not require centralized attention to interact with also qualifies it as being within the scope of peripheral interactions. As, the user could just casually glance at it or interact with the interface casually while still performing other tasks or entertaining visitors.
Create + Interact
pt. 2
Immersive Post Creation - Encouraging Peer networking & Camaraderie +Academic Sharing
- 2D Screen UI
User generated immersive post Creation process
Participate, network, share your voice, works and endeavors with others and much more.
The above clip demonstrates the immersive post creation functionality of the creation widget. The user starts by creating a title, subject keywords and then post content. For the post content, they can use any form of multimedia from, text, to images to video, 3D models and more.
To simplify this process, the user can elect to quickly create content using prebuilt templates where all the need to do is change a few elements to customize it to their needs. One example of this would be and instance where a user is seeking participants for a user study in their department. They could click on the survey posting temple and then the interface will become populated by a survey template, text description and immersive emoji relevant towards the designated subject. An immersive emoji is a spatialized animated 3D hologram that will be utilized on the 3D map and in the mixed reality headset simulation if the user is walking by the locale to indicate the presence of the post.
After all the modules of multimedia are created or arranged, the user then designates it's location and spawn points as well as type. This is inclusive of on path, on building, in region or at a particular point or vista. Up to five instances can be created per post with the cap imposed to prevent anyone unnecessarily spamming or abusing the system. Lastly, a time and date is specified ending in a final review of all the modules of the post before the user submits it to go live.
To simplify this process, the user can elect to quickly create content using prebuilt templates where all the need to do is change a few elements to customize it to their needs. One example of this would be and instance where a user is seeking participants for a user study in their department. They could click on the survey posting temple and then the interface will become populated by a survey template, text description and immersive emoji relevant towards the designated subject. An immersive emoji is a spatialized animated 3D hologram that will be utilized on the 3D map and in the mixed reality headset simulation if the user is walking by the locale to indicate the presence of the post.
After all the modules of multimedia are created or arranged, the user then designates it's location and spawn points as well as type. This is inclusive of on path, on building, in region or at a particular point or vista. Up to five instances can be created per post with the cap imposed to prevent anyone unnecessarily spamming or abusing the system. Lastly, a time and date is specified ending in a final review of all the modules of the post before the user submits it to go live.
Aspects of Post Creation:
User generated immersive routine creation process
Automate repetitive tasks by creating routines to save time
Besides creating immersive posts, the user can also setup routines for habitual interactions that they would like automated.
In this example, the user creates a routine for the media posts they would like to see on the weekends. Just like creating a post, they can specify the specific locations, subject keywords, time date and media modalities that the routine will be present on.
In this example, the user creates a routine for the media posts they would like to see on the weekends. Just like creating a post, they can specify the specific locations, subject keywords, time date and media modalities that the routine will be present on.
Dashboard Analytics Review - Improving Campus operations + Offerings
- 2D Screen UI
Discover fresh insights about the campus population to inform future institutional developments
University leadership and developmental staff can access the backend of the interface to analyze data which can assist in decision making about campus offerings, services programs, academics and development strategies. This information comes in the form of anonymized statistics about the user body and it's interactions with the app which enables these professionals to gain insights without breeching privacy of the individuals participating.
| Process
- Design Research + Strategy + Product Development
This section of this case study will explain the iterative processes of arriving at the user experience prototyping solution of Mandorla. Here, I will document all of the research and investigation workings which underlie strategic design decisons through the lens of a design thinking user centered focus. Below is depicted a diagram of the UCD double diamond method utilized.
The Double Diamond design methodology takes into account divergent as well as convergent thought processes to explore issues in depth with user centered solutions derived from critical insights gained.
I investigated issues surrounding academic campus based networking through this design method in which I first sought to gain an understanding about this subject from potential users first hand feedback as well as prior research studies conducted in a similar vein. I then went about weighting these findings in correlation to what the market and business needs would be of an institution looking to provide this product.
This was done in efforts to develop a clear sighted overview of the structure, value, strategy, potentials and features necessarily to implement for the iterative production and user adoption and retention success of Mandorla.
I investigated issues surrounding academic campus based networking through this design method in which I first sought to gain an understanding about this subject from potential users first hand feedback as well as prior research studies conducted in a similar vein. I then went about weighting these findings in correlation to what the market and business needs would be of an institution looking to provide this product.
This was done in efforts to develop a clear sighted overview of the structure, value, strategy, potentials and features necessarily to implement for the iterative production and user adoption and retention success of Mandorla.
Discover
| Secondary Research
A couple essential questions critical to the purposeful and useful development of Mandorla were asked as a basis for preliminary research from published sources and studies.
| Secondary Research
Does there exist an opportunity gap for consumer/business need and value of this type of academic networking portal? Why is it relevant?
Today's generation of youth have decreasing social and emotional learnings and sensitivities due to the preponderance of digital screen time eclipsing real-life interactions.
▪ A recent UCLA study concluded that screen time decreased sensitivity to emotional cues in understanding the emotions of other people for developing youth. While multimedia based interactions do have their merits in some aspects of learning and development, it cannot be utilized as substitute for the tacit learning and interpersonal relational skills that derive from in person interactions.
(Source)Institutions of higher learning want their campus communities to thrive in academics and personal development but the lack of social/emotional interactions and learnings can thwart these progressions.
▪ A 2015 study reported a correlation between social and emotional learnings and increased cognitive processing, feelings of well-being as well as academic performance achievement scores by up to 11%.
(Source)The opportunity here lies in the utilization of these types of digital platforms to springboard real-life interactions to yield a holistic mixed reality campus experiences where digital as well as physical interactions are used in their most beneficial context for the growth and well-being of the userbase.
What avenues do universities utilize to facilitate campus community building, networking and inclusion?
Universities have their own internal student/faculty login portal which they utilize for messaging, announcements and other account administration purposes.
They also utilize official university created accounts on popular social media platforms or on campus traditional flyers. These external platforms are used for the sharing of experiences, information, networking, marketing and more.
They also utilize official university created accounts on popular social media platforms or on campus traditional flyers. These external platforms are used for the sharing of experiences, information, networking, marketing and more.
▪ Popular social media platforms have become the default public square for information broadcasts however some critics would argue that universities are ceding too much of the original essence of their institution and moderation control of freedom of speech and information control over to the tech giants. A relevant quote in this regard states:
"But isn’t it time for institutions of higher education to reclaim the real estate that was once theirs and build their own digital platforms as sites of interactive learning and exploration, intellectual conviviality and scholarly engagement, creative expression and academic debate?...But colleges and universities should acknowledge their dependence on Facebook for archiving their intellectual and social life and instead encourage community on their own platforms."
▪ In 2020, Meta | Facebook launched a Meta | Facebook campus product exclusively for college students in efforts to foster a more insular and private space for user networking in the context of academia. However as of this writing, it is only available to about 30 institutions of higher learning in the United States.
(Source)How could Mandorla be implemented into an institution's digital ecosystem effectively?
Create a platform centered around what the user's already find to be fun and enjoyable digital experiences.
▪ A pew research study on gaming and university life found that almost 70% of college students in their survey reported regular active engagement with some form of electronic gaming media as a means of recreational work-life balance.
(Source)▪ 97% of college students habitually utilize social media although only 1% of them utilized these channels for academic engagements. 52% reported it adversely affecting their learning activities and 66% felt more drawn to social media than to academic related endeavors.
(Source)Understand immersive technology design typologies/frameworks and progressively incorporate useful functionalities into the system to serve the core needs of the user.
▪ Re-contextualize the campus into one of XR(cross reality) immersive potentials to be transformed into a playable landscape that is embedded and negotiated with technology with the ever becoming goal residing in the elevation of social capital currency in the establishment of human connections. Ask the important questions about what motivates people to participate in such a system, what is their process, and how can these smart environment social spatial attributes become a part of accessible, sustainable and valuable academic institutional futures?
(Source)▪ Explore usage of immersive information visualization formats to inform and engage users about campus community happenings. Here, I surveyed a research project called post AR that chronicled the placement of mixed reality event posters affixed to varying locales on a university campus. Through surveys, it was determined that most onlookers of traditional posters did not follow-up with visiting the links for more information about events detailed on these flyers. This opportunity gap gave birth to PostAR which essentially allows users to delve into more information about the subject of the poster in augmented reality without having to navigate to a site but instead being at the site of the poster! It utilized the design notion of progressive disclosure inclusive of a customizable UI and multimodal feedback for system input including sound, visuals and haptic feedback. It presented some interesting design patterns for AR HMDs and hand gestural input for further UX research and potential prototype implementation. It is relevant to Mandorla because it deals with the user's customized interactive placement of information and UI triggers to delve into layers of granularity similar to the immersive posts in the app being designed.
(Source)Make the platform indispensable by centralizing campus services and activities on the system while also featuring indexing and search in appealing information visualization formats.
▪ Essential needs for users of Mandorla would be features such as messaging, campus maps, wayfinding, institutional notifications and much more. Having all of these functions in one place along with the academic and social networking potentials of Mandorla via immersive interactions could potentially remove pain points in user adoption.
After surveying a few studies in relation to immersive technologies on university campuses, it lead to insights about the viability augmented reality media given the present smartphone/tablet paradigm as well as ideas upon how to implement immersive posts tied to geographical locations.
The first study dealt with wayfinding on school campuses, it was discovered that most of the students had not had experience with augmented reality besides brief instances of gaming and were a bit hesitant to partake. Yet, after trying out navigation with AR to find a certain building on campus, they found it to be an enjoyable experience that was substantially more helpful towards achieving their wayfinding end goals than simply a 2D map projection alone. It was also uncovered that some of the main barriers to the mass adoption of AR content is the lack of development platforms outside of gaming as well as the accessibility and human factors concerns such as holding up the smartphone in order to view virtually embedded content of the surroundings. This gives valuable information to be considered when performing a prioritization matrix for the Mandorla. It could be the case that the augmented reality function of this app will not be developed robustly until the ubiquitous availability and mass adoption of AR HMDs. Nevertheless it is useful for future developmental projections.
The next study was an AR tour experience research article which gave perspective into how a prebuilt augmented reality journey can be constructed with the utilization of GPS in tandem with computer vision feature point detection of certain elements in the tourist attraction vista. This gave insight on how to construct environmental UX with virtual contextual information tags in the form of multimedia on site in a format and subject vein other than entertainment gaming. Having this form of virtual information availability in situ leads to a more fluid, intuitive and naturalistic experience to enrich specific tourist experiences. This could in part be applicable to Mandorla because the app is a multifunctional smart campus platform that can be utilized to help orient participants of the university community to the campus in a curated fashion to help them achieve the end goals of networking, navigation or services discovery in the context of simulated and actual campus settings.
(Source)| Primary Research
Surveys as well as interviews were done to gain first hand insights into the behaviors, needs and desires of the targeted user base.
I sought to gain a better understanding of the university campus experience of work, study and interpersonal exchanges through the personalized lens of students and professors. In this empathizing stage of the design thinking process, I carried out informal interviews and an online survey in this regard which led to further knowledge about user needs, desires and service gaps that could potentially be fulfilled by Mandorla.
Behaviors to Investigate
▪ How do you usually keep yourself informed or find out about departmental, campus wide or even student body related events or opportunities?
▪ Does your field of study frequently involve collaborative work or multidisciplinary endeavors? If so, how often? If not, would it be beneficial to incorporate more of this?
▪What types of communication interactions do you engage in most with peers and professors, online or in person? Which do you favor and what qualities are important for you in each of these settings which contribute to your educational experience?
▪How often do you work, hangout, study or frequent public access spaces? What is the experience like for you interacting with others in these settings?
▪ Are study groups, sharing work and feedback from the university community important to you? Please explain your experience with this and how you continually achieve these goals?
▪ Have you utilized any mixed or augmented reality apps previously? What were your impressions and thoughts?
▪ Does your field of study frequently involve collaborative work or multidisciplinary endeavors? If so, how often? If not, would it be beneficial to incorporate more of this?
▪What types of communication interactions do you engage in most with peers and professors, online or in person? Which do you favor and what qualities are important for you in each of these settings which contribute to your educational experience?
▪How often do you work, hangout, study or frequent public access spaces? What is the experience like for you interacting with others in these settings?
▪ Are study groups, sharing work and feedback from the university community important to you? Please explain your experience with this and how you continually achieve these goals?
▪ Have you utilized any mixed or augmented reality apps previously? What were your impressions and thoughts?
Findings/Insights
Students and faculty alike are aware of or at least have used once AR gaming ventures such as Pokémon Go or Harry Potter wizards unite.
Students discover university events mainly within the context of social media posts within shared academic groups of interest, online or offline peer to peer exchange followed up lastly by newsletters and checking the student web portal occasionally.
Study groups or collaborative work is mainly formed in the context of a physical classroom setting leaving missed opportunities for peer connections who might not be attending the same physical space or class scheduling slot.
Outside of courses, despite being on campus, or in a student body group, most students keep in touch with peers mainly through social media interactions.
Between classes, or on short breaks, most students make use of public access lounges, parks or dining to engage in work or pass time.
Most upperclassmen or graduate students expressed interest in increased opportunities for sharing work/feedback, mentorship or research study recruitment endeavors.
Students discover university events mainly within the context of social media posts within shared academic groups of interest, online or offline peer to peer exchange followed up lastly by newsletters and checking the student web portal occasionally.
Study groups or collaborative work is mainly formed in the context of a physical classroom setting leaving missed opportunities for peer connections who might not be attending the same physical space or class scheduling slot.
Outside of courses, despite being on campus, or in a student body group, most students keep in touch with peers mainly through social media interactions.
Between classes, or on short breaks, most students make use of public access lounges, parks or dining to engage in work or pass time.
Most upperclassmen or graduate students expressed interest in increased opportunities for sharing work/feedback, mentorship or research study recruitment endeavors.
Here I identified products or services that I thought would be useful during this analysis phase. Some of them I would not consider competitors rather UX precedents.
| Market Analysis
Market analysis was conducted on these mobile or web apps in the subject vein of social and academic networking, geographical wayfinding, information visualization via simulations in a gaming scenario and even an instance of public access built environment augmented reality.
These portals surveyed were not in the strictest sense competitors rather precedents to be examined to synthesize a meaningfully useful system given the merging of select salient aspects of their function in relation to the design goals of this project.
These portals surveyed were not in the strictest sense competitors rather precedents to be examined to synthesize a meaningfully useful system given the merging of select salient aspects of their function in relation to the design goals of this project.
Direct & Indirect Market Overview
Market analysis entailed the creation of a competitors chart to granularly flesh out offerings, strengths, weaknesses and advantages to derive unique value potentials for Mandorla.
Market Synthesis
As far as XR or cross reality goes, we are still in the relatively new and experimental phase for creating apps for everyday valuable and effective usage outside that of some published AR games or limited ecommerce platforms and corporate apps for internal usage such as those for varied types of machine technicians or military. These apps were selected on the basis of aiming to see the prototyping of these experiences and tools from multiple perspectives to derive a well considered holistic product with iterative potential in relevant veins.
It was insightful to observe how the SimCity franchise handled the information visualization and messaging of a complex city scape and this lead me to think about how these methods can be applied to the types of interfaces I aim to create for Mandorla to assist students and faculty with networking and information artefact discoverability. Rather than the architecture being solely 2D, 3D or AR, it can exist simultaneously in these forms with the user being able to travel into and out of these UI scale transitions depending on the best suited interaction affordances of the setting. For example, there could exist a university campus map similar to SimCity which could showcase micro animations as means of visual messaging of varying events taking place of school services such as a shuttle cycling through a road way. A user could tap on one of those map sections to gain more information or even interaction options with that person, place or thing.
Also another user could be walking along a path on campus and suddenly receive a notification that there are AR student or departmental body virtual postings in the vicinity to checkout and interact with if desired. In this way the interaction structure of Mandorla incorporates wayfinding, academic and interpersonal networking, immersive blogging or social sharing along with a healthy dose of gamifications features to spice up and incentivize the interaction landscape.
It was insightful to observe how the SimCity franchise handled the information visualization and messaging of a complex city scape and this lead me to think about how these methods can be applied to the types of interfaces I aim to create for Mandorla to assist students and faculty with networking and information artefact discoverability. Rather than the architecture being solely 2D, 3D or AR, it can exist simultaneously in these forms with the user being able to travel into and out of these UI scale transitions depending on the best suited interaction affordances of the setting. For example, there could exist a university campus map similar to SimCity which could showcase micro animations as means of visual messaging of varying events taking place of school services such as a shuttle cycling through a road way. A user could tap on one of those map sections to gain more information or even interaction options with that person, place or thing.
Also another user could be walking along a path on campus and suddenly receive a notification that there are AR student or departmental body virtual postings in the vicinity to checkout and interact with if desired. In this way the interaction structure of Mandorla incorporates wayfinding, academic and interpersonal networking, immersive blogging or social sharing along with a healthy dose of gamifications features to spice up and incentivize the interaction landscape.
Define
| Persona
After conducting user surveys, interviews and other background research, I developed a persona to enable the perspective of deeper empathy and insight into the proposed core user motivations and needs of this platform. I utilized something known as a role based persona for this project and also included the subject of spatial affordances. Designing for XR it best done when delving into a holistic view of the user's environmental context, emotions and triggers that invoke interactions and this was sought after here.
| Octalysis Framework
In efforts to promote user adoption and cultivate the user's sense of belonging within the platform, I envisioned usage of Mandorla through the Octalysis Gamification Framework. Games are something that people put effort to engage with because they are touching upon an individuals core drives and humans needs. This is yet another tool that I am utilizing in my UX arsenal to further empathize with the potential userbase of Mandorla.
Here, I utilized the 8 core drives of the Octalysis framework to define the types of user experiences that invoke black hat motives to draw people in initially and then white hat motives to encourage user retentions of the platform.
For example, the bottom half of the octagon represents black hat influences such as scarcity, avoidance and unpredictably which strongly tug upon many individual's emotional core to pique initial interest. In the case of Mandorla, I interpreted this as user's desire and curiosity to not miss out on opportunities in the form of fleeting time sensitive posts for real-life meetups that will vanish akin to snap-chats. After the user has been acculturated into the interactions of Mandorla, the user experience has been designed such that the motive for interaction will ultimately shift into the fulfillment of desires to engage with the peers of their campus community, feel like they are contributing to the collective through empowering interactions and system recognized accomplishments.
For example, the bottom half of the octagon represents black hat influences such as scarcity, avoidance and unpredictably which strongly tug upon many individual's emotional core to pique initial interest. In the case of Mandorla, I interpreted this as user's desire and curiosity to not miss out on opportunities in the form of fleeting time sensitive posts for real-life meetups that will vanish akin to snap-chats. After the user has been acculturated into the interactions of Mandorla, the user experience has been designed such that the motive for interaction will ultimately shift into the fulfillment of desires to engage with the peers of their campus community, feel like they are contributing to the collective through empowering interactions and system recognized accomplishments.
| Affinity Mapping
I created an affinity map as a means to categorize the informational insights culled from user discovery, institutional needs as well as market requirements. In this regard, I conducted a closed card sort session in which participants sorted subjects into predefined categories as seen below.
I considered all work role touchpoints when designating the fixed categories for this closed card sort. Logical categorizations from which to build a strong basis for the app were inclusive of student as well as university needs, proposed goals for campus growth along with app features and functions naturally deriving from business/user objectives.
| Prioritization Matrix
During the prototyping phase, I detailed how a future oriented immersive university campus app could potentially function across a range of input/output modalities. However, this prioritization matrix will shed key insights onto functions of the Mandorla that could be applicable within the present widely adopted technological infrastructure leaving the other proposed elements to reside within the domain of iterative extensible developments given their value and feasibility at some later point.
The essence of Mandorla is an interactive map visualization of university campus, people, places, services and activities. In 2D mode, it is comprised of a 3D isometric view of the campus map with nested animated visuals along with a user interface to access creation, search and browse functions amongst others. Tackling all of the development hurdles that come with making this large scale information visualization takes top priority and is absolutely essential to the basic premise of the app.
This is followed by other standard feature easy win developmental goals such as messaging, user profile, search and filtering. Development of the location based augmented reality as well as audio UI has been slated for potential future implementation due to perceived high time and development costs with little return as AR HMDs along with other dovetailing immersive peripherals are not mainstream yet on the consumer level which may make sustained viewing of AR visualizations with smartphone/tablets cumbersome from a human factors standpoint. Nevertheless, more user testing as well as industry wide hardware developments are necessary in order for these features to be implemented with high impact.
This is followed by other standard feature easy win developmental goals such as messaging, user profile, search and filtering. Development of the location based augmented reality as well as audio UI has been slated for potential future implementation due to perceived high time and development costs with little return as AR HMDs along with other dovetailing immersive peripherals are not mainstream yet on the consumer level which may make sustained viewing of AR visualizations with smartphone/tablets cumbersome from a human factors standpoint. Nevertheless, more user testing as well as industry wide hardware developments are necessary in order for these features to be implemented with high impact.
| Recommendations
Here, I synthesized findings and insights from user studies and market research through making the following recommendations for Mandorla.
Current Developments
▪ Design with a user centered focus to foster a campus based academic social networking and sharing capital, university services, department, locations and events information discoverability.
Utilize immersive experiences typology research as well as mixed reality design pattern language charts and precepts to inform the UX design processes of Mandorla.
▪ Focus upon accessibility and introducing a few core features of the product in a polished manner initially, then test and iterate
As of this writing, it is recommended for the MVP of Mandorla to include only a few of the most feasible proposed features which would be accessible on the average user’s smartphone or tablet.
This includes the interactive isometric campus map along with the legacy textual list view in addition to the top and bottom menus, the right side standard UI buttons for search, filter, activity broadcast layers and the post/routine creation widget. The reason for starting lean is two-fold.
Firstly, the present technological infrastructure of smartphones and tablets does not support the most optimal user experience viewing perspective especially from a human factors standpoint.
For example, posts that are made on the 2D campus map will also appear as animated holograms if a user walks by the locale where the media artifact has been designated on the virtual map. It would be quite cumbersome for the user to have to hold up the phone each time they passed by such a post and defeat the intended purpose of the UX. Instead, this feature would make sense if the majority of the campus body was outfitted with mixed reality/AR glasses where they could see and interact with these holograms naturalistically with gestures and voice UI.
The second reason for starting with limited features is to test out the platform with a wide body of user’s to analyze opportunities for development as well as pain points along with general user adoption and retention statistics. If positive signs of usage and growth are shown, it would then be ripe for iterations to gradually introduce the full scope of elements into Mandorla’s interface. This could include the audio, smart panels as well as AR UI for HMDs. Working in this manner would certainly help to reduce costs and mitigate risk when introducing this new vein of experience to the consumer market.
This includes the interactive isometric campus map along with the legacy textual list view in addition to the top and bottom menus, the right side standard UI buttons for search, filter, activity broadcast layers and the post/routine creation widget. The reason for starting lean is two-fold.
Firstly, the present technological infrastructure of smartphones and tablets does not support the most optimal user experience viewing perspective especially from a human factors standpoint.
For example, posts that are made on the 2D campus map will also appear as animated holograms if a user walks by the locale where the media artifact has been designated on the virtual map. It would be quite cumbersome for the user to have to hold up the phone each time they passed by such a post and defeat the intended purpose of the UX. Instead, this feature would make sense if the majority of the campus body was outfitted with mixed reality/AR glasses where they could see and interact with these holograms naturalistically with gestures and voice UI.
The second reason for starting with limited features is to test out the platform with a wide body of user’s to analyze opportunities for development as well as pain points along with general user adoption and retention statistics. If positive signs of usage and growth are shown, it would then be ripe for iterations to gradually introduce the full scope of elements into Mandorla’s interface. This could include the audio, smart panels as well as AR UI for HMDs. Working in this manner would certainly help to reduce costs and mitigate risk when introducing this new vein of experience to the consumer market.
▪ Allow for the ability to set up notification routines, custom campus maps based on favorites, message, link, share as well as being able to configure a range of interaction or privacy settings.
▪ Set up the back end of Mandorla with an analytics dashboard for universities to utilize student/user activity data as a means of iterative cycle improvements.
This would aid in not only refining the functionality of the app but also to improving academic offerings, campus based services, developmental efforts as well as general programming for such institutions.
Future Developments
▪ Integrate voice as well as augmented reality and smart panels user experience design into the platform.
▪ Craft dynamic and engaging multi platform information visualizations and immersive blogging capabilities to generate a vast economy of interaction space that is accessible to users from a wide variety of temperaments, goals and backgrounds.
Also consider adding gamification features into the overall framework of the experience to provide interesting compositions for moments of delight. Utilize GPS along with AR HMD glasses feature point tracking recognition to enable guided campus tours, immersive student body blog postings in the form of custom POIs that vary in accordance to locale and set duration. Add voice UI for immersive audio as well as environmental smart panels in the user’s dwelling place for automated billboarding content.
Develop
| Information Architecture
I created an information architecture diagram to organize and map out a broad overview of all of Mandorla's core parent and child functions.
It should be noted that this map is consists of the full spectrum of elements that this app could embody, inclusive of the limited feature set proposed in the feature prioritization section as I aimed to provide a roadmap for future developments.
| User Flow
This user flow demonstrates three main interactions, two of which the user will habitually engage in. These include the login, search browse filter along with create and respond widgets.
As depicted above, as the user logs in for the first time, they will be taken through a brief onboarding sequence to explain the basic features of Mandorla. Secondly, I showcase the two main interaction potentials of browsing , creating as well as responding to immersive posts in the context of varying broadcast layer or subject based filtering parameters.
| User Experience Map
Here, I created an experience map to analyze the emotive touch points that a user may experience when interacting with Mandorla. As part of the user centered design process, it is important to empathize with users to gain useful perspectives which can inform iterative developments of the design process.
As the user journeys through each stage of app interactions, I generated a series of potential questions that may arise from the persona that I created for this product. The questions then gave rise to brainstormed opportunities that might alleviate some of these user pain-points or even create new features that were previously not recognized.
One notable insight that came up was the question of why users would want to utilize this application as opposed to their regular social media accounts. Another area for improvement was that the onboarding is a bit long and confusing as it left the user without much knowledge about how to interact with the interface so they had to do experimentation on their own. On the next iteration, these issues among other will be addressed.
One notable insight that came up was the question of why users would want to utilize this application as opposed to their regular social media accounts. Another area for improvement was that the onboarding is a bit long and confusing as it left the user without much knowledge about how to interact with the interface so they had to do experimentation on their own. On the next iteration, these issues among other will be addressed.
| Style Guide
This style guide constitutes the 2D as well as 3D visual design elements utilized to build the Mandorla platform.
Logos
Main logo, app icon and logo without text
2D UI
Top and bottom main menus menus, filter, search, audio, and activity broadcast layers.
Fonts & Colors
Here are the chosen colors and fonts for this prototype demonstration however, these main colors will change in accordance with whatever the schools branding and mascot are.
3D UI
Displayed here is the mapping of the 2D UI of Mandorla to the left and right hands. On the left hand , the modality selector pops up and allows for selection between audio, AR glasses view, legacy list or world in miniature map view. On the right hand we have a menu that allow for the basic search create and filter functions. On the far right, I have included an additional screen shot of the visual design I created once the search button is invoked. I allows for voice as well as gesture keyboard input.
This is the detailed context menu that is invoked from the filter button press on the right hand menu.
This is the detailed context menu that is invoked from the filter button press on the right hand menu.
Designs of the hover scooter pop-up menu on the 3D world in miniature augmented reality map
Keyboard design for the holographic UI to be used if the voice commands are not activated.
| Wireframes
The wireframing for this immersive project is split into 3 main sections. This is inclusive of the sketching process along with 2D and 3D wireframing/prototyping developments.
Sketches
Interface
Utilizing all the preliminary investigations and insights garnered from the research phase of the project, here I began the design process of the main 2D interface. I aimed to get a basic idea of what the UI skeleton would look like as well as the main sections of app the user would interface with regularly. This includes activity broadcast layers, voice interface, login and desktop responsive mode.
These sketches illustrate in more granularity some possible variations of the audio UI and to the right, a basic dashboard for the backend of Mandorla that would be utilized by University staff for their developmental workings and initiatives.
Here, I drew out quickly a couple of scenarios and ideas I had on how to implement the AR glasses world in miniature interactions into the user experience. Specifically, in the top left corner, there is a small map of a university campus along with hands of a person that can adjust this holographic asset to initiate varying interactions of knowledge artifact discovery opportunities. The remainder of the rough sketches detail what would happen in the mixed reality interface view with an AR HMD if an element of the hologram is selected which corresponds to real-world activity broadcasts.
Onboarding
This 3 page series of sketches constitute the storyboarding process for the 2D onboarding animation screens that I created exclusively in adobe XD utilizing the auto-animate feature for the finished prototype.
Interactive Scenarios
I created different user journey scenarios that would demonstrate varying features of the app prototype and these text/sketches are show above. I thought about the types of services or activities that the average campus student would like to engage with on a frequent basis and I concentrated my development efforts on the end. Some examples include joining or creating impromptu of planned student meetings, things to do on campus, transportation, new/events, academic development opportunities. Click on the graphic above to see a more detail view of each of the sketches and brainstormed notes.
2D Development
Design
Once the sketches were complete, I went into Adobe XD to build 2D prototype screens utilizing several different files for the varying user flows that would be demonstrated. The above screens shots include a small sampling of all the user interfaces created and this comprises slides for the onboarding, post creation, search, browse along with other interactive processes.
This screenshot is another example of the 2D user interface design that I utilized for the smart campus wall setup to be used with either environmental touch screens or as a virtual overlay in interiors through usage of Mixed Reality glasses.
Prototyping + Micro-animations
Here are just a few of the interactions and micro-animations setup for the user interface elements composed during the design phase.
3D Development
Modeling
| Buildings + Campus Landscape
In actual practice if Mandorla was published to campus communities for usage, a greater or majority percentage of the 3D assets such as buildings seen above will be generated procedurally in accordance to each unique campus layout.
However, for this prototype, I took the opportunity to model an actual city from scratch utilizing very simplistic low poly form models that I could create efficiently. Such is the case with the screenshots above. I set about this endeavor by studying a map of the campus buildings of my alma mater Drexel University and then basing some of the structures off of these plans. The overarching idea was to create a city with some present day modern and classic architecture along with futuristic buildings as seen below.
However, for this prototype, I took the opportunity to model an actual city from scratch utilizing very simplistic low poly form models that I could create efficiently. Such is the case with the screenshots above. I set about this endeavor by studying a map of the campus buildings of my alma mater Drexel University and then basing some of the structures off of these plans. The overarching idea was to create a city with some present day modern and classic architecture along with futuristic buildings as seen below.
Pictured here are buildings that I modeled based on a few sketched concepts for futuristic structures that would be interspersed throughout the landscape of some of the more traditional structures created in the previous step.
| Tertiary Details
These models comprise some more of the filler models I created to be utilized as tertiary elements through the smart city campus landscape.
These are low-poly tertiary foliage elements.
| Final Composition
After the modeling process was complete, I then composed all the elements together into a final smart city campus landscape based upon a circuit board sketch conceived.
| Mixed Reality UI
The next stage of the modeling process included creating the 3D widgets the the user could interface with if they were using hand gesturing within their holographic interface with Mixed Reality see-through glasses adorned. Above are two examples of gesture invoked menus for the Mandorla interface for the left and right hand. I paid special attention to maintain consistency of the the app buttons and interactions from the 2D screen based to the 3D holographic interface for ease of usage when switching between different mediums as need be.
This is the right hand menu with one of the filtering widgets expanded.
Here are a few of the models I created that comprise part of the 3D holographic map that are invoked based upon user interactions. These above are indications that appear when the user selects transportation activity broadcast layer and then filters for hover scooter personal transit devices. First the user will see the distance it is away from them both textually as well as spatial through glancing at the map. If they decide to book the scooter, then it gives them an arrival time limit before the reservation opens back up to other individuals of the campus community.
As a part of creating a 3D interface, I also 3D modeling icons for usage during the demos as seen above.
| Immersive Emoji
Within this mixed reality smart campus app/setting, I created the notion of immersive emojis. These are emojis that permeate across a a range of multimodal interactive experiences. This above represent basic icons that the user can select to enter into varying categories of these 3D Models/Animations/Sound scapes.
In accordance with the scenarios that I drafted during the sketching phase, I modeled these low-poly immersive emojis to demonstrate varying interactive processes such as study groups, activity partners and much more.
Above are a few more immersive emojis that I modeled for and app journey where the user creates an posts with the category focus on food meetups between classes.
Surfacing
A generic human avatar emoji was modeled to demonstrate varying types of activity broadcast posts made of the app for activity based calls to action.
Here is a screen shot inside of Autodesk Maya showcasing some of the surfacing work done for the primary secondary and tertiary modeled scene elements.
I utilized the MASH system in Maya to distribute the tertiary foliage elements throughout the course of several layers in the scene. I then then instanced all of this geometry in the master scene to cut down on renders times and for efficient scene navigation through the course of my prototype workings.
To create this smart city for usage in the Mandorla prototype, I first drew a sketch of a circuit board as seen on the middle top screen shot above.
I utilized this to position the models buildings, landscape as well as streets around during the final set dressing and composition process. I opted not to use a layered texture shader for the landscape preferring for a more low-fi stair-stepping approach with jagged geometry patch shader shift selections to mirror the overall low poly aesthetic of the scene.
I utilized this to position the models buildings, landscape as well as streets around during the final set dressing and composition process. I opted not to use a layered texture shader for the landscape preferring for a more low-fi stair-stepping approach with jagged geometry patch shader shift selections to mirror the overall low poly aesthetic of the scene.
Animation
Above illustrates the Maya scene with the rigged left hand holographic interface element that I created animation with utilized custom attributes along with set driven keys and basic keyframes.
This is the right hand holographic menu for Mandorla which is also rigged and contains around 45 or more custom attributes and animation with keyframes and set-driven animation.
In actual practice, the user will only see the gestures of their real-life hands when interactive with the mixed reality interface. However, for demonstration purpose in this prototype, I modeled and created a basic rig for a hand to showcase the interactive possibilities.
One of the user scenarios that I included in the prototype was a user searching for groups for pickup recreational sports. The above screenshot showcases one instance of all the animations that I creation for this particular filtering of Mandorla's activity broadcast layer with immersive emoji visible for quick visual/spatial scanning in information artifact discovery.
Interactive Implementation
Interface
Here are the chosen colors and fonts for this prototype demonstration however, these main colors will change in accordance with whatever the schools branding and mascot are.
Modeling
Deliver
| Usability Testing
The aim here was to test the user’s ease of access, level of comfort, emotion and overall value of the Mandorla campus networking portal.
First impression as well as Exploration tests were utilized initially to test for readability as well as affective appeal. Essential tasks tests were then administered followed up by a survey at the end to investigate accessibility highlights, pain points or potential opportunities for development.
First Impression Tests
Five- second as well as First Impression tests were conducted to test the app’s legibility, trustworthiness, emotional impact and general appeal. The app login as well as onboarding sequence and home screen UI were utilized for this testing.
The first notable insight reported was the user’s felt that the onboarding sequence of motion graphics was too lengthy as their attention wandered and they were left with an amorphous grasp of what the app actually does and further questions about why it would be useful to them.
Secondly, they appreciated the easy login sequence in which they could just enter in their university credentials as an entry way instead of creating a separate set of ids and passwords.
They found the visual design appealing as it reminded them of a video game and this stimulated their sense of play and exploration. They had a desire to explore more around the campus virtual map to see what more it had to offer. The users were already knowledgeable about some of the screen-based 2D interface icons as they have seen them in other apps. This includes profile, setting, search and filter buttons. This lead to a feeling of familiarity and comfort with parts of the user experience. However, it was noted that it might be beneficial to increase the contrast on these semi-translucent buttons for accessibility purposes as they appeared too washed out when moving to different positions on the interactive map.
The first notable insight reported was the user’s felt that the onboarding sequence of motion graphics was too lengthy as their attention wandered and they were left with an amorphous grasp of what the app actually does and further questions about why it would be useful to them.
Secondly, they appreciated the easy login sequence in which they could just enter in their university credentials as an entry way instead of creating a separate set of ids and passwords.
They found the visual design appealing as it reminded them of a video game and this stimulated their sense of play and exploration. They had a desire to explore more around the campus virtual map to see what more it had to offer. The users were already knowledgeable about some of the screen-based 2D interface icons as they have seen them in other apps. This includes profile, setting, search and filter buttons. This lead to a feeling of familiarity and comfort with parts of the user experience. However, it was noted that it might be beneficial to increase the contrast on these semi-translucent buttons for accessibility purposes as they appeared too washed out when moving to different positions on the interactive map.
Informal Benchmark Tests
Takeaways
Focus more on in-app learnings via tooltips and demonstrative contextual pop-ups for first time users as they explore the interface.
In doing so, also curtail the length of the onboarding informational motion graphics sequences which may challenge the user’s attention span and not cater to experimental learners.
Consider implementing more contrast to the visual design of the user interface buttons to make the system more legible.
In doing so, also curtail the length of the onboarding informational motion graphics sequences which may challenge the user’s attention span and not cater to experimental learners.
Include a global help icon on all app screens along with succinct useful tutorials or getting started guides in the user account settings menu.
All user work roles should be catered to in these guides, inclusive of university administrative staff who will primarily use the analytics dashboard as well as students and professors who will use the front end interface of the platform.
Users would like to see a system of XP or experience points assigned to each user with a range of incentives along with earnable badges to designate subject or theme-based activity achievements.
In doing so, also curtail the length of the onboarding informational motion graphics sequences which may challenge the user’s attention span and not cater to experimental learners.
Participants thought it would be useful to have a section in the app that presented users with daily, weekly or monthly highlights of events, study groups meeting topics or other trending activity broadcast themes on the campus map/landscape without necessarily having to explicitly search for these each time.
All user work roles should be catered to in these guides, inclusive of university administrative staff who will primarily use the analytics dashboard as well as students and professors who will use the front end interface of the platform.
Takeaways
| Review
- My final thoughts, summary and insights for the project.
| Reflection
My final thoughts, summary and insights for the project.
Mandorla can become the networking and information visualization archetype for University smart city campuses of the future!
Pictured left to right, the above screenshots showcase the final prototype of Mandorla’s 2D, 3D HMD, and Smart panels based user interface for campus networking and information artifact discovery. The above demonstrates an archetypal format that could be utilized as a basis for further iterations of this product/service design or visual design customization of buildings and interface tools based upon an institution’s branding or specific interactivity needs.
Mandorla offers both a present and farsighted humanistic glimpse into the co-creative immersive possibilities of information visualization with tangible real-world benefits for institutions as wells as users outside the typical consumer context of entertainment/gaming one off types of experiences.
Under a single umbrella, Mandorla centrally collates and indexes information from campus communities to output an extensible multi platform user experience that fosters:
Mandorla offers both a present and farsighted humanistic glimpse into the co-creative immersive possibilities of information visualization with tangible real-world benefits for institutions as wells as users outside the typical consumer context of entertainment/gaming one off types of experiences.
Under a single umbrella, Mandorla centrally collates and indexes information from campus communities to output an extensible multi platform user experience that fosters:
▪ Community Growth & Diversity
▪ Academic Achievement
▪ Streamlined and Bolstered University Developmental Operations
During the prototyping phase, I detailed how a future oriented immersive university campus app could potentially function across a range of input/output modalities. However, this prioritization matrix will shed key insights onto functions of the Mandorla that could be applicable within the present widely adopted technological infrastructure leaving the other proposed elements to reside within the domain of iterative extensible developments given their value and feasibility at some later point.
| Prioritization Matrix
This was accomplished through:
Interface modeling after virtual gaming experiences giving users license to play and engage without inhibition
Research conducted during the course of this design indicated that the majority of college students were also gamers so I aimed to construct the interface with gamification in mind so that this user demographic would associate their in-app experience with the emotions of fun and enjoyment.
The physicality of the campus setting is transformed into a game world via a 3D map with real-time user-created activity broadcasts, engaging animated visuals with the potential to incorporate other gamification elements such as goal oriented badges, experience points and more.
The physicality of the campus setting is transformed into a game world via a 3D map with real-time user-created activity broadcasts, engaging animated visuals with the potential to incorporate other gamification elements such as goal oriented badges, experience points and more.
Transient mixed reality creations that vanish akin to snapchats facilitate immediate impromptu or planned real-world meetings, academic enrichment, recreational activities along with University services, status messages and transit
Transient mixed reality creations that vanish akin to snapchats facilitate immediate impromptu or planned real-world meetings, academic enrichment, recreational activities along with University services, status messages and transit
This element of the platform is ripe for all types of educational possibilities beyond posting information about extracurriculars, study partners, or other opportunities. Professors could also post interactive adventure based assignments which rely upon interacting with members of the student body across a broad spectrum of departments for collaborative learning.
Besides reaping the explicit activity-based rewards when engaging with the posts and people, academic motivation and achievements scores are boosted in general from the increased social and emotional learnings that Mandorla facilitates as indicated by research studies already presented in this case study.
Besides reaping the explicit activity-based rewards when engaging with the posts and people, academic motivation and achievements scores are boosted in general from the increased social and emotional learnings that Mandorla facilitates as indicated by research studies already presented in this case study.
Catering to the user’s unique lifestyle, interfacing hardware and situational attention/cognitive affordances(Calm Technology/Design)
We are now in a technological age where elements of the Calm computing vein of thought can start to be prototyped into the user experience interaction design framework on a more ubiquitous scale. With Mandorla, I aimed to incorporate elements of this peripheral interaction modality through designing for voice, augmented reality HMDs, and environmental smart screens with varying grades of interactive affordances. With each of these hardware options, I designed an architecture whereby the user can distribute choice elements of their smartphone/tablet based interface functionality to these ancillary mediums to free up their cognitive load while participating in real-life ongoings.
For example, users can create a routine with custom interests and parameters to automate their normal browsing activity or search processes for events near them. This routine can then be activated in their ambulatory experiences through audio, events, and billboards across their dorm or apartment walls. Having this type of routine in place enables individuals to be more present in their physical interactions with the world and environment rather than being tethered to the centralized UX of their screens when not in the most ideal setting.
It also should be noted that the design of Mandorla in general meant to optimize the user’s information uptake in short bursts of activity by providing an engaging visualization of information on a map with animations rather than scrolling through linear textual postings exclusively. Research studies presented previously in this case study revealed that visual information assimilation occurs at a mercurial blazing speed in comparison to textual data. This ultimately translates into users getting exposed to more opportunities for diverse involvement in campus activities that specifically fit their interests or needs.
For example, users can create a routine with custom interests and parameters to automate their normal browsing activity or search processes for events near them. This routine can then be activated in their ambulatory experiences through audio, events, and billboards across their dorm or apartment walls. Having this type of routine in place enables individuals to be more present in their physical interactions with the world and environment rather than being tethered to the centralized UX of their screens when not in the most ideal setting.
It also should be noted that the design of Mandorla in general meant to optimize the user’s information uptake in short bursts of activity by providing an engaging visualization of information on a map with animations rather than scrolling through linear textual postings exclusively. Research studies presented previously in this case study revealed that visual information assimilation occurs at a mercurial blazing speed in comparison to textual data. This ultimately translates into users getting exposed to more opportunities for diverse involvement in campus activities that specifically fit their interests or needs.
Generating a continuous stream of anonymized usage statistics data to bolster university operations and developments
Generating a continuous stream of anonymized usage statistics data to bolster university operations and developments
The analytics dashboard that I created for the backend of Mandorla greatly enhances the process of discovery for many avenues of campus activity. This data can be subsequently used for a multiplicity of decision making and development initiatives by university operations and thought leaders.
Market Synthesis
Researching, designing and prototyping a cohesive product design for emerging technology has been an insightfully educational challenge yet rewarding and growth-filled endeavor of my design practice.
Working on Mandorla, afforded me the chance to utilize my full range of UX and digital media skill sets from 3D modeling/animation to interaction and visual design to research as well as interactive prototyping. I learned many lessons along the way but most acutely was to always test and validate designs with potential users early in small iterative steps to avoid critical pain points with the interaction. There are many growth possibilities for Mandorla, especially as markets change and hardware availability/affordability becomes within reasonable grasp. I communicated these possibilities throughout the course of this case study but also acknowledged a MVP of features that I think would be valuable and feasible to implement with Mandorla if it were to be made manifest on university campuses in the present.
In some respects, this project is a continuation of my prototyping and development interests born out of my masters thesis work in mixed reality design research.
With Mandorla, I aimed to utilize established and nascent modes of immersive interaction to cultivate designs for a transformed paradigm of humanistic computing that occurs along varying grades of the attentional spectrum.
I envision a world where our interactive devices holistically dovetail our natural human experience in a variety of settings rather than centrally eclipsing them by default in many instances.
Working on Mandorla, afforded me the chance to utilize my full range of UX and digital media skill sets from 3D modeling/animation to interaction and visual design to research as well as interactive prototyping. I learned many lessons along the way but most acutely was to always test and validate designs with potential users early in small iterative steps to avoid critical pain points with the interaction. There are many growth possibilities for Mandorla, especially as markets change and hardware availability/affordability becomes within reasonable grasp. I communicated these possibilities throughout the course of this case study but also acknowledged a MVP of features that I think would be valuable and feasible to implement with Mandorla if it were to be made manifest on university campuses in the present.
In some respects, this project is a continuation of my prototyping and development interests born out of my masters thesis work in mixed reality design research.
With Mandorla, I aimed to utilize established and nascent modes of immersive interaction to cultivate designs for a transformed paradigm of humanistic computing that occurs along varying grades of the attentional spectrum.
I envision a world where our interactive devices holistically dovetail our natural human experience in a variety of settings rather than centrally eclipsing them by default in many instances.
| Recommendations
Here, I synthesized findings and insights from user studies and market research through making the following recommendations for Mandorla.