Trovo Team
My Role:
UX Designer
UX Researcher
Table of Contents:
Project OverviewDesign Highlights
The Process
Web to Mobile
Project Overview
Trovo is a live streaming platform for gamers. We saw an increase in spontaneous streamer groups and found potential values behind those groups in regards user engagement and business opportunities. Our team designed the Team feature as a tool for streamer groups to build and organize their communities. It also creates opportunities for future agency collaborations.
Result:
5.7%
Increase in average streaming time
11%
Increase in login rate
50%
Increase in new subscribers & followers
UX Challenges
How to design an intuitive flow of using the team that prevents users from running into obstacles
How to implement Team feature into the current platform structure and connect with other features seamlessly and logical correctly
How to maintain a similar user experience on both web and mobile end team feature
Solutions:
Team feature is designed based on a detailed user journey map that use scenarios to foresee different situations. It considers not only normal scenarios but also empty and extreme user cases to prevent users from running into obstacles. We collaborate with other feature owners to find the best way to connect the team feature into platform’s structure. Team design for application further splitted user flows into multiple steps with well designed gesture controls to transfer a similar experience from web content.
Design Highlights:
Team Creation:
How to input complex information?
The team creation structure is designed to prioritize important information. The mandatory, public information is listed at the top section of the form. The optional, internal information is listed at the bottom section of the form. Use sticky elements to fix buttons on an easy accessible location where reduces time for users finding navigations.
Team Management
How to display information for different roles?
A team includes different roles with different permissions, and some of the information is not available for basic roles. In this case, team is designed in a modular-based layout. When there is a display adjustment due to permission change. The interface maintains a consistent look simply by enabling or disabling modules.
Team Analytics
How to guide users through complex information?
Clear Information Structure: Constrain different data with modules so page won’t be overly long because of too much data.
Giving Quick Feedbacks: Hovering on specific areas will pop up tips to quickly give users additional information.
Team Public Page
How to promote Team?
The page structure is designed to promote team rather than individual streamers. So the team info is placed at the very top of the layout to create a prioritized hierarchy. To emphasize the core business of the platform. We believe teams should promote themselves through their video content. So, the centred video block takes up the majority of the space.
The Process:
Step 1: Understand The Task
Understand why we need to build Team feature, and what benefits will it brings to our platform. Knowing what our users' expectations are.
Study how other platforms and online games implement their team. Find inspirations for new ideas that will enhance team experience.
Step 2: Solution Alignment
Using scenarios to analyze users’ behaviour and mapping out the user journey. Adding stages to complete the flow. Use the journey map along with quick main page wireframes to align with the team. Make sure the solution is reasonable and executable.
Step 3: Interaction Design
Refine the information structure. Dive into detailed interaction design that is intuitive yet consistent with the platform’s standard. Build complete design documentation to explain each interaction and different feature paths to visual designers and developers.
Mapping User Journey
Mapping out user journeys based on scenarios. Divide the process into three. Mark each stage for different roles. It is easy to make quick changes and helps the team to understand the feature from a high-level perspective.
Drafting Information Structure
Create quick wireframes to play around with information structure. Meanwhile, it gives an early stage visual reference for team alignment.
Interface & Interaction
Dive into detail design. Split the entire process into multiple parts. Provide a design documentation for each part that considered every use case and elaborate details about each interaction.
Web to Mobile
Splitting the web contents into multiple steps makes each page clear because it helps users concentrate on one single task at a time. In that way, it prevents user lose their traction when scrolling to view complex information.
Design thinking applied to the transforming
1. Use Gesture Wisely
Horizontal scroll is more natural on mobile screens with gesture control. It is good for viewing wide tables.
2. Pack Up Information
Use pop up panels to contain secondary information. Simplify the main screen’s structure
3. Avoid Repeated Gesture
Expand module height on the mobile screen to avoid repeated scrolling gesture controls.
Components
General functions are designed into components that can be easily reuse. Each component should consider every possible situation (empty state, error state, extreme state, etc.) to better supports a seamless userflow.
Looking for something else?
Browse the next case