Huddl VR

Virtual reality app and platform to facilitate collaboration amongst remote workers.

Role: UX Researcher | UX/UI Designer

Overview

As a result of the pandemic, many companies have shifted towards remote work, making it necessary to have reliable platforms for remote collaboration and meetings. Virtual reality is a new tool that has the potential to transform the way we learn, explore, and interact in various fields. It has the capability to allows teams to interact with each other in real-time, regardless of location.

Challenge

Remote work has surged post-pandemic. While it offers flexibility, loneliness and relationship-building issues arise, often due to inadequate collaboration tools. VR shows potential in tackling these challenges, yet health, learning curve, and inclusivity concerns persist.

Goal

My aim is to create a VR app fostering real-time social interaction among remote teams. This platform will feature diverse collaboration tools, prioritizing user-friendliness and efficiency. While addressing health, safety, privacy, inclusivity, and accessibility concerns is pivotal.

DISCOVER PHASE

•••

DISCOVER PHASE •••

Market Research

I began by researching the market, gauging its current state, trends, and growth areas. This revealed remote team challenges and opportunities for VR technology to alleviate them.

Competitive Analysis

Next, I performed a competitive analysis to shape Huddl VR's strategy for competitive advantage.

S.W.O.T

Conducting a S.W.O.T. analysis was necessary to gain a comprehensive understanding of Huddl VR's internal strengths and weaknesses, as well as external opportunities and threats. This process aided in helping me Huddl VR's position and generating solutions by aligning its capabilities with goals.

User Surveys

After thorough market research, I crafted a survey to unveil user expectations.

For deeper insights, I included open-ended questions, capturing users' needs and behaviours. Multiple-choice questions were used for quantitative data, facilitating quick analysis and ensuring solutions aligned with user input.

Key Insights

  • 88.6% of people need to collaborate with remote team members

  • Less than half of the participants have experience using immersive virtual reality technology in the past

  • 65.7% of people are open to using virtual reality for remote team collaboration and meetings, though there are still concerns if a headset is involved in the experience

  • All features in the app should be necessary and have clear benefits for use

  • Adequate security features are needed to keep sensitive company and personal information private

  • 55.7% of people think it’s essential to have support for multiple languages/ international users

  • The majority of users would like to have the option to integrate other applications

  • 62.9% of people believe that virtual reality apps should work with all devices and headsets on the market

UX for VR…

VR is a relatively new technology, and designing for it requires a unique set of considerations and best practices. Here are some key considerations for UX/UI for VR:

  • VR allows users to move around in a 3D space, so the UI should provide feedback on the user's position and orientation. This feedback can include head-up displays (HUDs) and environmental cues to help orient the user.

  • The design of VR user interface should be done in such a way that it reduces the risk of motion sickness, a common issue among VR users. Avoiding fast and sudden movements, limiting user rotation to minimise head movement, and reducing the amount of visual clutter in the interface can all help in reducing motion sickness.

  • VR can quickly become overwhelming with too much visual information. Designers should aim to create UI that is simple and minimal, with a focus on only the most critical information.

  • VR interface design should enable natural interaction. Gestures that are intuitive and mimic real-world actions are effective for users to interact with the environment. For example, the interface should allow users to point, grab, and manipulate objects as if they were doing so in the real world.

  • VR allows users to feel like they are in a real 3D environment. The UI should be designed to provide visual cues that help users understand their position in the environment and the scale of objects. This can include designing objects to be visually proportional to their real-world counterparts and providing feedback on distance to objects to ensure users can reach them comfortably.

SYNTHESISE PHASE

•••

SYNTHESISE PHASE •••

Affinity Map

Through affinity mapping, I synthesised market research, competitive analysis, and user survey data, revealing patterns and insights by grouping observations into themes. The more I organised my observations, the easier it was to identify themes that potentially could have been overlooked.

User Personas

To ensure decisions made going forward were user-centric, I crafted three unique user personas embodying larger user groups' goals and traits. This practice ensured project alignment with user needs.

Empathy Maps

Creating empathy maps helped me understand the target users better and gain perspective on the user’s needs, identify gaps, and generate potential solutions.

Customer Journey Map

Crafting a customer journey map was a vital part of the design process for me. It helped me visualise the entire user experience with the product. This visualisation allowed me to see the user's perspective more clearly, identify moments of frustration or delight, and uncover opportunities to enhance their journey.

DEVELOP PHASE

•••

