HomeShine - Virtual Reality

A virtual reality project that help people visualize their vision about their home.

  • Role UX Lead
  • Date 2017.4-6

The Challenge

This is a side project completed by a team of 4 designers. None of us has done Virtual Reality design before, so we just learned our way through the process. In order for the team to successfully complete the project, I need to think ahead about what are the reasonable tasks for the team to do, how to improve our UX process, and how to apply human centered design technique into this VR project.

It All Starts From User Research

Our team had 8 interviews with home owners regarding their home remodeling experience. Based on the information we got, we generated a customer journey map of the entire remodeling process. We decided to focus on the “Planning" phrase because we believe this is the part we can help the most with the VR technology.

Discover Pain Points, and Identify What VR Can Help.

From the interviews, we heard people complaining about the final results doesn’t match with their expectations. We believe VR can help bridge the gap between the outcome and the homeowner’s vision.

If I were to do this all over again, I would change the color of my wall, making it simpler, and cleaner.

I would not use this color for my backyard fence if I were to have another chance. It looks different from the inspirational pictures I saved.

Host Design Studios and Get Great Outcome

With the goal to help home owners visualize their vision of their house, I host multiple design studios for our team for brainstorming, critique and ideation. Also we decided to design for Google Daydream Platform since it’s the most affordable product which indicates a possible larger user adaption, also it allows user inputs with hand control. We planed to design for the minimum user input first, then scale up later for Oculus and other VR devices with complex user input methods.

Be Creative on VR Prototyping

VR design is quite different from 2D screen design. The most difficult part is the environment design, such as teleportation route, spacial context, etc. While none of the team members has 3D modeling skill, we come up with some creative ways to test our design ideas without get into 3D prototyping. And that is the “Cardboard Prototyping”. Since we are designing in the context of a home, we bought some doll furnitures to represent the house, and used all kinds of material like metal wires, sponges, even flashlight to imitate the VR elements.

Use cardboard and BBQ stick to imitate the Daydream handle

Focus Study on VR Interaction Design

When creating the prototype, the most important thing is to be clear what is our goal. For example, I really want to study the user’s expectation of changing the wall/furniture color in the 3D environment. So I created an “Edit” button( a pencil icon within a circle) in paper and pasted it on the doll furniture. If user clicked on the Edit button, I will bring a few color paper for the user to choose from. Then if the user chose a different color, I would switch that furniture to the one with the matching color. During the testing, I observe user’s reactions to that edit icon, and I ask relevant questions to probe on their expectations.

I always take a few steps ahead so I can figure out what is the best for the team to do. After I created the first prototype and conducted the user testing, I explained the process to the team, the rest of the team members were able to follow the same process and conducted user testings on their own. The team improved the prototype further more.

Use doll furniture to imitate the 3D environment of the interior of a house.

Polish the Design in Photoshop and Save Time

After getting the feedback on the “Edit” element, I continue to improve that design element in Photoshop: make it clear what are the different states of the interactive elements, on hover, before click and after click.
From the user testing, user wasn’t sure what the black dot do in the center of the color blocks, so in Photoshop I changed the black dot to a “X” crossmark icon. In the doll furniture prototype, we weren’t able to add “glowing effect” to the edit icon, but in Photoshop we could. This is a low cost trick before investing tremendous time into Unity prototyping. Fake it until you make it.

Get it Real in Unity

There still a lot of things we won’t get answered from 2D design, such as how large should we set the “Edit” icon in the 3D environment, how close should we display the color blocks to the face of the user, where do we place the “Edit” icon so user won’t miss it? To answer that, we need to get it real in Unity. For sure there’s a big learning curve of Unity prototyping, I watched a lot of tutorials on Youtube, it is not easy, and till this day I am still learning about it. The Google Daydream Unity SDK package does help a lot. Regarding the spatial context and other VR environment design constraints, Google provides a nice guideline, it even provide a sketch file with everything documented.

Use Unity 3D model to figure out what is the best teleportation route to travel easily in between the rooms.

Google’s VR Design Guideline