Redesigning Kumu's livestream setup experience

Project overview and problem

Kumu is the largest social entertainment app in the Philippines where streamers interact with fans and viewers through their livestreams. Kumu's mission is to be the platform that champions Filipino voices from across the world, creating a vibrant online culture filled with positivity and possibilities.

With livestreaming as the core action of Kumu users, the company continuously wishes to get more and more users to stream on the app with the help of a positive experience. However, based on user research and quantitative data, it was observed that aspiring streamers had some barriers when starting a livestream:

  • New users are overwhelmed when they land on the Setup screen.
  • The setup process was described as too complex, with some features not being utilized.
  • A percentage of users who attempted to start a livestream dropped off. 

Previous livestream setup design of Kumu

The 10x livestream setup experience

Straightforward

The new design contains features that are relevant to Kumu's users. Insignificant features that are not utilized and not value-adding to the experience should be audited out. 

Approachable

The new design caters to both new streamers and power streamers of the app. The design should not be intimidating or difficult for both newbies and experts.

Future-proof

The new design can be easily modified and adjusted when new features and tools will be added on the same page without breaking the original design.

Empowering

The design encourages new streamers and power streamers to personalize their livestreaming experience to their liking with the different settings relevant to them.

Research phase

User research

Based on recent user research of Kumu's creators or streamers, I gathered qualitative data using interview records and insights from our UX Research team. I noted down sentiments relevant to the setup experience of Kumu's streamers, such as:

  • Some features are irrelevant to them at this part of their livestream setup journey.
  • Awareness was low for some essential features on the page. 


Likewise, our UX Research team evaluated the previous setup experience, noting that the old design had low accessibility


For quantitative evidence, using data tracking gathered and insights from my Product Manager, it was observed that only a percentage of new users who attempted to go live pushed through.

Competitive research

I conducted a competitive research study comparing the livestream setup experience of 5 apps: Bigo, Uplive, Tiktok, Instagram, and Facebook. For each of the apps, I did a deep dive into each of their features and took notes on their cosmetic design, interaction design, the flows of certain features, and the features that are unavailable as of now on Kumu. Afterward, I created a summary for each of the apps and noted their pros and cons. Lastly, I made an overall synthesis of the competitive research by noting common practices found and all the features that these apps had that are not yet on Kumu.

Competitive research of Bigo, Uplive, Tiktok, Instagram, and Facebook

Competitive research of Bigo, Uplive, Tiktok, Instagram, and Facebook's setup experience

Information architecture

Based on the research, I listed assumptions about user behaviors when setting up a livestream using the previous design. I then dissected the page by diagramming the information architecture for each livestream mode: Solo, Schedule, and Audio. Based on the elements and features present in the design, I wanted to confirm which could be removed as users don't find them relevant in their setup journey.

An example of a feature we let go of this early in the design process was the Share option. One of my assumptions was that Streamers don't use the share options when setting up the LS because they share it once they're live. One confirmation of this was present in the user research, where a user expressed that they do not use it.

  • "Hindi ko ginagamit [ang share], shinashare ko lang paglive na ako" 
    • "I don't use [the share options], I share my stream only once I am live" - P2, Middle class streamer

I iterated on the Information Architecture by removing features such as the share option while finding ways to emphasize essential features for both the company and streamers. One of them is the scheduling option, a feature that was not available for Audio streams but has been repeatedly requested by streamers and other Kumu employees. 

Previous information architecture

Previous information architecture

Explorations of a revised information architecture

Explorations of a revised information architecture

Design phase

Grouping features

With the help of mapping out the Information Architecture, I also decided how to chunk the redesign so I could tackle related features more efficiently. I chose to tackle the redesign into the following sections:

  • Livestream settings/Toolbar
    • This would include non-scheduling settings for the 3 modes (Solo, Group, and Audio) such as Co-hosting privacy, Diamond sharing among co-hosts, Backgrounds, etc. 
  • Schedule
    • Since I knew the scheduling flow would require more screens and states, I decided to tackle this separately from the other settings.
  • Livestream information
    • This includes information set by the host, such as the title, tags, and cover photo.
Early wireframe of the different sections of features

Early wireframe of the different sections of features

Gathering feedback

In the next 4-5 weeks, I created numerous low-fidelity and mid-fidelity explorations for each setup section. The designs were continuously critiqued in the design team's weekly Design Critique meeting. At the same time, I presented and openly sent out my designs to be critiqued by product managers, Kumu's Chief of Product, engineers, QAs, managers of Kumu streamers, and Product interns of Kumu.

Since I wanted to continuously elevate my designs further, it was vital for me to gather as much feedback from different standpoints to keep on iterating to get a better experience before I prototype and start getting feedback from our actual users.

Early and Mid-stage designs

Low-fi and mid-fi designs that were critiqued by other designers and stakeholders

Data-driven designs

