Designing Kumu's For You page

Project overview

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 10x experience of content discovery on the homepage

Approachable

The homepage is inviting to new and existing users to browse through livestreams. The design should not be intimidating or difficult.

Straightforward

The homepage empowers users to discover relevant content tailored to their likings and behaviors.

Empowering

The homepage communicates clearly to users how their recommendations arrive to them through the app's help. 

Key evidence

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

Information architecture and flows

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:

  • Personalized livestreams sections
  • Category-based filters
  • Existing stream-type filters

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

Explorations of different for flows and information architecture

Design phase

Gathering feedback

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

Wireframes created for the For You page and the filter feature

Design phase

Stream-type filters on the homepage

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:

  • All (Previously "Hot")
    • To keep the design approachable and honest with how this section consists of all livestreams up at the moment
  • Newbies (Previously "New")
    • To keep the design honest, the true logic of this section is catered towards showing newbie streamers.
  • Solo
    • This is a new addition, as previously, only Group or Multi streams could be filtered on the homepage.
  • Multi (Previously "Co-host")
    • Since this is a recurring term used for Kumu features

Note: Audio, Teams, and Shop were retained as they were clear with users.

Previous filter chip design

Previous filter chip design

Prototype of new filter chip design

Prototype of new filter chip design

Sections under For You

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:

  • Top Picks: streams Kumu wishes to feature and give special attention to, such as gameshows, Kumu exclusive content, and more
  • Streamers you've watched before: based on streams a user has watched before of streamers they may or may not follow. We ensured that there would be an appropriate threshold in the watch duration before the streamer appeared in this list. The earliest they see this section for new users would be on their second day.
  • Streams you might like: based on their watch activity and other factors such as their interests
  • Trending right now: based on what's popular with what others are watching, which may be relevant to the user.
  • Interest-based sections: a dynamic set of sections based on interests the user has inputted during sign-up
    • Through a later release, we enabled users to edit their list of interests through the For You page.
Prototype of the different sections under For You

Different sections under For You

Category-based filters

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

Prototype of filtering feature

Feedback-driven revisions

Filter button design

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

Previous filter button design

After

Revised filter design

Revised filter design

Order of sections

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:

  1. Streamers you've watched before
  2. Streams you might like
  3. Top picks
  4. Interest sections: depending on the user's inputted interests
  5. Trending right now

After:

  1. Top picks
  2. Streamers you've watched before
  3. Streams you might like
  4. Trending right now
  5. Interest sections: depending on the user's inputted interests
Switching the order of the sections found in For You

Switching the order of the sections found in For You

Top picks vs. Trending right now

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

Old design without Top Picks caption

Previous section design of Top Picks

After

Revised design with Top Picks caption

Revised section design with caption 

Released design

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. 

Metrics of the redesign

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

Previous homepage

New homepage

Lessons learned

Personalization within the synchronous realm

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.

Prioritizing honesty and approachability in design

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.

Cohesion among content discovery features

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.

Interested to read more case studies?

Check out my other works below ⬇️

Kumu Livestream Setup

Full-time, Product Design

ZAP Mall

Internship, UX Research, UI/UX

UnionBank 1UHub

Full-time, Product Design

Thanks for stopping by, let's get in touch!

Want to work together? Got a project that you want to talk about? Got any playlists you want to recommend? Feel free to drop me an email or message.

Designed and built by Arvin Almario