Livestream Web 3.0

Overview

Web 3.0 is all about decentralization, walled garden is no longer the dominator of the user, and data.

Especially for businesses and brands, having a direct relationship with customers and being able to use, and control the data is crucial in the future.

The key question we set out to address is: How to design the WEB live-stream experience to be able to adapt to different devices and contexts.

Through a series of prototypes, we explored solutions across a range of channels. I collected cross-team feedback via sketch, low-fi mockup, animated prototypes. The final design is a unique butterfly alike 3-panel design in which wings can be folded.

Offering

Rapid Prototyping

Data-driven Design

Product Design

UX\UI Design

ONLINE SHOPPING TREND

Different from the walled gardens social media platforms. On WEB, especially under the e-commerce context, the experience for both mobile and desktop is important.

"How might we offer an open web live-stream experience that can handle all devices that connected to the internet even for a microwave?"

SKETCH & FEEDBACK

The best way for me to start design is to quickly get feedback from peers from different departments.

A quick sketch is the best and most straightforward way to get everyone to understand what are the concepts before I spend time working on the actual design

2 DIRECTION COMPARISON

The main debate is around is a 2-panel design better or a 3-panel butterfly design better. I don't have enough evidence to convince either party, so I did a eye-tracking user testing and show people the pro and con

3-panel design

Has better visual balance, the user's attention is spread evenly. Users can focus on each panel individually.

2-panel design

The user's attention is more focused at the center. The Livestream itself will be at the center of the attention.

LIVE DEMO USER TESTING

After decided 3-panel butterfly design is the better direction because user can focus on each panel separately and it also has better visual balance. I want to assure the decision is right by using a real-life demo testing

RESPONSIVENESS

The level of responsiveness needed for this project is not only about resizing or adapting to different devices. More importantly, it's about defining and guiding users' attention under different contexts.

SCREEN-CHAT&EMOJI

Chat is the fundamental interaction audiences use to engage with the host. The design considered quick emoji response, the max height of the chats, and how to display a pinned msg.

LIVE-SHOPPING

Shopping is the core function of the live stream. The design focused on the "buy as you watch" experience. The difference between live shopping and normal shopping checkout is that we want users to watch what the host is talking about while making the purchase so that they will have higher purchase intention and rate

QUESTION&POLL

User engagement is key to running a successful live stream. We designed the question card and poll for the host to collect feedback from the audience while keeping them engaged