Kumu App Navigation Redesign

Redesigning how new and existing users navigate and find key features and experiences in the app

kumu.ph
Problem
How can we make the app easier to navigate for new and existing users?
Solution
Restructured the information architecture of the app using familiar information architecture and navigation patterns
Impact
Improved accessibility and increased usage for key features like the Wallet, Profile, Missions, Watchlist, and Klips
Role
Lead designer, worked on information architecture, interface design, prototyping, and usability tests

Kumu is the largest social entertainment app in the Philippines. We have +10 million users (82% Millennial and GenZ) visiting 60 million times per month. Our users average over an hour per day on the app, supporting thousands of income-earning Creators in 50+ countries around the world.

Surveys ran by the UX research team showed that newly onboarded users downloaded the app because they saw it in social media ads and they heard it being recommended by Filipino celebrities. They heard that it was a livestreaming app but they didn’t understand yet what they could use it for. So, one of the challenges we’ve had has been onboarding new users and helping them experience the fun of making authentic connections in Kumu.

How might we make the app easier to navigate for new and existing users?

What We Knew

New users want to establish a mental model of the app

Looking at app reviews, we saw that “confusion” was a common sentiment from new users. And, based on a conducted by the UX research team, we also learned that new users felt the homepage was overwhelming. They would spend hours scrolling through the homepage and joining streams to try to understand how to use Kumu.

This was supported by data too. We saw that one of the first behaviors new users did was to click around, explore the app, and try to get a feel of what Kumu is and what they could do here.

Chart showing new users who tapped different features in the homepage
A high percentage of new users explore Search, Discover, the side menu, Missions, and SocialTV
Chart showing overall users who tapped different features in the homepage
A high percentage of new and existing users use Search, the side menu, Missions, and Social TV

Sometimes, when these new users join livestreams, they’re welcomed by power users who teach them how to use the app. But, most of the time, they don’t get the onboarding they need to fully understand how to use the app, how to navigate, and what it’s for.

“Daming kailangan aralin pag new users. Pumapasok ako sa streams para matuto. Iniexplain lang niya kung paano gamitin. Masungit din siya so hindi ko po makausap ng maayos.”

(Translation: You need to learn a lot as a new user. I enter streams to learn. They explain how to use it. But they’re grumpy so you can’t talk to them properly.)

Kumu's app information architecture was poor

Screenshots above show what new users would’ve seen on the Homepage, the Side Menu, and the Profile Menu. Notice duplicate menu items like Campaigns, Missions, and Leaderboard.

Even though we provided new users with a quick onboarding tour, there was a lot of jargon left unexplained. When we talked to our users, these were some of the common sentiments:

  • (From the homepage) What does Following mean? What are Hot, New, Multi, Audio, and Teams? What do the icons in the bottom navigation mean?
  • (From the side menu) What are Campaigns, Klips, Leaderboard, and Missions?
  • (From the Profile menu) This isn’t what a Profile page in a social app usually looks like? Is the Missions here different from the one on the side menu? What about Campaigns and Leaderboard?

We learned that new users were overwhelmed with the variety of features they saw when exploring the app and this made it more difficult for them to understand and experience the value proposition.

Our hypothesis was that, to make the app easier to understand for new users, we needed to improve core navigation and align users and steer them toward key jobs-to-be-done.

"Information architecture is the way that we arrange the parts of something to make it understandable."
— Abby Covert, How to Make Sense of Any Mess

Notifications are a critical part of the Kumu experience

When we looked at the data, we saw that the Notifications page (which was still buried in the side menu) had increased usage after we released the “User Followed You” notification on the week of November 8. From an average of X users per week, it quickly grew to Y users per week.

Chart showing week-on-week engagement of Notifications page
The sustained week-on-week engagement since new notifications were launched (X Followed You, Liked Your Post, Commented On Your Post) tells us this feature is valuable to users

We looked more into the data and saw that less than 25% of users clicked on the side menu. But, of those who clicked on the side menu, 50% clicked Notifications, which had the highest click-thru rate among the menu items.

Chart showing click-thru rate of Notifications page in the Side Menu
50% of users who viewed the Side Menu opened the Notifications page

