Projects
Accordion Arrow
Mansion Global VR by Dow Jones

Seamless VR High-End Property Exploration

Why

VR became a trend in 2014 with the introduction of the cardboard VR kit, which works with personal smartphones. As more advanced mobile-based VR headsets emerged, Dow Jones teams began exploring potential use cases. Mansion Global, with its focus on high-end properties, was an ideal platform to experiment with VR due to the strong synergy between immersive experiences and luxury real estate, especially for clients exploring properties globally.

What

A fully immersive VR platform that integrates Matterport’s 3D virtual tours with Mansion Global’s real estate listings, allowing users to explore multiple luxury properties seamlessly on the same device, rather than accessing Matterport's experience solely from individual listing pages on the main website.

How

We collaborated with the Mansion Global team, an external 3D Unity vendor, and Matterport to build a standalone VR app. I led the design process, developing wireframes and prototypes to ensure the VR experience was intuitive, user-friendly, and clear to the 3D vendor. To achieve this, we first created non-interactive UI elements in 3D space to see how they appeared to users, rather than relying on conventional 2D design tools only.

Project Context

Accordion Arrow
Context

Compony

Dow Jones, Mansion Global team

Title

UIUX designer and PDM

Role

As a product designer, work with the engineering team to understand technical limitations and collaborate with the product owner to develop designs that test use cases of the VR experience.

Project type

POC

Technology

Unity3D, Samsung GearVR, Matterport

Duration

Approximately, 4wk. business goal discovery and concept design, 2wk. technical discovery, 3mo. design and development.

Product overview

Mansion Global VR, in collaboration with Matterport, aimed to enhance the real estate viewing experience by integrating immersive 3D virtual tours directly into their platform. This project focused on providing a seamless VR experience, allowing users to explore multiple property listings on the same device without the need to switch between web browsing and VR. By leveraging Matterport’s advanced technology, Mansion Global sought to offer a more engaging and intuitive way for users to virtually tour high-end properties.

Design Developments

Accordion Arrow

Personas and user stories

While the project started when we discovered a new use case as a new client team was onboarded, we also identified other existing clients who might benefit from these use cases. Both teams work at a large enterprise and often conduct intensive competitive analysis on large enterprises' partnership and investment activities. One team analyzes their clients' and potential clients' competitors to assess their business risks, while the other examines their own company's competitors to help shape their strategies.

Sophia Bennett

As a senior luxury real estate agent, I want to provide my clients with immersive VR tours of high-end properties, so that I can offer a unique and engaging experience that helps close remote deals faster.

Alexander Wu

As a high-net-worth international buyer, I want to explore luxury properties through VR from the comfort of my home, so that I can reduce international travels for properties that are hard to evaluate in still images.

*The personas and user stories above are fictional to protect the actual clients' details but provide a basic idea for portfolio purposes.

VR headset exploration

At the time, the project decided to use Samsung's Gear VR, a mobile virtual reality headset released in 2016, developed by Oculus and Samsung, and designed specifically for use with certain Samsung Galaxy phones. It offers a portable and accessible VR experience with easy setup: simply slot a compatible Samsung phone into the headset, strap it on, and you're ready to dive into a wide range of VR apps, games, and 360-degree videos. The Gear VR is operated by moving your head to maneuver the cursor, with a touchpad on the side to perform control actions. Although it lacks the advanced capabilities of PC-based systems like the Oculus Rift or HTC Vive, the Gear VR was chosen as the target device because the prototype needed to be accessible at various real estate offices or clients' homes.

Samsung Gear VR

Matterport technical integration

Matterport is a technology platform that creates immersive 3D virtual tours of physical spaces, commonly used in real estate to showcase properties. It captures detailed 3D models and 360-degree images of spaces, allowing users to virtually explore properties as if they were physically there. Prior to our project, the Mansion Global web team collaborated to integrate Matterport’s VR capabilities into the website, enhancing the virtual property viewing experience. For this project, our goal is to provide a seamless VR experience that allows users to explore different real estate listings on the same device without having to switch between web browsing and the VR environment.

Flow exploration

In this project, I designed, proposed, and adjusted navigation flows to effectively guide discussions with stakeholders and address their extensive requirements. The stakeholders wanted to include crucial data points for clients, such as market insights and neighborhood details. However, since VR is not the ideal medium for presenting data-heavy content, I focused on simplifying the flow to highlight property listings, allowing users to access immersive experiences with a single click.
‍
Additionally, considering that this pilot program was held mainly at real estate offices, we aimed to incorporate "wow" factors. For instance, we collaborated with the 3D vendor to integrate an interactive globe intro that introduces properties around the world, culminating in a dynamic transition to the city of interest.

UI Inspirations

In 2016, the industry was still exploring best practices in modern VR UI design, and we examined various approaches from other companies. We used the Oculus Rift UI as a baseline. The primary navigation UI features window-style 2D panels floating in 3D space, offering a familiar two-dimensional interface that connects users to the immersive experience. In VR, input options are similar to those on keyboards, mice, or mobile devices, including clicks, arrow buttons, and swipes. However, due to the unfamiliar forms and placements of input devices, the UI options are intentionally limited to avoid overwhelming users with too many interactions.

Communicating UI nuances

Here's the revised version:Unlike conventional front-end coding, such as CSS, I used reference videos to communicate the nuances of UI transitions to the engineering teams and the product owner. These videos, created in After Effects, were also effective in engaging stakeholders and keeping real estate agents and offices excited about the project.

Design components

Throughout the project, we explored how UI elements should be designed and provided to the engineering team, especially given the timeline constraints we faced. I led the creation of a UI library similar to a conventional design style guide early in the project. This approach was helpful because the Unity engineers used these elements as image assets, overlaid on 2D planes to construct initial interactions. Later, these UIs, such as buttons and menus, were recreated natively in Unity3D.

Final Prototype and Key Takeaways

Accordion Arrow

Challenges with working with external

With the integration of the Matterport SDK, there will be a significant delay in loading properties from our Unity app. The current flow is designed as follows: 1) show listings in UI panels, 2) after selecting a property, the UI transitions to display rooms within that property, and 3) clicking on a room starts the immersive experience. Due to the loading times, I would streamline the flow further to simplify the second step if we work on the next version.

Unlike typical UIs, we can't display too many listings or rooms at once for users to browse intuitively. Although we tried to minimize options as much as possible for the first release, our strategy for the next phase should be to narrow down the user's preferences a lot before they use the VR device. The VR experience should only present listings and rooms that are likely to capture their interest, triggering the immersive experience immediately.

Get in touch

I'm excited to learn about your project.
Let's collaborate to turn conceptual ideas into concrete results.
takuma.kakehi@gmail.com
@tkakehi
Top
Platform and Media Types
Mobile Apps
Web Apps
Touchscreens
Immersive Interactions
Data Visualizations
Conversational Interactions
Roles
Product Owner
Product Designer
UI Designer
UI Prototyper
Skills
Wireframe & User Journey
Design System
Marketing Landing Page
UI Microinteraction
Visual Coding
Projects
Idustries
Healthcare
Financial
Real Estate
Travel
Retail
User Psychologies
Human Tendencies, Curiosity, Bias
Rewards Investments
Gestalt Principles
Managing Expectations
Personification, Uncanny Valley
Takuma's Portfolio

Experienced product and interaction designer, with diverse experience in web, mobile, VR, AR, and immersive experiences.