Unveil - Therapeutic VR experience


Unveil is an immersive therapeutic Virtual Reality experience that guides participants on a profound journey of self-reflection and discovery.

My Role

UX Design
Visual Design
Environment Assets Curator

User Flow, Interface Design, Visual Design, Environment assets curator
Time

Mar-May 2024

(5 weeks Production)
(2 weeks Exhibition)


Team

Lening Hou (Narrative Designer)
Johnny Zhou (Game Developer)
Iris Wu (3D Artist)
Cathy Li (Me)  
Software

Blender
Unity 3D URP
Figma

Hardware
Oculus Quest 2






CONTEXT


Project Overview
This project is an innovative Virtual Reality (VR) experience designed to guide participants through a deeply therapeutic journey of self-reflection and emotional discovery. 

Project instructed by David Lobster, and set in a serene and enigmatic virtual wonderland, the experience encourages users to explore their inner thoughts and emotions in a safe and engaging environment.
Video Taken from Pre-exhibition at 370 Jay St






FINAL PROJECT DEMO


  


CONTEXT


My Role
As a UX Designer, I worked on ensuring the user flow and story-telling of the experience would align with users mental model, and organized user testings to ensure the experience works well.















RESEARCH

Identifying Problems
01.
What problems do people have for the current website?


We sent out questionnaires using google forms to collect users feedback for current website. This method gives us a general overview of problems that users might have.

02.
What are our users’ exact needs?


We want to dive into their daily scenario, therefore, we chose to conduct the in-depth interview to find out the pain-points.

03.
What is a good help page design?


We analyzed 26 public access help pages encompassing search engines, collaborative digital platforms, and higher education institutions to uncover the best practices and areas for improvement.




RESEARCH  OVERVIEW



01
RESEARCH BREAKDOWN

Quantitative Research - 44 Questionnaire responses

In the questionnaire, we ask questions regarding the user's preferences for device selection, frequency of use, and opinions on the current design and features. More importantly, gathering general feedback on which sections of the page are used most will help us prioritize small sections in future redesign.

Here are the summarized results from the questionnaire:



75%

Users often navigates the site through the “Search” function.
.

63.7%

Users think the visual design can be improved.

52.3%

Users find it difficult to locate desired information.

86.4%

Users access the page through Laptops.


Sample questions we asked:






Summarized Insights learned from the Questionnaire:
01.
Search Feature Enhancement


Enhance the functionality and visibility of the ‘Search’ feature.
02.
Information Hierarchy Redesign


Reorganize the IA and prioritize sections based on questionnaire results.
03.
Visual design Improvement


Redesign the visual of the whole website and align with NYU color system 







02
RESEARCH BREAKDOWN

Qualitative Research - 20 User Interviews

In summary, we interviewed various stakeholders to identify their specific needs. We asked detailed questions related to the search function and the current information architecture to receive in-depth feedbacks from the users.


11

students

Students are the main user who navigate through the help website for resources .
.

4

Administrators

Every administrator updates their own content to the website themselves.

3

Residents

Residents work in different labs and introduce the lab to student on the website.

2

Faculties
Faculties link the resources and information from the website to their syllabus.







Summarized Design Actions based on our interview notes:

Enhance Information Hierarchy


01. Information Architecture
There are a lot of repetitive sub-tabs under each section. The side menu is cluttered with too many links, making the navigation complex and difficult to use.

02. Layout and Hierarchy
The current layout design making it difficult for users to discern the importance and organization of content.

Improve
User Experience


03. Visual Designs
The help page layout is attractive and not user-friendly. 



04. Terminology Issues
The terminology of sections is not accurate.
Enrich
Functionality


05. Search Bar
Students find it challenging to access the search bar.



06. Resources
For first year students, it would be helpful to have a better designed floor map.







RESEARCH SYNTHESIS


Define Problems 
Based on our research insights, we used the HMW statement to help us clarify our direction and actions. 
We have two HMW statements as they focused on different directions.

01. How might we optimize the ITP/IMA help page to  improve users' information navigation efficiency and quickly get what they want?

02. How might we  enhance the accessibility in design to ensure inclusivity for all users?



UX DESIGN: INFORMATION ARCHITECTURE


Enhance Information Hierarchy
We reorganized the new Information Architecture, removed repetitive sub-tabs, and rephrased the terminology used for different sections to ensure clarity and efficiency for users.


Current Information Architecture

New Information Architecture




UX DESIGN: ACCESSIBILITY NOTATION


Digital Accessibility Approach
Our design focus

With guidance from Jodi Arlyn Goldberg, we redesigned with a focus on accessibility. 6 major accessibility issues were being identified through the consultation with the NYU digital accessibility team. To address the current accessibility issues, we delved into the problems themselves to find a coordinated solution.

(mentioning the tool we used Wave)

NYU web accessibility policy

NYU has adopted the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.0, Level AA as its standard for digital accessibility.


Accessibility Issues

Missing alt text





Embedded links in the header


Color contrast problem





Pdfs should be accessible pdfs

Heading rank problem





Tab order should match the visual order









DESIGN PROCESS


Design and Validation


We created different types of wireframes and conducted a small scale usability testing to validate the most efficient user flow, after we selected our wireframes, I led the interface design process and established a design system that proposes a more efficient workflow. 



DESIGN PROCESS

Wireframes

We reached out to 10 interviewees from the user interview process. 
Then, we conducted usability testing in-person to observe how our users interacted with the working low-fidelity prototypes.

After the usability testing, we decided to choose option 1 because it presents all the information efficiently in one place, and the length of the website is the shortest, which helps the users navigate quickly compared to the other two options.



  Option 1  




Option 2

Option 3





Design Systems

I created the design systems to align with other NYU Tisch websites. The font and color choices mainly follow the NYU design system, and the format is learned from Microsoft Teams UI.






DESIGN DELIVERABLES


Final Design deliverables
In December, our team pitched this redesign proposal to our product manager Scott, the pitch is very successful, and we turned this volunteer project into a on-campus position for further improvements and implementations.




DESIGN DELIVERABLES

Final Design Overview