Click Through Rate = # Primary Actions / # Impressions
Optimizing Conversion Rates for In-App Upsells
Product & Team: Messenger Kids, Growth
My Role: Product Designer
About the Project
The following case study is a project that I completed as part of the Messenger Kids Growth team to increase the percentage of users with push notifications enabled. I was the lead Product Designer for this project and was involved during the entire product development cycle, from ideation to launch.
Design Process
Understand
Context
There are a size-able number of Messenger Kids users who have push notifications turned off. This is an area of interest for the Growth team because having push notifications turned on ('pushability') is very important for user engagement and retention – we conducted an analysis on Messenger Kids users and found that kids who become un-pushable are 3x more likely to become inactive in the next month than kids who are pushable.
Problem
We are doing the bare minimum for our pushability upsell and there are many ways we can improve the conversion rate of this upsell. The current pushability upsell is disruptive, spammy, and doesn’t convey the value of having push notifications turned on.
Current Pushability Upsell Experience
If you turn off push notifications, you’re prompted with a fullscreen modal that simply says “Please enable push notifications.” This prompt is shown 10 times, every time the user opens the app, and doesn't appear again after the 10 impression limit is hit.
Solution
Improve the contextuality and overall user experience of the pushability upsell. There are various areas we can improve the upsell to achieve this, including pacing, triggers, content, and presentation, all of which can be modified to improve the contextuality of the prompt.
Design Question
How can we improve the user experience and better convey the value of push notifications to encourage users to opt-in to push notifications?
Goal
The goal of this project is to determine the impact of contextuality on pushability opt-in rate and gain insights that will help guide future pushability work in Messenger Kids.
Performance Metrics
Click-through rate (# Primary Actions / # Impressions), Conversion rate (# of users who turn on notifications / # primary actions), % of users with notifications turned on.
Ideate
Upsell Trigger
Learnings from Messenger Pushability
The Messenger team has done extensive work on their pushability upsells, so we're utilizing their findings as a proxy to help guide our work on Messenger Kids. As a first test, we want to mirror the best performing pushability upsells on Messenger in Messenger Kids. The top performing Messenger Pushability Upsell Triggers are:
Upsell in thread after user sends message
Upsell in inbox upon app open if user has unread message
Optimal Upsell Trigger for Messenger Kids
Unlike Messenger, Messenger Kids has an activity tile h-scroll at the top of the inbox and instead of listed threads, Messenger Kids utilizes thread cards. Since the inbox for Messenger Kids is so crowded, adding an upsell on this page would be difficult, requiring a lot of time, design resources, and approval. Therefore, we decided to move forward with the in-thread upsell after message send, as it allows us to achieve our goal while using our time and resources efficiently.
Upsell Presentation
Messenger Kids only has 3 existing upsell types, none of which are appropriate to use in-thread.
Activity Tile is only available in inbox and doesn't meet content needs for contextuality.
Dialog Box and Full Page Modal are 'active' upsells that stop the user and require them to take action, which is too disruptive to be used in-thread and should be reserved for more important communications.
Need for a New Upsell Type
After looking at the existing upsell options in Messenger Kids, it was clear that there was a need for an additional upsell type, one that can be used in-thread, meets our content needs for contextuality, and is also a 'passive' upsell, which is less disruptive for the user.
New Upsell Type Explorations
I put together some quick explorations of different passive in-thread upsells and narrowed it down to three options for the team to consider:
Banner - It is a Megaphone inside of a chat thread; a dismissible unit that appears at the top of a chat thread.
Admin Text - System-generated message that appears in thread and is triggered by certain actions taken by the user in the thread.
Tooltip - A popover that points to an object and briefly describes the object’s function.
Choosing the Optimal Upsell Type
The ideal upsell type for our pushability upsell is one that is both passive and can accommodate all of our content needs to demonstrate the value prop for turning push notifications on (contextual). An upsell with these characteristics would be an effective upsell that also provides the user with a good experience.
When comparing the upsell types from my explorations to our ideal upsell characteristics, the in-thread banner was the clear winner and the upsell type that the team and I decided to move forward with.
Design
Design Challenge
Messenger Kids is in the middle of a phased rollout of a complete re-design called 'Dawn'. As a result, both the current version ('Classic') and Dawn versions of the app will be in production at the same time, so we need to account for both design systems.
Due to the additional work that this creates for engineers, coupled with limited engineering resources we have allocated for this project, the goal for this new component is to create a flexible design that works with both the Classic and Dawn versions with as many re-usable parts as possible to minimize the amount of additional work that engineers have to complete.
In-Thread Banner Design
We were able to develop a single design with a configurable button that would minimize the work required by engineering. However, there is a slight discrepancy between the header and sub-header font and colors between Classic and Dawn. For the sake of effort and reduced complexity for directionality, we erred towards the Dawn scheme as this is the design system that will be launched in the near future to fully replace the 'Classic' version of the app.
Test & Iterate
Upsell Content Preferences
I worked with a Content Strategist to come up with different variations of the upsell to test with users and gauge user preference for the headline text, sub-header text, image, and primary button.
Experiment Findings
Personalized and descriptive text results in higher click-through-rate and opt-in-rate compared to generic messaging. Contextual messaging focused on friends and the thread.
"Easy" and straightforward call-to-action leads to higher click-through-rate.
A relevant icon, rather than a generic alert icon or no image at all, leads to a higher opt-in rate.
Final Design & Launch
After determining the best performing upsell content, I worked with Engineering to build out this feature and conduct QA to ensure the build matched the mocks. Below is the final product that we launched!
Results & Next Steps
Results
Through this project we confirmed that upsell contextuality has a significant impact on pushability upsell opt-in rate, where the in-thread banner with updated content had triple the CTR of the current variation of the upsell. Additionally, across the test variants, the CTR2 (turning on notifs after going to settings) was similar.
Next Steps
Now that we have demonstrated the value in improving contextuality, here are the next steps I identified:
Conduct additional explorations and tests on content and triggers to optimize performance, as well as explore the impact of other upsell characteristics such as content rotation, pacing, and type of contact.
Work with Messenger Kids Design System Leads to explore new upsell surfaces, such as an inbox banner.
Establish upsell guidelines and best practices and create documentation for team.
Expand this work to all upsells in Messenger Kids to improve both the performance and user experience of all types of upsell communications.
Learnings
What have you learned from this project?
During this project, I learned the value of standardization and design systems within a product. At the start of this project, I noticed that there were no guidelines for upsell communication in Messenger Kids, leading to a lot of duplicated work by different teams as well as inconsistent and bad experiences being shipped to users.
To ensure that these issues wouldn't persist for future upsell efforts, I collaborated with senior designers and design managers across Messenger to create a base set of components, guidelines, and best practices for upsell communications in Messenger Kids. Standardizing this aspect of the design system has allowed us to improve:
App Identity - Ensures that all upsell communications align with product values and brand identity.
Design Consistency - Helps create consistent design and experience throughout product and across devices.
Upsell Performance - Improves the performance of upsells by providing teams with best practices that are proven to optimize performance.
User Experience - Ensures that upsell communications provide clear value for the user and also are appropriate based on the subject and content of the upsell.
Team Efficiency - Decreases the required design and engineering resources required for upsell projects, since teams don't have to start from scratch.
