top of page
Frame 91883.png
TourRing VR

UIUX DESIGNER & RESEARCHER • VR & MOBILE & WEB

Real Time Tours & Interactions in VR showrooms!

CONTRIBUTION

Researcher
UI Designer

SKILLS

User Research
Product thinking
Prototype
Interaction design 
Visual design 

TOOLS

Figma
HTML/CSS

TIMELINE

05/2022
1 month

OVERVIEW

TourRing VR enhances LiveTour by enabling hosts to conduct real-time virtual tours. Despite its potential, the feature struggled with no mobile responsiveness, unclear editor instructions, low stability, and a complex viewer UI. I tackled these issues by redesigning cross-platform UI/UX and conducting usability testing. The result was a streamlined experience that raised user engagement by 23%, increased tour duration by 17%, and improved satisfaction ratings to 4.3 out of 5.

DELIVERABLES

1. Web TourRing UI

The improved web version of TourRing now boasts a larger and clearer display for LiveTour and its contents, creating a more engaging viewing experience. The interface is designed to be more intuitive, incorporating features like easy zooming to facilitate navigation and interaction within the virtual tours.

Frame 91885.png

2. MobileTourRing UI

For the mobile interface, the enhancements focused on responsive web design, ensuring video call screens and LiveTour content are presented without any overlap or confusing elements. The layout adjusts smoothly to different screen sizes, making the experience straightforward and user-friendly on mobile devices.

Frame 91879.png

CHALLENGES & LEARNINGS

The initial challenge in this project was to ensure comprehensive coverage of Scotty's Market's needs within a tight timeframe. To achieve this, extensive collaboration and communication with key stakeholders, including the store manager, staff, and suppliers, were crucial.

Collaborative Alignment

Keeping stakeholders and development teams on the same page was challenging. Regular meetings and clear communication were key to ensure everyone understood and supported the project's direction.

Executive Communication

Presenting weekly to the CEO and CTO sharpened my ability to summarize complex UI/UX details and project advancements succinctly, while also integrating their valuable feedback.

Leadership Across Functions

Initiating and leading cross-functional team efforts highlighted the importance of balancing diverse viewpoints and fostering collaboration, a critical skill in the UI/UX field.

PROBLEMS

1. Limited Mobile Responsiveness

One of the main issues with TourRing was its lack of effective responsive design for mobile devices. This led to challenges in viewing and interacting with LiveTour content on smaller screens, hindering the overall user experience.

2. Complex Viewer UI

Users found the viewer side of the interface confusing and overly complicated. This complexity made it difficult for users to navigate and engage with the LiveTour features effectively, impacting user satisfaction and engagement.

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

USER
RESEARCH

Empathy Map

To understand our diverse users' experiences, I created empathy maps for each user group. This involved categorizing their responses into what they say, think, feel, and do. This process revealed a wealth of insights about the obstacles users faced with TourRing, such as system instability and cumbersome booking processes.

Frame 91887.png

Persona

Based on the interviews with internal staff and the empathy maps, I developed personas for three key user groups: real estate agents, VEx exhibitors, and interior EMEA team members. These personas were crafted with detailed descriptions of their behaviors and brand preferences, providing a clearer picture of their unique needs and usage scenarios in different industries.

Frame 91888.png

Information Architecture

Based on the interviews with internal staff and the empathy maps, I developed personas for three key user groups: real estate agents, VEx exhibitors, and interior EMEA team members. These personas were crafted with detailed descriptions of their behaviors and brand preferences, providing a clearer picture of their unique needs and usage scenarios in different industries.

Group 15.png

UI/UX DESIGN

Wireframe Development

Starting with the information architecture and flowcharts, I created low-fidelity wireframes to address previous UI frustrations. The challenge was to simultaneously display video call windows and the LiveTour space without clutter. The wireframes for mobile and web had subtle differences in interaction due to the limited space available on mobile devices.

Group 28.png

UI Design Refinement (Web/Mobile)

The UI design phase involved transforming wireframes into detailed, pixel-perfect screens. A key focus was on responsive web design (RWD) to ensure clarity and avoid overlap in the display of various tags across different TourRing scenarios. Using Figma, I developed prototypes to demonstrate the default and booking flows of TourRing, paying special attention to the style and placement of tags in various states.

Group 1897.png

Enhanced UX Writing

Significant improvements were made on the editor platform for hosts. The earlier version (left side of the image) had conflated conference and TourRing functionalities, creating confusion. I redefined the hierarchy of these functions with clearer names (right side of the image), such as changing “Add release time” and “Booking” to “Release available time” and “Add new booking”. Additionally, I reorganized the information hierarchy, for instance, moving the "start time and end time display" to a settings section. These changes were crucial in enhancing both the clarity of UX writing and the overall information hierarchy.

Frame 22.png

KEY
TAKEAWAYS

Clarity in Communication

The project taught me how vital it is to keep things simple and clear. For example, renaming confusing function titles like “Add release time” to “Release available time” made a huge difference. It's about turning complex tech language into something anyone can understand and use comfortably.

Flexibility in Design

Adapting designs for different devices was a key lesson. For instance, adjusting the layout for TourRing on mobile so that video calls and tour content didn't overlap showed the importance of responsive design. It's about making sure users have a great experience, whether they're on a phone or a computer.

bottom of page