Throughout the design process, I used accessible quantitative data to back up my design decisions to minimize the need for revisions before the prototype goes through usability testing. Likewise, it was to provide direction when it came to deciding matters in the design instead of me having to guess.

Data-driven default options

One example is how I wanted to assign the suitable default Seats layout setting when a user first lands on the Group Livestream mode in case they are a new streamer. The default setting had to be based on the percentage of each seat layout used for livestreams in the app. With the help of my team's Product Manager and Business Intelligence, we saw that two seat options were heavily used consistently, our 9 seats layout at around 40% of Group streams and our 6B seats layout at over 20%. After more consideration and additional insights on which streams with specific settings receive more diamonds from viewers, we decided to use 6B as the default setting.

Old seats selection and tracking of the feature

Old seats selection and tracking of the feature

Released seats selection design

Released design

Data-driven feature auditing

Another example of quantitative data used in my design was removing the random title generator feature on the setup page. Initially, I assumed that users did not use this feature as they would instead use their own titles or reuse an old one. With the help of my team's Business Intelligence, we saw that only 9% of streams at that time used titles contributing to those in the random generator. The most used title was "Newbie here!" Which is the default title for new users. The other titles were rarely used, so I removed this from the design as we didn't see the feature to be value-adding enough to the experience.

Old design with title randomizer and tracking of feature

Old design with title randomizer and tracking of feature

Prototyping phase

Prototyping as easy as pie

With all of the different flows, states, and complex interactions needed for this feature, I decided not to pursue Figma as the prototype to be used for the usability test of this feature. Since Figma does not allow user input and does not allow more complex interactions, allowing streamers to play around with a Figma prototype that primarily focuses on navigation would not be as fruitful and not close to the experience.

With that, I chose Protopie as my prototyping platform for this project. This was the first time the Kumu Product Design team would use the platform for a usability test, as our preferred platform was always Figma. It took me around 2-3 weeks to learn the software and successfully build the prototype for the Livestream Setup feature. It was a high-risk, high-reward scenario, as it was my first time applying the concepts of variables and formulas to prototyping.


In the end, I produced a prototype that mimicked the production level of the feature, which made the usability test more realistic. The prototype catered to the following features of the Livestream Setup experience:

  1. Switching between Livestream modes (Solo, Group, Audio)
  2. Typing your title
  3. Adding a Cover Photo (flow as Protopie did not allow Gallery access)
  4. With validation, if a user did not add one
  5. Selecting suggested Livestream tags and/or typing a personalized tag
  6. Selecting a date and time for a schedule
  7. Selecting an Orientation for Solo mode
  8. Selecting the layout of your seat (for Group mode)
  9. Selecting your Diamonds sharing setting among co-hosts (for Group and Audio mode)
  10. Selecting a Background
  11. Accessing the Kebab Menu
  12. Accessing cover photo guidelines
  13. Tapping the Go live button

Protopie used for the usability test

Post-usability test phase

Test results

The prototype was used in a Usability Test conducted by our UX Research team, where we gave tasks to 6 aspiring streamers and 6 power streamers. The first task was to demonstrate how they would typically set up their livestream, where they had the liberty to explore the feature however they wanted. For the second task, we were more specific with the settings and asked them to set up a Group livestream with 4 seats, 50% diamond sharing settings, and 3 livestream tags.

Some notable results gathered by our UX Research team are the following:

  • 11 out 12 participants were able to launch/setup their LS; only one newbie was challenged due to failure to set up a cover photo
  • Most of the participants find the new design more friendly to use and can be learned as long as they'll explore and practice, which supports the fact that power streamers had fewer difficulties adapting to the new LS Setup design.
  • Those with prior streaming experience (regardless if new or power streamer) have less friction in adapting to redesigned setup 
  • Common patterns in setting up sequence are that they follow how it's organized in the prototype (e.g., choosing a schedule is followed by changing seats, diamonds, and backgrounds as seen on the group tab)
  • Most newbies have yet to set the habit of personalizing their setup: changing LS titles, adding tags, and setting up cover photos (which are almost natural for a power streamer to do)

Design revisions

01

Diamonds sharing settings

Using the feedback we got from our aspiring and power streamers, I made several revisions to the design.

Initially, the team reduced the number of Diamonds sharing options for Group and Audio streams as we saw only 1-5% of streams used options such as "20% host and 80% co-hosts." However, based on feedback from power streamers, they expressed how they need these settings for their streams.

Solution: Since the original prototype used a tap interaction to switch among 3 settings, I revised this to a bottom sheet where a user can find all 6 options, as this would be more efficient instead of tapping 6 times on the setting to see each option.

Before

Diamond sharing settings design before usability test

Diamond sharing settings design before usability test

After

Revised diamond sharing settings design after usability test

Revised diamond sharing settings design after usability test

02

Cover photo guidelines placement

