DreamsVR 
LUMA: Client Project

DreamsVR is a meditation VR app designed to relax patients in the ICU whom are undergoing treatment, transporting them into a virtual reality to refocus their mind to healing in a less stressful environment.  

Ask me about this in person, I would be more than happy to discuss!

  • Team
    • Alexandra Bloch
    • Julia Gu
    • Rachel Morton
    • Rafaela Pelegrina
    • Dennis Yelito
  • Software
    • Adobe Illustrator
    • Unity 3D 
    • Oculus Go
  • Role: UI/UX Designer

    Involved wireframing, rapid prototyping, user interface design, programming (C#), and user experience research.

  • Communication Tools
    • Slack
    • Asana

UX Research

A huge part of this project was to make sure this VR meditation app could be used on patients within the ICU. Patients who are medicated, laying on their backs, equipment attached to them, weak muscles, all factor that may limit the dexterity in their arms and fingers.

This initial design took in mind how to create a way to navigate the main menu with as few complex big movements as possible. This approach solely utilized one main button, pushed by their index finger. Though this approach was not approved, we took away some key components.

  • Patients would only be presented one row at a time to limit confusion and choices.
  • Visual, auditory, and haptic feedback should be given once the patient selects something.
  • Options should be large clickable areas.
  • Only the big trigger button on the front should be used to limit hand coordination to one finger. 
UIWireframes-13.jpg
Concept Development
Low Fidelity Wireframes

These two wireframes were used to communicate with the Unity programmers on this project as well as crafting the ideas behind the UI design. Through these two sketches I produced, we deduced a few things:

  • We need large readable icons and boxes.
  • We want 3 by 3 row for option choosing.
  • Selection of box needs to be a change of state.
  • One only box in a row may be selected at one time.
  • We chose "begin" because it felt more relaxing than start or ready.
  • Rows are grayed out because can't be selected. Only one row may be selected at a time.
  • UIWireframes-18.jpg
  • UIWireframes-20.jpg

Implementation
High Fidelity Mockups

The design and developer team worked hand in hand to implement these UI elements. The design team created icons, shapes, and copywrite while simultaneously handing them off to the developers through both Asana and the server. Many iterations occurred at this stage of the process. Icons constantly changed to convey the message better, and wording for each of the locations changed to fit the mood.

*Neither of these two are the final product, these are variations throughout the process.

  • 3 by 3 grid of selections

  • 4example one.png

Usability
Configuring Buttons

Conveying the message to the user that they have successfully pressed a button went through a few design changes. Ultimately finalizing the design to that of the first image with the "Pressed" event being a highlight of another color.

These design suggestions were raised to the team with various people bringing new ideas to the table.

  • Drop shadows were an older style
  • Solid colors are more prominent in current designs
  • Gradients are on trend with 2019

It was very important to differentiate "Hover" and "Pressed" so that the user could complete the action quickly and without confusion. Decided that the "Pressed" should stand out more than the hover and used the color change to only signify a selection.

  • buttonstates_formarko.jpg

  • ui_buttonhoverideas.png

Instructions
How-To Menu

One of the key elements to the usability of this application was giving the users clear instructions on how to use a VR device. Most patients, users in general, have not been familiarized with VR and the controls of an Oculus Go specifically (whose controller is designed differently from other VR devices).

We wanted the user to immediately understand how to use the pointer ("mouse") and learn how to "click". Therefore, positioning the how-to instructions on the main menu allowed the users to only move forward after learning how to press the start button.

Below is an image of the Unity test. Displaying an illustration of the button press instruction in a simple and clear way.

  • image from ios.jpg

Reflections
  • Considering users with temporary disabilities that inhibit them from a free range of motion and designing around that. 
  • Designing UI that fits a relaxation app, thinking about color scheme, shapes, copywrite, size, and audio.

Rapid prototyping because the client wanted a functioning prototype completed by the end of the year, within a couple months time span. User testing wasn't as feasable but this VR app was created with the intention of being intuitive and simplistic to use even with limited range of motion.