top of page
Frame 91883.png
TourRing VR

UIUX DESIGNER & RESEARCHER • VR & MOBILE & WEB

Real Time Tours & Interactions in VR showrooms!

ROLE

Researcher
UI Designer

SKILLS

User Research
Product thinking
Prototype
Interaction design 
Visual design 

TOOLS

Figma
HTML/CSS

TIMELINE

05/2022
1 month

Overview

TourRing is a function for VR Maker users to have real-time tours around meta space in the LiveTour. On the editor platform, the host can book a schedule, send watching link, and share full-screen view with the guests. Next, by guiding the guests the hightlights and giving them a brief introduction of the LiveTour, the host is able to create a more immersive and innovative user experience and increase interaction with the guests.

Design Process

The design process of this project can be illustrated in the following graph. As the researcher and solid designer, I took the lead from step 1 to 8 with another UX designer, making the design deliverables while communicating internally with other designers and externally with the stakeholders.

Group 5.png

Empathy map & personas

Firstly, I interviewed interior staff including sales, pre-sales, and customer success, to gain a broad view of the current user types. In the discussion of phase 1, I spent a whole week interviewing them, and the outcome turned to be astonishing - TourRing had a plentitude of obstacles for users. Our App has long been abstained since the system is too unstable to contain more than 3 people, and the schedule booking journey had much breaking points due to unnecessary tasks, unfriendly flow design, and unaccomplished functions. To probe deep into the actual unsatisfictoriness of our users, and define the intersection of the problem, I divided existing users into 3 groups including real estate agents, VEx exhibitors and interior EMEA team members. They have similar using scenario but in different industry. An empathy map is made for each of them, categorized by what does the user say, think, feel and do. After that, a persona is built based on each group of the users, with behaviors and brands they use were thoroughly investigated and described.

Frame 91887.png

Empathy map of 3 types of users

Frame 91888.png

Persona of 3 types of users

Information Architecture

Next, the information architecture and the flow chart were created to demonstrate the main structure and the content of the system. The client team, including both marketing and techinal professionals, was closely involved in this stage to make sure all stakeholders are on the same page about the scope and feasibility of the proposed features. It helps developers and us to confirm not only structure and scope of data but also whether there is any breaking point during the whole process.

Group 15.png

Information Architecture of TourRing

IDEAS TO ACTION

1. Wireframe

Based on the information architecture and the flowcharts, low fidelity wireframes are created to make sure we solve the previous frustration of the UI. Since we have to show both video call windows and LiveTour space, the interface has to be organized appropriately without fully occupied. Mobile and web wireframes show a little bit difference in the interaction rules due to limited space for components on the mobile.

Group 28.png

Wireframe of TourRing viewer

2. UI & Prototype

Basically the UI is the screen-by-screen pixel-perfect visualization of the wireframes in detail. TourRing default flow and booking flow are demonstrated with prototypes made by Figma, while a series of tag styles are shown in different spot and status.

Prototype video of editor

On mobile, guest users have to fill complete name to enter TR. On web, host users can show around the room and click tags, adding wishlist for each guest once at a time.

Group 1897.png
Group 1898.png

UI of each flow (web & mobile)

3. UX Writing and Hierarchy Optimization

Most importantly, the editor platform for host had a lot of room to improve. The previous version mixed up conference and TourRing and it led to the difficulty to tell which is which, so I adjusted the hierarchy of these two functions and clarify the names of each functions, such as transferring “Add release time” and “Booking” to “Release available time” and “Add new booking”. I also organize the hierarchy of functions and information, such as keep “start time and end time display” away in the setting button. The comparison below can show you the changes of both UX writing and info hierarchy.

Frame 22.png

UX writing and hierarchy improvement

Final Mockups

Frame 91879.png

B/A of TR viewer (mobile)

Frame 91885.png

B/A of TR viewer (web)

bottom of page