ui/ux DESIGN, VR DESIGN, responsive web design

360° Immersive Meeting Plaform

COMPANY

Avatour

ROLE

Sr. UX/XR Designer

EXPERTISE

End-to-end Design

YEAR

2021-2023

Project description

Avatour is a 30+ member startup revolutionizing B2B meetings with 360° live collaboration across mobile, desktop, tablet, and VR. Its technology powers virtual tourism, remote inspections, audits, and construction management, redefining real-time team collaboration.

Team

Part of a two-member design team, working directly with the Head of Design.

Impact

Ensured a seamless and consistent user experience across devices by leading the end-to-end design of 10+ features for mobile, desktop, VR, and camera interfaces.
Increased customer retention by 20% by identifying a highly valued but underemphasized feature, thereby broadening the value of the company to it's customers.
Improved user adoption and reduced dependency on sales and support teams by designing a self-serve, product-led onboarding experience for the website and mobile app.

Problem Statement

Context

Avatour is a meeting platform accessible via desktop, mobile, and tablet browsers, as well as a VR application, allowing users to participate in meetings in VR. The platform enables users to pan a live-streaming video in 360-degree angles and interact with hosts who stream the space using 360 cameras.

Avatour is used for real-time auditing in warehouses, progress tracking at construction sites, and virtual tourism, with each use case requiring different features.

Problem Statement

How can we ensure a consistent meeting experience for both hosts and guests across desktop, mobile, tablet, camera, and VR platforms?

Process

This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.

Research & Planning

Conducted in-depth user research to uncover pain points within the platform by shadowing customer onboarding sessions and leading 1:1 interviews. Partnered with the sales team to prioritize key challenges, ensuring design efforts focused on the most impactful improvements.

Design & Prototyping

All designs followed the principle of not reinventing the wheel for existing meeting platform features. This was crucial because the product itself was an innovative new offering, and we wanted to minimize the learning curve for users.

However, features like Spotlight, POV, and 360° panning live stream had few precedents to reference. In these cases, our team adopted a design thinking approach, drawing inspiration from real-world objects such as laser pointers and binoculars to innovate and refine the user experience.

Development & Implementation

Leveraged agile development methodologies to build the platform from the ground up. Collaborated with the development team to understand the technical feasibility of the features introduced. Prioritized the features on the product roadmap based on user preferences and technical feasibility.

Testing & Optimization

Led a team of interns in conducting usability testing across multiple devices and platforms to ensure compatibility and performance. Collected user feedback through beta testing and iteratively refined the app based on usability metrics and user satisfaction.

For eg: In a VR meeting room, we needed to ensure that all participants had a shared experience of the live stream, regardless of their position. This required designing solutions that accounted for avatar positioning and how screens shared from desktop and mobile would be viewed in VR. This was one of the many unique challenges at Avatour, where rigorous testing was essential to delivering a seamless cross-device experience.

Challenges

As mentioned above in the design and prototyping section, the platform in itself was a cutting edge technology that almost all design initiatives had very interesting challenges embedded in it. The problem-solving side of me thrived on these challnges and loved to innovate solutions. Some of them are mentioned below:

Ensuring uniform experience across all devices. The range of devices spanned from 2.2" screen camera interface to the limitless design space offered by VR.

Understanding the unique capabilities of each device was essential in this process. For camera interfaces, I implemented horizontal scrolling and pagination to prevent compromising the legibility of icons on the screen. I also designed notifications to inform users of updates on pages they weren't currently viewing. For VR, the challenge was ensuring users remained focused on key features and icons without becoming distracted by the expansive virtual space around them. To address this, I leveraged Oculus’s native interactions and UI placements, allowing users to transition seamlessly from the Oculus homepage to the Avatour app. I applied Jakob's Law of UX Design here, ensuring the VR experience met user expectations and felt intuitive.

Panning vs scrolling on touch interfaces (mobile, tablet)

Given the platform's 360-degree panning feature, it was important to differentiate panning and scrolling interactions. To achieve this, all scrollable content was placed within separate containers, while the 360-degree panning area was defined as a distinct container. This modular approach enabled efficient organization of features across different devices.

Solution

The final platform design ensured a seamless meeting experience for both hosts and guests, regardless of the device, by leveraging the inherent characteristics of each device, such as screen size, space, and interaction capabilities.

Meeting Platform

Key Features:

Modular design across devices
360-degree panning for immersive video navigation
Dynamic tiles that adjust based on content type (2D presentation or 360° live/prerecorded video)
Categorized presentation modes for live streaming
Option to hide participants for enhanced immersion on mobile, desktop, and VR
Device-specific interactions tailored to screen size and capabilities (e.g., 2.2" display for 360 cameras and limitless space in VR)
Workspaces for asynchronous collaboration and file management

DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.
DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.
DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.
DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.

DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.
DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.
DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.
DESKTOP DESIGN
A modular design approach where the 360-degree live-stream, participant list, menu, and assets are in separate containers and can be opened/closed independently
Virtual reality app DESIGN
The picture shows the design for sharing an asset during a live-stream. User can pull up the asset list and select an asset to share during the stream. Other participants are hidden in this view. The design implements a personal vs shared space approach depending on the features.
MOBILE design
Dynamic hiding of the secondary menu when the primary menu is opened avoids clutter of options and allows user to focus on the current user action.
360°CAMERA INTERFACE DESIGN
Pagination helps reduce clutter and enhances usability on a 2.2” screen by ensuring a clean and organized interface. The menu opens with a tap, and icon sizes are optimized to minimize selection errors on small screens.

Results

Enhanced User Experience

Created a consistent user experience across devices for both guests and hosts, significantly reducing the learning curve and decreasing support team inquiries by 50%.

Positive User Feedback

High user satisfaction ratings and positive reviews highlight the app's intuitive interface and proactiveness in addressing user pain points.

Increased User Engagement

By addressing user pain-points and by introducing workspaces for asynchronous collaboration, we were able to increase user engagement by 40%

Follow me on other channels

ADPList

Navigation