Role: Lead Product Designer
TLDR
Designed a mobile-first upgrade to subscription pop-up for merchants’ storefronts
Designed a settings page to easily turn the widget on and off
How did this project come about?
At Recharge, we’re very close to our merchants. We’re in constant communication with them as a product team, customer success team, and account management team, and we’re also fielding feature requests in Canny on a regular basis. One thing we were hearing over and over again from our merchants was…we love our subscribers, but how do we create more loyal subscribers? Our merchants were seeking ways to get more subscribers in the door and convert one-time purchasers into loyal repeat customers.
Enter the idea of upsells and cross-sells, starting with the upgrade to subscription pop-up
One of the requests that was coming in from many merchants in quite a few conversations was the idea to offer a subscription upgrade when a one-time item was added to the cart on the storefront. We did some research on the average on the effectiveness of widgets like this and found that:
LTV increases by 1.42% when a customer subscribes versus purchases one-time
Pop-ups tend to increase conversion rate by 10%
Success metrics for the tool
We defined specific metrics for the tool that would define the success of the project.
LTV of new subscribers. We would look for an upwards trend of LTV in customers that upgraded using the pop-up and stuck around for 2 cycles
The number of stores enabling the widget. This would give us insight into if merchants were eager to enable more upsells and cross-sells and therefore build out more widgets
Number of customers that abandon the cart after seeing the upsell pop-up. Introducing a pop-up can create some friction in the buying process, and we wanted to track if abandonment rates were consistent with the level before the widget was turned on.
We also very much wanted to communicated the success/failure of this widget to merchants via analytics so that they could make informed decisions about their business.
The research
Talking with our internal teams and merchants helped us align around key features:
The widget must be able to be turned on and off
The widget should allow merchants to specify products/collections that will trigger the pop-up
Branding and text should be editable by merchants
Metrics should be displayed to merchants so they can gauge success
The visuals
After a few rounds of sketches and brainstorming sessions with the product manager, we dove into a high-fidelity mockup to get in front of merchants and stakeholders.
Knowing that this would likely be accessed on mobile pretty frequently, we took a mobile-first approach with the designs and adapted them to desktop.
We also had to think about the settings page within Recharge that would enable this widget. As a part of this process, we explored what an “Upsells & Cross-sells” page could look like, featuring different widgets for different pages of a store.
After talking with merchants about their preferences, we decided to let Shopify do the heavy lifting for us regarding customization. We had already had good success with leveraging the Shopify theme editor to allow merchants to quickly customize their widgets in a familiar setting and make the call to do that here as well. That limited our settings to turning the widget on/off and specifying certain products or collections that would trigger the widget. We looked to existing patterns in the app and kept things consistent.
Where is the project now?
We received tons of positive feedback on the designs, however, we ended up actually building a powerful new Flows engine and made the business decision to build this widget and others inside of the the Flows builder. While these specific designs haven’t been implemented, they were the spark that was needed to build an even more powerful tool, and they allowed us to lay the foundation for the logic needed for this particular Flow.
If you’d like the check out the mobile prototype, you can do so here.