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.
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.
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.
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.
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.
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.
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.
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.
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.
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.