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:
Previous livestream setup design of Kumu
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.
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.
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.
The design encourages new streamers and power streamers to personalize their livestreaming experience to their liking with the different settings relevant to them.
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:
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.
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's setup experience
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.
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
Explorations of a revised information architecture
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:
Early wireframe of the different sections of features
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.
Low-fi and mid-fi designs that were critiqued by other designers and stakeholders
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.
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
Released design
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
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:
Protopie used for the usability test
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:
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
After
Revised diamond sharing settings design after usability test
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
After
Revised cover photo guidelines location after usability test
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
After
Revised title UI after usability test
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
After
Expected overlay and drop shadow design
Here is a side-by-side comparison of the previous Livestream setup design and the redesign released in February 2023.
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
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.
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.
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.
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.
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
