UIUX DESIGNER & RESEARCHER • VR & MOBILE & WEB
Real Time Tours & Interactions in VR showrooms!
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.
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.
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.
Empathy map of 3 types of users
Persona of 3 types of users
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.
Information Architecture of TourRing
IDEAS TO ACTION
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.
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.
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.