Another revision, as there are guidelines that need to be followed by streamers on their Livestream cover photos; guidelines should be viewed before going live. Initially, we had a question mark icon that opened these guidelines in the original design, which we also did for the prototype in the usability test. However, both power and aspiring streamers expressed their confusion with the icon's purpose towards the guidelines. We tried adding a label, but no matter how hard we placed it on the screen, it would break the original design. 


Solution:
I found a more appropriate screen to place the icon where I can add a label. Instead of the main setup screen, I placed the icon on the library page when the user selects a cover photo. This screen was more appropriate as the user could easily access the sheet with the guidelines while scrolling through their library instead of relying on the previous page like in the old design.


Note:
actual guidelines design is not part of the scope of the redesign as it is handled by another team in Kumu.

Before

Cover photo guidelines location before usability test

Cover photo guidelines location before usability test

After

Revised cover photo guidelines location  after usability test

Revised cover photo guidelines location after usability test

03

Title UI

Lastly, a few participants expressed that they did not know where to change the title of their livestream at first. Initially, we just had plain text at the top of the page, but users did not think this was tappable at first.

Solution: we did a UI change and made it more into a text field where the title is enclosed in a rectangle, with the placeholder, "Add a livestream title." 

Before

Title UI before usability test

Title UI before usability test

After

Revised title UI after usability test

Revised title UI after usability test

Design quality assurance

During development, I worked with our QA's and Engineers to check the design's quality in the test stages to ensure that the designs would be delivered to how I envisioned them. I had to work in coordination down to the finest of details, as each element had a reason to be there.

One example of a detail that I looked out for was the drop shadow of icons/text and the overlay on the screen. Working with transparent backgrounds or camera views can be pretty tricky regarding accessibility, which is why the setup screen has a gradient overlay on top of the camera view. On top of that are elements with drop shadows if they were originally colored white. This addressed scenarios when users would be in light backgrounds, especially when working with lighting equipment.

It was vital for me to see this even during the testing stages as without it may break the experience as elements and features can be easily lost and not be seen by the user, thus may reduce usage as well. 

Before

Setup screen design during testing

Setup screen design during testing

After

Expected overlay and drop shadow design

Expected overlay and drop shadow design

Released design

Here is a side-by-side comparison of the previous Livestream setup design and the redesign released in February 2023. 

Metrics of the redesign

Due to the feature being released a few weeks prior to the making of this case study, numerical results of the redesign have yet to be revealed. 


Stay tuned or feel free to reach out!

Previous setup design

New setup experience

Lessons learned

Future-proofing your designs

The Livestream setup screen opens many opportunities for introducing more sub-features, which would assist Kumu's creators. I had to design with the anticipation of more possible productivity tools to get added to this screen, such as Filters and Campaigns.

One way I future-proofed the design was to introduce a kebab menu to the screen. I observed in the previous design that all features were squished into a single screen, which caused feelings of overwhelmingness. Likewise, some features, such as the ability to use OBS, are only allowed for some. We added a kebab menu to prioritize some features over others, where tools that don't need to be modified again and again can be placed. 

When in doubt, consult data

Both qualitative and quantitative data played a significant role in this redesign. While designing, I did not expect to know exactly how users behaved on this page through a single-user research study. I would take it as an opportunity to get answers using existing tracking and data to minimize the need to revise the designs after the usability test. When I had questions on which seat layout option was primarily used by users, I would consult my team's Product Manager and Business Intelligence to know the answer and make informed design decisions even before reaching the testing phase.

Designing for different mastery levels

Even with the goal of increasing creator activation with this redesign, I had to keep in mind Kumu's power streamers, which we observed after the usability test, to be big fans of personalization to their settings. I had to find a balance between making the design approachable to newbie streamers while at the same time empowering streamers who needed more setting options. Initially, we thought of removing some settings because they weren't used as much as others, such as some ratios in the Gift sharing options for Group streams. Still, after getting feedback from power streamers, we kept all original options as they were essential to them. At the same time, we minimized the feeling of overwhelmingness by assigning an appropriate default option for this setting for newbie streamers based on the quantitative data we had.

Complex systems require powerful prototypes

For the usability test, participants needed to experience a prototype almost at production level for us to gather more accurate results about the experience. Setting up a livestream is not a linear experience with a fixed set of steps, as each streamer has different needs and ways of setting up. One may fix their livestream title first, while another goes for their background setting first and foremost. Imitating this experience cannot be mimicked with Figma's current prototyping options, which is why I made the brave move to use Protopie for the first time to build a realistic prototype for our test.

By using Protopie, interactions such as typing, selecting dates, and passing data were all possible in our usability test. With that, my team observed more accurate setup behaviors through a realistic prototype. Although risky, as this was my first time working with the platform, it paid off greatly on my team's side. 

Interested to read more case studies?

Check out my other works below ⬇️

Kumu For You Page

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