A quick recap of the things we know up until this point:

Brainstorming

We had been contemplating how to tackle rearranging our app’s navigation and improve users' mental model of the app for a few months now and we’d had several discussions with the UX Research team but they were also backed up with work.

Kumu's chief product officer, Crystal Widjaja, came up with a draft for the mobile app's new information architecture. In her draft, she shared her take on what the homepage navigation might look like.

Screenshot of the chief product officer's message about her thoughts for Kumu's app navigation
#RoastMe messages are the best

Having been frustrated by our not-so-user-friendly navigation, I was also quite eager to share a few other possible design explorations.

Over the next few days, I came up with four other possible options which I shared in Crystal's brain dump document to get feedback from the other stakeholders:


We essentially had a freeroll so, a few days later, Crystal made the call to go with one of the explorations.

Screenshot of the chief product officer's message when she decided what exploration to move forward with
Crystal made the judgement call and selected Exploration C

How did we know this was the right decision? At this point, it was an educated guess. The selected exploration seems to address the main challenges that we had:

  • New users try to establish a mental model of the app. Exploration C was a familiar layout, not too dissimilar from the information architecture of Twitter, LinkedIn, and Instagram.
  • The existing information architecture was bad. Exploration C consolidated a lot of the redundant entry points under the side menu.
  • Notifications were a key part of the current customer journey. Exploration C featured the entry point to Notifications in the main navigation.

Next step was to validate if our assumptions around Exploration C addressing the above challenges were correct.

Testing Assumptions

Since this was still an educated guess, our next step would be to test if the new information architecture solved our problems. And, because this was a massive change in navigation, we also wanted to know if the change might harm any working user flow that we have.

  • Will users know where to access their Profile?
  • (Because we moved the entry point) Will users know where to find their notifications? Will users know how to configure settings for their notifications?
  • Will users know where to access My Watchlist?
  • (Because we moved the entry point) Will users know how to add their FB friends?
  • (Because we moved the entry point) Will users know how to share their profile link?
  • (Because we moved the entry point) Will users know how to scan their QR code?
  • (Because we moved the entry point) Will users know how to edit their addresses?

Usability Test Summary

Getting help from the UX research team, here’s a quick rundown of the completion rate of each task:

  • Accessing Profile - 93.75% completion
  • Accessing Notifications - 93.75% completion rate
  • Accessing Notification Settings - 100% completion rate
  • Accessing My Watchlist - 66.75% completion rate
  • Adding FB friends - 81.25% completion rate
  • Sharing profile link - 68.75% completion
  • Scanning QR code - 87.5% completion rate
  • Editing my address - 81.85% completion rate

Overall, participants shared they had a good experience with the new changes in the new navigation design app.

All of us are used to seeing notifications here [Menu Tab]. It makes me want to see if I’m gaining more followers, are my friends livestreaming? Notifications won’t get buried anymore.
—Participant #2

Switching Notifications and Profile also got positive feedback from the participants. They noted the placement of the notifications in the bottom navigation encourages them to build a habit of checking the page as they open the app.

The notifications tab at the bottom navigation is very helpful. Before I had difficulty in seeing my notifications because I had to access the Menu and sometimes the profile page.
—Participant #7

On July 1, we released the updated Side Menu, which consolidated feature entry points—including duplicates—from under the Side Menu and the Profile Menu.

On July 20, we completed the switch and removed the old Profile Menu entry point in the main navigation—replacing it with Notifications.

Results

Before

After

Impact on metrics

Chart comparing Notification page's old access point vs new access point
Significant increase in views for Notifications page. July-1 dip was when we consolidated more features in the Side Menu. July-20 increase was when we moved Notifications to the Main Navigation.
Chart comparing Mission page's old access point vs new access point
Significant increase in views for My Missions
Chart comparing Watchlist's, Klips', ShopKumu's, and Ad Banner's old access point vs new access point
Increase in views for My Watchlist, Klips, and a revenue-generating Ad Banner
Chart comparing Wallet page's old access point vs new access point
Significant increase in usage for Wallet after the duplicate entry points were consolidated inside the side menu
Chart comparing Profile page's old access point vs new access point
Significant increase in views for Profile by July 20 with the new access point