With livestreaming at the core of Kumu, the company wants users to quickly find the content they would most likely enjoy and want to consume to continue using the app. However, we saw that a large percentage of new users do not watch a single livestream on day 0 of account creation. Likewise, one insight from user research showed that when users are overwhelmed by the amount of livestream options on Kumu's homepage, they search for topics they're interested in. This pointed us toward creating an improved experience in finding relevant content easily on the homepage for our users.
Since we saw that 80% of new users made an effort to input their interests during sign up, we hypothesized that users wanted a more personalized experience in the app in finding livestreams.
Objective: By organizing content on the homepage and creating a more personalized experience, we wanted to increase the percentage of new users who watch a livestream and increase the watch duration of new users in their first 24 hours of using the app.
Previous homepage of Kumu
The homepage is inviting to new and existing users to browse through livestreams. The design should not be intimidating or difficult.
The homepage empowers users to discover relevant content tailored to their likings and behaviors.
The homepage communicates clearly to users how their recommendations arrive to them through the app's help.
Qualitative observations: Based on user research with Kumu's new users, they expected the content on the homepage to be curated based on the input they entered during the sign-up process. They feel misled by the sign-up process as the contents presented did not match the interests they inputted during sign-up.
Quantitative observations: we observed that our altitude metric with regards to watching a livestream at day 0 was hovering at a certain percentage, which we still wanted to raise
After our UX Research team conducted competitor research of different apps' methods for content discovery on homepages, I started by creating different user flows and page structures of how a user would navigate through the page with regards to the following features:
Before designing wireframes, I explored these flows and ways to organize the information architecture. This helped me map out which pages contain sections using a vertical or horizontal scroll. This also helped me see each structure's pros and cons with how users would navigate through these different sections to find relevant content.
Explorations of different for flows and information architecture
Throughout the design phase, I continuously asked for feedback on my designs. The designs were critiqued in the design team's weekly Design Critique meeting. At the same time, I openly sent out my designs to be critiqued by product managers, Kumu's Chief of Product, engineers, and QAs. Since I wanted to continuously elevate my designs further, it was vital for me to gather as much feedback from different standpoints, so I could keep on iterating to get a better experience.
Wireframes created for the For You page and the filter feature
Since I wanted to organize content in an approachable manner, I decided to revisit the existing stream-type filter chips at the top of the page. The previous design and experience had poor accessibility due to the hard-to-read text, and the filter descriptions were unclear. Users were misled to believe that livestreams under the "New" section were made up of streams that went live recently, but in reality, it was made up of newbie streamers.
The filter chips are as follows:
Note: Audio, Teams, and Shop were retained as they were clear with users.
Previous filter chip design
Prototype of new filter chip design
Since the For You section was planned to consist of personalized sections and other relevant sections for a Kumu user, I used horizontal sections to organize different livestreams together. The different sections are as follows:
Different sections under For You
On the same page, users may filter through livestreams by selecting which type of streams and what type of content they wish to see based on topics that spark their interest.
Instead of a static list of categories, we opted for a dynamic list of topics based on the tags of streams live at the moment. Since Kumu mainly focuses on synchronous content through livestreams, having a dynamic list of content-based filters ensures that a user would find an available livestream if they select a topic from the list.
Prototype of filtering feature
Initially, the filter button was placed on the right side of the screen for easier reach. However, the feedback was that the button could have looked more tappable to others. Since we also saw qualitative and quantitative evidence that users usually looked for content by using the filter chips from left to right, I placed the filter option as the first chip in the set.
Before
Previous filter button design
After
Revised filter design
We got help from our Business Intelligence on the percentage of new users who watch on For You and the relation to each section. We saw that most new users watched streams from Top Picks and watched for a longer time. With this observation, we changed the order of sections to make Top Picks the priority of the For You page. Aside from this, there were user sentiments that they wish Trending right now was higher on the page instead of the last sections since it was relevant for them to stay in the know.
Before:
After:
Switching the order of the sections found in For You
Some users were confused about the sections, Top picks, and Trending right now under the For you page. On the other hand, users found the "Streams you might like" section clear since we added a caption that it was based on their watch activity. To clarify the two sections, I added a caption below Top Picks to explain what type of content they can expect in this section. I added the caption "Featured streams handpicked by Kumu" to show that Kumu is almost promoting these streams to them, whereas the section, Trending right now, has a sense of popularity with viewers.
Before
Previous section design of Top Picks
After
Revised section design with caption
Here is a side-by-side comparison of the previous homepage and the current homepage of Kumu with the For You page and the filter option available to help in one's browsing experience.
For You was A/B tested to continuously improve the experience and the recommendation model before it was released to all Kumu users.
For You was able to generate a 20% increase in new users' average watch duration of livestreams on day 0 of account creation.
Previous homepage
New homepage
Categorizing synchronous content may be more challenging compared to asynchronous options such as posted videos, pictures, and text posts that can be easily revisited. Even if Kumu's content supply relies on what's live at a particular moment, this didn't stop the organization from finding ways to improve the experience of finding relevant content on their homepage.
With the importance of making our users feel safe when exchanging data with apps, they must also trust the experience. Throughout this design, I wanted to avoid any deceptive or misleading patterns. When users needed clarification on the sections Top Picks and Trending right now, I revised the design to provide more honesty on how this Top Picks list came to be and why we're showing it to them. Similarly, we made the "New" section to "Newbie" to stay true to the nature of the list.
Kumu's homepage comprises different ways to discover content, such as the For You page and its sections, the filter chips on top for different stream types, and the category-based filters. Once the For You page was inserted into the picture with the different sets of interactions, the page needed to remain cohesive and not overwhelming. It was a good choice for me to spend time mapping different flows and information architecture explorations to understand how each feature influences the other, even before wireframing. In the end, I chose a design and structure that was simple and clear while at the same time empowering enough to help users find relevant content.
Check out my other works below ⬇️
Full-time, Product Design
Internship, UX Research, UI/UX
Full-time, Product Design
Designed and built by Arvin Almario