DEVELOP PHASE •••

I utilised the "How might we?" (HMW) technique to reframe user challenges into innovative, solution-focused questions. By doing this, I started to envision potential solutions for my VR app's development.

Information Architecture

After identifying user needs and goals, I went on to design the website's information architecture - the framework that enables navigation. Considering users may be new to such an app and VR technology, creating straightforward and seamless navigation was vital.

User Flow

I created a user flow for the VR collaboration app at the next stage of the design process. It is crucial to understand how the user will engage with an app by looking at the user flow. In addition to identifying a happy path, mapping out the flow helped identify any issues that may arise and edge cases.

Based on the personas, I chose to look at the user flow for a first-time user opening the app, editing their avatar and joining a scheduled session with their team.

Wireframes

The wireframes below were created with the intention of providing a clear and concise visual representation of the user interface. Simplicity and familiarity in the interface were prioritised to ensure user ease and comfort, promoting quick adoption and minimizing the learning curve for an app involving immersive technology.

To begin the process, I created preliminary sketches and persistently improved them until I arrived at a collection of wireframes. Sketching was crucial in this process because it facilitated quick and continuous revisions.

Wireflow

Wireflows allowed me to map out different user scenarios such as: how a user might create their avatar, integrate other collaboration tools, adjust settings for accessibility concerns or collaborate with team members in a virtual environment. This helped to ensure that the app's design was intuitive and that the user could navigate it effortlessly.

Design System

I carefully selected visual elements to ensure that they worked together harmoniously, not just on the mobile app but also in the virtual space on all devices. In addition to the individual design elements, I also included components that were reusable and modular. These components helped to streamline the design process and ensure consistency.

Logo and Usage

Colour

  • Neutral colours = create a modern and sophisticated atmosphere, which is suitable for a professional app.

  • Neon green = infuses some energy and playfulness into the design, which is essentially what VR would add to the workflow.

  • Pastel colours = a way to colour-code different elements or categories within the app. I wanted users to have some familiarity with the app even if VR was something that was new to them.

Typography

  • Satoshi = simple and clean design, which makes it easy to read and understand on screen. Satoshi's design is also versatile, meaning it can work well in a range of sizes and formats. This is particularly important in VR app design, where text may need to be resized or reformatted to suit different devices or screen sizes.

  • Atyp Display = font's unique and futuristic appearance adds a sense of innovation and creativity to the design, which is particularly important in the world of virtual reality where the focus is often on creating new and exciting experiences for users.

Icons

Grid System and Spacing

  • The spacing scale used to distribute components is based on a 8px grid system, which uses multiples of 8 to define dimensions, padding, and margins of elements on the interface.

  • The designated location for primary UI elements when designing for VR headset is within the markerd area. Placing any elements outside of this area may result in the user overlooking them or feeling uneasy about engaging with them.

  • 12 column grid in use when designing for a VR headset.

UI Components

DELIVER PHASE

•••

DELIVER PHASE •••

Solution: App

Guided by research insights, the solution underscores user-friendliness, accessibility, inclusivity, safety and seamless integration for remote working.

Sign In/Sign up

  • Secure login/signup screens prioritise user convenience and data privacy.

  • Addresses remote work's heightened data security needs.

  • Authentication involves work credentials and email verification for enhanced security.

  • Biometric sign-in established for future logins.

Dashboard

  • The dashboard acts as a central hub, granting rapid access to key features and settings.

  • Utilised nested icons for organised presentation, preventing interface clutter.

  • Clear, identifiable, and labelled icons enhance user navigation.

  • Nested icons establish a hierarchical structure, ensuring easy access to frequently used elements.

Menu

  • Offers customisation of the app, spanning feature preferences and accessibility choices.

  • Strong emphasis on accessibility, with provisions for larger text, dark mode, audio descriptions, and language settings to accommodate users with disabilities.

  • Includes health and safety options, enabling users to establish time reminders and warnings for controlled VR headset usage and mitigating prolonged use effects.

Profile/ Avatar Creation

  • Profile facilitates seamless management of company credentials, personal details, team, and files.

  • Customisation of avatars is pivotal for enhancing presence during virtual meetings.

  • Enhances engagement by gamifying work.

  • Biometric scan and image upload increases realism.

Help/ Tutorials

  • Research shows the majority of users are unfamiliar with VR technology, potentially leading to intimidation among new users.

  • Features encompass app walkthroughs, tutorials, and contact details for support services.

  • Accessible and dependable support fosters user confidence, enabling seamless remote collaboration.

