Redesigning how India gifts
ShareChat, with 320 Million monthly active users, drives over
$50M in revenue through virtual gifting in live audio chatrooms. This case study focuses on our UX efforts to improve overall user journey with better discovery & micro-interactions, to drive monetisation at scale.
Problem
Users often struggled to locate or understand how to send gifts during live sessions. This led to low conversion from listeners to paying users, and missed opportunities for monetisation.
Role
Lead UX Designer
Timeline
One sprint - 2 weeks
Outcome
$1.4M
14% increase in
overall gifting
↑12K users
8% in new rechargers
2.4M gifts
48% of gift exchange through strip
↑20K users
5% increase in new gifters
Insights from
User Interviews
To understand and identify the existing pain points of the users, we set out to interview 25 users across two co-horts i.e New users & Existing Gifters.
Entry Point & Gift Selection
Lack of onboarding
Interested users rely on host & others to teach them as there is no visual signifier or aid to help them.
Reduced Gifting speed
Existing gifters found additional step to gift selection as blocker for quick & consecutive gifting when there is a battle amongst gifters to top the leaderboard.
Timing of Onboarding
Users journey towards becoming a gifter are often influenced by factors like presence of other gifters, who were already gifting in the room.
Gifts Sent & Interaction
Complex Flow
For a new user, overall step to send a gift is cumbersome with too many options to deal with.
Crammed UI - Less Touch Target
Users also struggled to use the UI because of inadequate touch target, often leading to accidental user selection.
Hindered visual feedback
While sending the gift, bottom-sheet hides the main feedback mechanism as seen by others.Users tend to manually close it and check for the fear of right gift delivery. This impacts the flow of consecutive gifting.
Goals &
Design Conceptualisation
As we set out to redesign the core gifting flows, we had few higher level goals that we wanted to achieve.
Reduce cognitive load
Improve the discovery and reduce the number of step and complexity to sending a gift.
Improve the visual feedback
A lot of users struggled to understand whether the gifts have been sent or not.
01
Improving discovery by adding
swipeable gift strip to bottombar
Gift Discoverability & Selection
We added an
additional layer of strip on top bottom bar for
quick gift selection
The gift strip can be scrolled horizontally to scan various gifts
1.1 Possible challenges
Comment engagement might get effected by Overcrowding bottom bar
Smaller devices would get Lesser viewport for comments
Gift Onboarding
& Trigger Timing
We added a contextual nudge to onboard users with gifting.
These nudges would get triggered under two conditions.
Second visit of the chatroom for new users.Post that, when somebody else has sent a gift in the chatroom
02
Easing user selection by contextually
switching comment bar with user list
User Selection
On selection of gift, comment bar contextually switches with user lists.
User lists now has better touch target as opposed to older design.
Users are sequenced in the same order as above for better context.
For Context
Regardless of total online users, gifts can only be received by speakers seated on the top.
Meanwhile, gifts can be sent by anyone including speakers of the room.
New Design
Previous Design
03
Improving visual feedback with
new gifting interaction.
Gifting interaction - Sender's View
Once a user taps on send icon, Selected gift flies and lands on the selected user (speaker).
This improved the speed of gifting, as users could now consecutively send gifts by tapping on send icon.
1.1 Possible challenges
How to handle animation if, position
of the user (speaker) changes mid-path.
Bonus-
Origin of new gift style
This new interaction led to origin of a new gift style (slab) which was interactive in nature.
Prior to this
we just had static and animated gifts.
New Design
Previous Design
04
Handling concurrent gifting by
designing interaction for multiple gifters.
Banner interaction
Everybody other than gifters, see a banner animation instead of full fledged animation from bottom bar.
When a gifter 1 while sending a gift is joined with other gifters, he sees banner animation in addition to his ususal gift interaction.
1.1 Possible challenges
How to handle animation if there are more than 3 gifters simultaneously gifting.
We found from data
that concurrent gifting exceeding >3 is rare.
For Context
When Gifter 1 sends a gift alone, others in the room view it as a Banner Interaction.
Incase of concurrent gifting, Gifter 1 is additionally also a viewer to other's gifting.
Outcome &
User Feedbacks
The results have shown positive delta across all metrics without impacting check metrics like new/old users engagement & retention.
$1.4 Million
14% increase in total value of gifting
"I really like the new feature because it has increased the speed of gifting during battle"
2.4M gifts
48% of overall gift exchange through gift strip
I don’t have to enter another page to select gifts, now I can easily choose from the strip"
↑20K users
5% increase in new gifters
When i first saw other's gift, it was easy to find where it came from.
48%
in distribution of overall gift exchange
"I don’t have to use the bottom sheet to select gifts, I can easily choose from the strip"
Seeking relevant UX and Product metrics to identify the core problem and it's design scope.
To understand and validate the problem in hand we sought for different data points around gifting and see if the co-relation holds true, hence implying redesign is the way forward.
To identify if flaw is in design
What is the overall CTR of gift icon?
10% of DAU ~ 100k users
What is the distribution splits of CTR between New and recurring users?
30/70 split between New and Recurring User
What percentage of eligible users don't click on icon?
8% ~ 80K users
What is the abandon rate amongst clicked users?
~Data wasn't available.
To verify if problem is independent of product-market fit
What is D1 and D7 retention of New gifters?
45% and 30% respectively
What is the average time taken for users to send his first gift?
80+ days for conversion from listener to gifter
Insights from above experiments were used to increase conversion of New Rechargers by 8%
Improve wallet discovery
Impulse-led potential gifters would find it hard to navigate steps to recharge.
Improve feed-back loop of wallet balance
80k users had extra free coins sitting in their wallet, unaware they could send gifts
Iteration 1 - Failed
To maintain bottom bar's limit, sticker icon was placed within the comment box.
We saw positive delta around recharge conversion but comment engagement dipped. This lead to a decrease in D1 & D7 retention of passive listeners.
Iteration 2 - Successful
We brought the sticker icon back to it's original place and increased the icon counts in bottom bar with wallet balance (coin icon) anchored at bottom left.
We included automatically dismissive recharge nudges based on events and distinct cohorts
of users.
1. Sale events
2. Low Balance
3. Gifter battle is active.
Outcome: +8% new rechargers
Users now have a quick access/view to recharge and coin balance.