Heygo - Tour Interface
2021/2022
The Heygo tour interface is the heart of the product enabling users to view the immersive experiences whilst being able to connect with the guide and other users.
Project brief
Role
Product Designer
Team size
1 PD, 1 PM, 1 FE Engineer
Platform
Web
Tool stack
Figma, Notion, Amplitude
Project duration
8 weeks
Context
Heygo was a virtual travel platform that offered live-streamed guided tours worldwide, allowing users to interact with tour guides and other users through both web and native apps. The tour interface sits at the heart of the product enabling users to view the livestreams and interact with the guide and other users.
Problems
As revealed by data and user research the existing interface faced two major problems at the time:
- Lack of immersion
- Inconvenient position of the postcard button
The postcard function exceeded expectations, with users taking 12 million postcards to capture lasting memories from their tours. We also hypothesized that users who tried the feature at least once would be more likely to be retained. However, the postcard button's position on the top right side of the screen made it difficult to access, particularly on smaller screens.
The interface lacked visual hierarchy and was only partially dismissible, drawing attention away from the video and causing distractions for users.
Research
I conducted research on popular platforms like Twitch and YouTube to create an immersive video experience for Heygo. The analysis showed that minimizing the interface was crucial for immersion while keeping an integrated chat was preferred by users.
Accessibility was also a priority, given our higher percentage of vision-impaired users. To create a user interface that met Heygo users' unique preferences and maintained immersion and accessibility, we collaborated heavily with the Front End Engineering Lead.
This ensured we did not hit any constraints with the streaming technology or older user devices due to memory limitations.
Goals
Collaborating with the Product Manager, my role as a Product Designer was to address the following objectives based on research as well as business and technical requirements:
- Create a more immersive experience
- Make better use of the postcard function
- Maintain essential features: chat, tipping, postcard, map, and utility functions
- Design an adaptable interface for future feature additions or refinements
- Ensure accessibility for users with vision impairments
Capture the Magic 🔮
Bringing postcards to the forefront, we positioned the postcard feature at the bottom center of the screen. Taking cues from camera apps, I aimed to create a more immersive and realistic experience for users, while also improving accessibility through a larger touch area.
To further streamline the experience, I added a small tray next to the postcard feature, allowing users to easily access their recently shot postcards. With these design decisions, I made sure the postcard feature was prominently displayed and easily accessible on smaller screens.
Only there when needed 🫥
I conducted research on other products and found that not all features of the user interface needed to be accessible at all times during a tour. To improve the user experience, I implemented a fade-out effect that activates after 10 seconds of inactivity. This keeps the interface unobtrusive, allowing users to fully immerse themselves in the tour experience without distractions.
I recognized the postcard button as a frequently used feature during tours and made sure it remains active and accessible even when the rest of the interface fades out. I added a dead zone around the postcard button to prevent accidental activation of other interface elements, maintaining an immersive and focused experience throughout the tour.
Encourage interaction 💬
The chat interface for Heygo allows for interaction among guides and users. To make it immersive and accessible, I designed a versatile interface that can be tucked away when not in use.
I also incorporated system messages like tip announcements and new followers, and added differently colored chat bubbles for messages ending with a question mark to ensure quick identification of questions in busy chats.
The interface also accommodates various user roles, creating a sense of community and enhancing the interactive experience.
Mobile optimization
To ensure an immersive experience across all devices, we revamped the mobile interface entirely. Previously, mobile users encountered a scaled-down version of the desktop experience, making many UI elements too small to use effectively.
Our primary objective was to provide users access to all essential features while enabling them to actively participate in the chat without missing any tour moments. As a result, we designed the portrait view to be a dedicated compromise between chat and video, while the landscape view focuses on delivering a fully immersive video experience.
Impact
Following the launch of the updated interface, we observed a significant increase in the number of postcards taken and chat participation.
Upon surveying users, we found that the more discoverable postcard feature was especially appealing to new users. Additionally, chat participation grew due to the chat interface's improved subtlety, making it more accessible to vision-impaired users and encouraging previously disengaged users to use the feature.
Learnings
One major learning from this project was the importance of prioritization. Redesigning a surface with so many possibilities poses a risk of getting lost in those possibilities instead of focussing on the core jobs-to-be-done. By prioritizing the most important elements of this interface for users and the business I managed to spent time on the elements of importance rather than chasing possible additions of unclear value.