Teams

  • A focal point for project teams, promoting community and remote collaboration.

  • Shared space facilitates streamlined coordination, project updates, and changes.

  • Seamless integration of apps and resources within the team lobby enhances collaboration efficiency.

  • Users can effortlessly generate, oversee, and access virtual sessions, further centralising functionality.

Calendar/ Session

  • Aids efficient schedule management.

  • Direct creation of meetings from the calendar expedites scheduling, saving time.

  • Colour-coded sessions enhance the quick identification of teams with busy schedules.

  • Session entry code bolsters privacy and security, addressing potential user concerns. Ensures confidentiality and attendance by the intended participants only.

Connect Device

  • VR headsets, monitors, and TVs are supported broadening accessibility.

  • Research-driven flexibility enhances user-friendliness and accessibility.

  • Non-VR connections accommodate health issues and budget constraints.

  • Accessible alternatives promote flexible, cost-effective immersive experiences.

Solution: Immersive Mobile Experience

To ensure accessibility, the app offers non-headset immersive sessions on mobile or connected to a monitor. The screens below show the virtual experience users would have once they enter a session on mobile.

Outline of the main rationale underlying the interface design:

  • Clear icon labelling aids navigation on limited screen space, with default tooltips for new users.

  • Video tutorials are available for tool usage (e.g., whiteboards, document sharing) and navigation controls.

  • Privacy is ensured with meeting lock, waiting room creation, and recording notifications.

  • Recording requires the attendee's permission before proceeding.

  • Adoption of a dark theme for navigation and menu settings in line with the design system.

By taking these measures, the VR experience on mobile devices offers a safe and convenient way for users to engage with immersive sessions and collaborate with others in a virtual space right from their mobile.

Solution: Immersive Headset Experience

A VR headset offers full immersion, making users feel present in a virtual environment. The screens below display the meeting space as seen within it, enhancing presence and spatial awareness. This deepens understanding of space, promoting engaging collaboration and boosting productivity.

Addition in VR headset version:

  • Integration of timed notifications to manage VR immersion duration, addressing concerns of prolonged VR exposure to mitigate potential physical and mental effects. Prolonged exposure to VR can lead to negative physical and mental effects such as eyestrain, dizziness, and disorientation. According to my user research, people are concerned about spending too much time in virtual reality and the negative impact it can have on their health. Therefore, the app will help users maintain a safe yet productive VR experience with timely notifications when they reach a specific threshold.

Accessibility.

Accessibility was a central focus during development, with some implementation methods being:

  • Including speech-to-text for users who may have difficulty typing.

  • Provided adjustable audio settings for volume, balance, and audio descriptions.

  • Allowed users to customise font sizes and styles to suit their visual preferences.

  • Incorporated comfort settings to mitigate motion sickness, such as adjustable field of view and movement speed.

  • Ensured the VR app is compatible with a wide range of VR devices and platforms to maximise accessibility.

  • Provided contextual tooltips or tooltips that appear when users hover over interactive elements, offering additional information and guidance.

  • Offered a choice between dark mode and light mode to accommodate users' visual preferences and reduce eye strain.

  • Designed interactions and controls with ergonomic principles in mind, minimizing strain on users' hands, wrists and neck.

  • Included multilingual options and language selection to cater to users from diverse linguistic backgrounds.

  • Incorporated interactive tutorials for first-time users or those unfamiliar with VR interactions.

Reflection

Overall, this project was an enjoyable experience for me, as I am personally interested in XR and designing within the VR space. I found it fascinating to learn about designing a product that allows users to have an immersive experience. The project required me to think beyond the confines of a traditional mobile app and required me to develop additional skills in designing for a different medium.

I found the research phase of this project particularly insightful. I learned a lot about the needs, pain points, and preferences of remote workers who could potentially benefit from a VR collaboration app. However, due to the time constraints of the project, I feel that there was still more research that could have been done.

Future Considertions

Developing a virtual collaboration app for remote workers involves ongoing refinement. With more time I’d:

  • Collaborate with developers to construct a functional VR prototype within the mobile app.

  • Conduct user testing for valuable insights and improved performance. Evaluate both mobile app and VR space using VR headset connectivity.

  • Collect user behaviour data during testing to inform ongoing development, considering AI integration and additional features like file sharing, and screen sharing, with the aim of continually refining the app's utility for remote teams.