🎯 Implementing a Goal-Oriented Tipping Feature
With the recent success of it's asynchronous tipping feature, Kumu's new goal-based tipping system allows creators to create tip goals that encourages their supporters them by giving virtual gifts even when they're not streaming! 
Client
Kumu
Duration
2 1/2 months
(Jan-March 2023)
My Role
Product Designer

For this project, I worked with a Product Manager, UX Researcher, a team of iOS, Android, backend developers, and QAs.
Scope of Work
UX Flows
Information Architecture
Competitive Analysis
Wireframing & Sketching
UI Design
Prototyping
Project Management
01

What problem were you trying to solve? Why?
Kumu, a live streaming platform, introduced a new feature called offline tipping to help creators earn income even when they are not live streaming. Prior to this, creators could only earn income through virtual gifts that viewers gave during the live stream.

Offline tipping was released to allow viewers to give virtual gifts to creators even when they are not live streaming. This is particularly helpful for creators who have fans across different time zones, making it difficult for them to earn income during their live streams.
Solution
The Revenue Streams team at Kumu has further improved the offline tipping feature by introducing a goal-based tipping system.

The hypothesis here is that as a viewer, if I see that the streamer I follow has a goal, that would encourage me to send more gifts/tips to help them reach the goal. We also want to provide them a more compelling reason to support creators asynchronously.
Objectives
By building a way for goal-driven tip collection, we want to be able to increase revenue generated from offline tipping and evaluate the boost come from goal-based tips.

Subsequently we want to increase paying user rate which is the percentage of paying users vs our monthly active users.
02

What steps did you take?
Step 1 - Research: Identifying Key Evidence
I conducted a competitive analysis looking into successful tipping or fundraising platforms such as Ko-fi, Buy me a coffee, Instagram and Facebook’s fundraisers, etc.

This was further validated by a study conducted by the UX research team in parallel, Making PUGCs more productive study, which provided the following insight.
💡 Insight
“While most PUGCs admit that asking gifters to drop gifts drives away viewers, they found that sharing their goals and becoming transparent with their contract with their followers drives the Bayanihan spirit to help fellow Filipinos out. Gifters feel that they are a part more significant than themselves, "a positive feeling.”
An example of this creator’s mentioning a goal to earn for their mom’s birthday cake
Step 2 - Ideating and Creating the initial stage explorations
After conducting competitive analysis, and collating insights from user research, I began designing a holistic goal-based tipping feature with sub flows that are as complete as possible. Ensuring that the feature experience in the app is as well-rounded as possible, I included the flows under the following:
Creation and Discoverability
Entry point for goal creation
Goal Creation/Setup
Where to access created goals
Goals History
Goals Contribution
Distribution
Sharing the goal to external platforms
Sharing the goal as a post in Kumu Feed
Notifications for goals created and contributions sent
Customization
Editing the goal details (title, description, goal amount)
Extending goal duration
Possible Enhancements
In-stream Goal-based tipping
Trophy/Badges awarded to Top Contributors etc.
💡My Process
Designing the most ideal and complete state of a feature help me see the big picture view. It provides me a way to future proof the design of the components and better understand the specifications of the follow through questions that arise in the design process.
Early Stage Explorations
Step 3 - Refining Feature Scope Through Feedback and Iteration
Following the initial explorations, I frequently sought feedback from the design team, product managers, engineers, and QAs during critiques, PRD reviews, and cascades.

This iterative feedback loop helped identify UX improvements that can elevate the initial designs and narrow down the scope. 

For the most viable product, I refined the following key flows:
Entry Point
The creator’s profile serves as the entry point for setting a goal.
Goal Creation
To create a goal, user taps the Set a Goal CTA on the user profile.

Set a Goal Page appears where the user must input the Title, Goal description, Goal amount, and an optional Deadline.
Goal Page
After the goal is created, a goal card appears on a user’s profile. 



Tapping on the card will lead to the goal page of the user where pertinent details and contributions made can be viewed.
Closing the goal
If the creator wishes to stop or close a goal, they can do so by tapping on the menu icon on the goal page.

This menu was created to prepare for future actions such as editing a goal, etc.
Completing a goal
When the goal is complete, the creator receives a notification which will lead them to the goal page to view it’s progress. 



Here the user can decide whether to mark the goal as complete. This means that people can no longer contribute to the goal.
Contributing to a goal
As the viewer, a user can contribute to a goal through the creator’s profile or the goal page.

Tapping the “Support goal” CTA opens a bottomsheet where user can choose and send the denomination they wish to contribute.

If it’s a success, a bottomsheet appears indicating so.
What happens to the other features? 
For future iterations, we plotted the remaining sub-flows into different phases that can be accomplished in 1-2 two-week sprints. Some of these will also depend on user feedback on the released MVP.

Phase Two focuses on distribution of the feature where we allow users to share goals to the Kumu feed as well as third-party socials. In this phase, we also wanted to make notifications hardworking and increase touch points to goal pages.

Phase Three focuses on enhancements where users can access goals through an ongoing livestream. Here we also wanted to push through with Goals History page where users can access previous and existing goals.
Step 4 - Final touches and prototyping the design
I prepared the final designs for developers by making necessary changes based on feedback and technical analysis. This includes proofreading, adding illustrations, and adding delighters where possible.

To ensure that developers and QAs understand the interactions, I also provide them prototypes, a video walkthrough, and detailed annotations on Figma.

Final prototype: Creator POV
Final prototype: Viewer POV
You may explore the Figma prototype here ↑
03
What are the results of the project?
🛠️ Work in Progress -> This section is yet to be filled with data on the recently released feature. Stay tuned!
--
Adoption Rate
Good things come to those who wait.
--
Paying User Rate
Patience (they say) is a virtue.
--
Percentage Increase in Revenue
Please hold
04

What did you learn from this project?
💡 Learning
Future-proofing designs: Designing the optimal state of a feature enables a comprehensive view, future-proofs component design, and enhances understanding of follow-up questions in the design process.
💡 Learning
Gather feedback early and often: Having multiple sessions for feedback with varying stakeholders made it easier to translate designs that are feasible, usable, and well-informed.
Here are more case studies
Managing legal cases made easier through LawAdvisor IQ.
Improving the quality of life and efficiency of Kumu's design team through a reliable design system
🚧 Coming Soon
👋 Breaking the Mold: Fixing What Ain't Broken
Improving the quality of life and efficiency of Kumu's design team through a reliable design system
Read case study   →
🎯 Implementing a Goal-Oriented Tipping Feature
Constructing a goal-driven way to tip or gift creators online
Read case study   →
🎁 Designing a Send-as-Gift feature
Making it easier to send orders as gifts just in time for the holiday rush
Read case study   →
Automating Inbound and Putaway Processes
Making it easier to send orders as gifts just in time for the holiday rush
Read case study   →
Revamping Kumu's Design System
Improving the quality of life and efficiency of Kumu's design team through a reliable design system
Implementing a Goal-Oriented Tipping Feature
Constructing a goal-driven way for supporters to tip/gift creators offline
Designing a Send-as-Gift feature
Making it easier to send orders as gifts just in time for the holiday rush
Automating Inbound and Putaway Processes
Centralizing the inbound operations of an eCommerce startup using a mobile site
Create Cinema Inc. Website
Building a production house's inaugural website using Figma and Webflow
Revamping Kumu's Design System
Improving the quality of life and efficiency of Kumu's design team through a reliable design system
Designing a Send-as-Gift feature
Making it easier to send orders as gifts just in time for the holiday rush
Automating Inbound and Putaway Processes
Centralizing the inbound operations of an eCommerce startup using a mobile site
Back to top ↑