Private Messaging on the Live-streaming Platform

Role
Product Designer

Time
11.2023 - 03.2024 (5 months)

Company
Multi Media LLC

Skills
UX Design, Usability Testing, Competitive Analysis, UX Research, UI Design, Graphic Design

Tools
Figma, Maze, AgilePlace (LeanKit)

 

As a Product Designer at Multi Media LLC, I enhanced video streaming, streaming controls, and chat features for the live-streaming platform with 1 million daily active users.

One notable feature I worked on was revamping the creator interface to help creators communicate better with their valued viewers.

Introduction

During live streams, viewers have multiple ways to interact with creators. One key channel for receiving special attention is the private messaging feature, where viewers can pay extra to send private messages. However, many viewers reported not receiving responses, which has led to lower engagement.

My Role: I led UX research, including competitive analysis, surveys, and usability testing, and designed the entire interface for this feature. The goal is to enhance viewer engagement and ensure timely responses from creators.


Problems

In the original interface, creators often missed responding to viewers' private messages. Upon mapping out the user journey, we identified the following pain points:

😵‍ Switching between public and private conversations involves too many steps

😵‍ Small clicking areas make it difficult for creators to navigate

😵‍ Outdated visual style undermines user confidence and hinders their willingness to stream on the platform

 

Who are the users?

The primary user groups on our website are creators and viewers. For this feature in the creator interface, we focus on researching creators' interactions and identifying their needs.

Creators

  • 110K active creators every day

  • Around the world (mainly from the U.S. and Colombia)

  • Goal:

    - Earn income through viewers’ tipping

    - Increase followers and maintain a loyal audience

 

Design Solution

Final Design

 

Impact

By streamlining the creator interface for faster private message replies, the goal is to enhance viewer satisfaction, leading to increased viewer spending and higher revenue for the company.

🎨 Due to the NDA and certain constraints in the visual design, I rebranded the style of the website for this presentation, but the features and layout remain similar to the actual site.

✍️ Design Process

💁 Who are the users?

1. Both desktop and mobile are important to this data dashboard.

According to personas, end-users use desktop and mobile devices to track daily data. The data charts should be displayed the same sets of data on both desktop and mobile screen sizes without discrepancies in interpretation.

2. The end-users have different authorization levels.

Because the end-users have different authorization levels, it’s important to take the absence of some elements into consideration. For example, if one of the charts is hidden to some users, the user interface should remain understandable and beautiful.

💁 How did I decide what to display on the homepage?

Given interview results, users think “Revenue” and “Customer demographics” information is relatively important to them for making business decisions. Therefore, I discussed with stakeholders and agreed to put these two pieces of information on the first page.

I visualized the following types of data information:

 

✍️ Design Ideation

Revenue Overview

Customer Demographics

⚡️ How did I design tables on mobile without losing their purposes and readability?

I performed competitive analysis on 5 competitors to know how they design data charts and data tables on desktop and mobile screens.

1. Some data charts should be transformed to another format.

Depending on the number of columns and rows, some data charts can’t be responsive. Transforming to a different format from Desktop is necessary.

2. Collapsed data table is fully responsive.

To design a data table with the collapsed column, users can swap to see all the data on mobile devices. Also, the primary column can be fixed in one place, so users can compare data easily.

Table design solution:

Given the findings from the competitive evaluation, I designed the following data table that is responsive across different platforms. When it comes to contemporary comparison, using collapsed data tables on mobile screens helps users to compare data efficiently.

Desktop

Mobile

🎨 Design System

  • I created a design system and style guide to help maintain consistency across the product. Users can find the systems familiar and easy to learn. (Increase learnability)

  • Design system can reduce developing redundancy and help future maintenance.

 

Menu icon

 

🤝 Due to non-disclosure agreement, I can only show part of my designs here. Please reach out to me personally if you have any questions regarding my work.