Livestream Web 3.0
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.
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
Has better visual balance, the user's attention is spread evenly. Users can focus on each panel individually.
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
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.
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.
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
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
TESTIMONY - MUJI
MUJI user Firework ran their first Livestream shopping event using Firework at the begining of Dec 2021.