Go Live Tool

My Role:

UX Designer
UX Researcher


Table of Contents:

Project Overview
Existing Problems
Solutions

Project Overview

Trovo is a live streaming platform for gamers. Streamers decorate their videos with custom overlays to present their visual identity. But they usually decorate via third-party applications. We as the platform wanted to provide our own tool that enhances users' experience in customizing stream overlays and quickly adjusting live settings.

We chose to focus on building the Go Live tools on the Trovo's mobile application as there aren’t many third-parties are supporting mobile streaming decoration.

Existing Problems

Problem 1 - Floating Widget usability issues

1. Tiny Chat Space

The float window has a limited area for displaying chats. It reduces readability and makes it hard for a streamer to track down messages when in Live.

2. Weak Horizontal Layout

Although the flow window can be moved anywhere on the screen. there will always be certain buttons that are difficult to reach. Because those buttons are located in 3 different corners

3. Keyboard Blockage

While typing, the keyboard will block the majority of the float window. Making the chats hard to be seen while responding to those messages.

Problem 2 - Customize Stream Overlay not scalable

1. Minimum Overlay

The Current version only supports adding 1 overlay and it has to be an external web links. It has not fully covers users’ needs as 44% of users require more than one overlay.

2. Not Intuitive enough

The is no direction to the entry of the extra setting menu. Users will have to spend extra time understanding how things work. 33% user entered this feature but only 10% of them completed the customization.

Solutions:

Solution for Problem 1:

Restructure Floating widget. Increase the size of the widget, make sure all the buttons are easy to be reached in both vertical and horizontal layout. Fix widget location to build user habit of knowing where to click buttons.

More Info carried in minimize float widget

Now, streamers will be able to track their live viewer’s number, viewing chat feed pop up, without opening the expanded panel.

Large widget size to enhance chats’ readability

Users tend to not open the panel while playing. No matter what size of the panel is, it is going to affect their performance. So we increase the panel size to improve the readability, meanwhile raising the background opacity to make the text clear.

Horizontal Layout Optimization

The new design expanded the size of the horizontal layout and fixed its position. The buttons are laid on the left and right edges for ease of reach. This solution builds muscle memory for a streamer to quick-adjusting stream settings during intensive gameplay.

Solution for Problem 2:

Adding more overlay types. Supporting multiple layers. Reduce the length of user flow. Designed an always displayed menu to show users all the available options.

Intuitive Design

Feedbacks and guides are important for operating complex tools. For our solution, we provide instant feedbacks (visuals and vibration) and guides whenever a user move, rotate or change any overlay to help users track their actions.

Looking for something else?
Browse the next case

Valitee >