2021 Trovo Recap
My Role:
UX Designer
UX Researcher
Table of Contents:
Project OverviewDesign Highlights
The Process
Project Overview:
Trovo is a live streaming platform for gamers. The 2021 Trovo recap released right after the big “Exiting Beta“ event, so we wanted to make this recap special to continuous the event vibe. We studied the recap formats that currently released in the market, understand what content do our streamers and viewers interested the most, and design the recap based on the feedbacks.
Result:
500K DAU during event
80%+ feedbacks are positive
Challenge:
How might we create a recap that engage every user and drive their intention to share the recap on social media(Get more exposures).
Solution:
The recap aims to create a personalized and fun experience that drives users to share this recap online. Each user will have access to a personal digital game room that is generated based on the user's data. Users can explore their recap reports hidden in the objects inside their room through a gamified experience. The report is designed in 4 versions to cover both streamers and viewers from experts to beginners.
Design Highlights:
A Design that Resonates
Playing games in a nice decorated game room is part of the gaming/streaming culture. The recap interface is designed in a game room format with all the decorations generated based on users’ data. In this way, we create an experience that resonates with our users.
A Gamified Experience
Users browse their “5. report” by playing the “finding hidden object“ mini-game with minimum challenge. Users click on “1. Glowing object“ to view different reports. The “2. Progression Bar“ can also be clicked to show the reports. “3. Character Tips“ will guide users through different stages. After collecting all reports, a user can unlock the “4. final overview”
Easter Egg
We put little easter eggs inside the room to promote Trovo’s brand message or social media account. For example, if a user clicks on “1. Comic“, the character will tell the person to follow our Twitter account for more Trovo comics.
Engage Everyone
The results were designed to cover all users with in mind their different user progression. There are 4 versions for each result to cover both streamers and viewers from experts to beginners. Below is an example of “Community Info” for different users.
Multi-Device Adaptation
The recap was prepared for both web users and mobile users. The interface was designed in a ratio that also fits the mobile screen. In addition, a bleed area kept all the hot spots in a safe zone and make sure there are space for navigation UIs.
The Process:
Research
Study recaps on the market and find out popular contents. Communicate with our users to understand their preferences.
Ideation & Prototype
Create moodboard. Sketch out ideas, structures and story settings. Build playable prototypes for testing purposes.
Getting User Feedbacks
Send out the playable prototypes to community leaders to gather their opinions on the event format and data types.
“How to design a good recap?”
Competitor Analysis
We studied different recaps that released in the market. Understand what they include in their content, how they present their result and what interaction/experience they trying to create.
Key takeaways:
Think About Every User: The recap should include different types of data, for users with different progressions
Individual Experience: Customization might have a positive impact on motivating users to share their results.
“How to set a design approach?”
Ideation
Using moodboard, sketches and wireframes for quick iteration. Effectively sync and align with the rest of the team.
“How to communicate with the team?”
Wireframes & Prototype
Use wireframes and prototype to demonstrate the user flow and detailed interactions. It is meant for collecting quick feedbacks by doing user testings. Also, providing an accurate reference for visual designer to create all the 3d assets and visual effects.
“How to make sure the design meets users expectations?”
User Testing
We sent out the prototype to our discord community opinion leaders and got their feedback. We then summarize their feedback into bullet points as a reference for design iterations.
Looking for something else?
Browse the next case