Date
2021.08 - 09
Role
Product Designer
Responsibility
User Research, UI/UX Design
Co-workers
Product Owner, Product Designer, FE/BE Engineers, Marketing
01. Objective
By providing live streaming replays, we can increase the proportion of users who reserve live streaming and reduce the number of users who complain or request refunds due to missing the live stream, thus decreasing the workload for the customer service team.
02. Role & Deliverables
I am responsible for designing the live streaming product from 0 to 1, as well as all subsequent iterations. This includes designing two different types of live streaming, optimizing each live streaming functionality, and the live streaming homepage, among other things.
03. Challenges
At that time, there were no other educational products in the market that had launched their own platform with a live streaming product offering replay. Therefore, there were no competitors to reference. It was an innovative product that we were the first to introduce, and I felt both challenging and excited.
04. Outcome & Impact
The live stream replay feature effectively increased the reservation rate by approximately 7.82%, resulting in increased website traffic. It also reduced the customer service workload in handling refund-related issues caused by users missing the live stream.
New Product : Live Streaming
Hahow is an online learning platform that began by offering fundraising video courses. Its aim is to provide a platform where anyone can learn any skill at any time and place.
One of our goals is to help users establish a knowledge context and find learning starting points. To cater to different preferences in transmitting and receiving knowledge, we want to offer multimedia forms of knowledge.
However, live streaming is one of the most mature and familiar forms of media in the market, making it an ideal choice for both creators and viewers. Therefore, we have chosen live streaming as our new product form.
Project Background
Problems
π¨Β Inconsistent Reservation Rates
- While one of the goals of Live Streaming was to increase traffic, we observed that the reservation rate wasn't consistent after the initial launch.
π§Β Gap between Reservations and Actual Participation
- We also found that while a creator's average reservation rate for their live streams could be as high as 77%, only about 40% of the total reservations actually tuned in to watch the live streams, indicating that 60% of users did not participate.
Opportunities
π₯Β Desire for Replays
- Furthermore, we noticed that most users expressed a desire to watch the replays of the live streams, mainly because they often missed the live stream schedule or wanted to review its content.
- Based on past experiences and user surveys, there is a continual demand for the ability to watch replays.
πΒ Benefits of Replays
- Users can feel more at ease by knowing that they can still catch up on content even if they miss the live streaming, which can help to reduce hesitation and concerns before making a reservation.
Project Goal
Assumption π
For users who want to watch live streaming, if there is a replay function available, it will increase their willingness to reserve the live streaming. This is because the replay function ensures that users won't miss the content of the live streaming and it will affect the reservation rate of the live streaming.
Possible Solutions
User Flow
A live stream can be replayed after it has ended; however, there is a time limit for the availability of the replay, the replay can only be viewed for a maximum of 30 days in the first phase. Therefore, I have created a user flow for each type of live stream.
Wireframe
To optimize both types of Live Streams, I needed to consider both the Original and New Pages.
- For the Original Live Stream Page (marked as orange), I added more details about replay information to make users aware that there would be a replay available starting at 12:00 pm the following day.
- For the New Pages (marked as yellow), I added three new statuses based on the replay user flow, as well as a clear guide outlining the available replay time period.
Final Design / Mockup
Highlight 01
Customized Replay Information and Communication for Different User Scenarios
Based on the original design, I added corresponding replay information to each page at different time points and user statuses. For each scenario, I designed the most suitable communication message for the user. For example:
Obvious replay Information
For users who are considering purchasing a live stream, I placed the replay time information directly before the main call-to-action button to ensure that users do not miss it.
Clear replay time everywhere
When the live stream enters the "about to start" phase, I add detailed replay time information to the lower right corner of the live video. This allows users to easily identify the replay time even while watching the live stream.
Thoughtful copy for everyone
To collaborate more smoothly with the engineering and operations teams, I created a document detailing the changes in communication copy. I listed different communication copy for each type and state of live streams, making it easier to align and organize all the changes and corresponding locations of the copy.
Highlight 02
Created New Processing Status with Clear Replay Time
After a live stream ends, the video undergoes processing before it can be made available for replay viewing by users. To inform users of the video's processing status, I designed a status change to 'Live stream ended, video processing in progress...' and provided the time when the replay will be available for viewing.
Highlight 03
Improved Live Stream Navigation with Clear Tags and Latest Sorting on My Learning Page
Given that live streaming has various complex states, I have designed clear status labels for the outer layer of the live streaming card on my learning page. By default, they are sorted by the distance between the live streaming time and the current time, from nearest to farthest, allowing users to quickly find the live streaming they need.
![[Web view] My learning page in live stream tab.](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/d3d10454-6036-46ed-95da-d16a57a65263/Frame_2177/w=3840,quality=90,fit=scale-down)
![[Mobile View] My learning page in live stream list.](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/bdd1e6ed-6d57-4bb7-9e76-766f5d6c4c1f/home_375/w=3840,quality=90,fit=scale-down)
Welcome to visit the "Live Streaming Pageβ right away! π
Outcome π―
# 01
Live Replay Function Increases 7.82% of Reservation Rate ππ»
After live replay function launch, we observed average reservation rate of teachers who did live streaming both before and after launch. The result showed 7.82% increase, confirming the hypothesis that replay function can effectively boost reservation rate.
# 02
Live Replay Function Boosts Engagement and Attracts New Users π
We also surveyed users who watched replay videos and found that 60% came to watch replay because they missed the time, while 36% discovered the stream later and directly watched the replay.
The replay function not only satisfies users' demand to catch up on live streams, but also enhances the long-tail effect, attracting users who were previously unaware of the live stream to revisit the site.
# 03
Live Replay Function Meets the Needs of Users Unable to Attend Live Streams β°
Furthermore, we discovered that approximately 30% of replay video viewers had already known they couldn't participate in the live stream but made a reservation in advance, because they were aware they could watch the replay video later.
This suggests that the replay function satisfies the demands of users who want to watch live streams even if they cannot match the live streaming time.
Takeaways π‘
01. General but clear might be better than over customize.
Since multiple page statuses were created to accommodate different live streaming states and user identities (such as login and purchase status) , I tried to provide customized copy for each user scenario initially, but after reviewing the layouts and scenarios, I realized it would increase complexity and make maintenance difficult. So, we wrote broader copy that balances customization and consistency, effectively guiding users without causing confusion.
02. Remember to review all the statuses and manage design elements carefully in the beginning.
Because I didn't realize the complexity of page states until the end of this project, I had to go back and adjust the design elements to simplify their rules and types. This experience taught me the importance of reviewing all states and establish design element rules at the beginning of the design process.
Want more? Check out my other projects below.
