Later (2022)
Redesigning Later's Checkout Experience
For years, upgrading to a higher subscription tier on Later was a complex, multi-step process that disrupted users' core task of scheduling social posts. Our goal is to streamline the in-app checkout experience and help users easily access the benefits Later offers for social media management.
Before the redesign, the checkout was a critical bottleneck, with 40% of users abandoning their purchases at the final step
Role
Lead Product Designer
Responsibilities
Heuristics and Competitive Audit
UX and Interaction Design
Wireframes and Prototypes
A/B Testing
Duration
4 months
A bottleneck in upgrading
The upgrade paths for self-serve customers disrupted core scheduling tasks on Later, requiring users to abandon their progress. Saving in-progress work was discussed as an improvement with other teams, but the scope was too large to further pursue.
Problem Discovery
Shifting focus to a checkout redesign
We monitored checkout usage across two user categories (new versus experienced users) in a 90-day period on FullStory.
More new users were struggling with the feature upgrades, spending >2 minutes before abandoning
In comparison, advanced users typically upgrade plans via Settings, knowing what they want to get out of the purchase.
This indicates of a pain point: new users aren't always ready to choose a new plan and can get overwhelmed with information overload at that moment of upgrading.
Above: We can achieve a smoother flow by eliminating intermediary steps.
Talking to new customers
We recruited users who upgraded in the last two weeks, as new users are most affected by pain points and likely haven't explored all of Later's features yet.
Our UX researcher and I discovered that different segments upgrade for different reasons — agencies want client management tools, while e-commerce users seek social media strategy features.
Based on this insight, along with previous A/B tests showing no significant impact from modal improvements, we decided to hide information about related plans and focus on streamlining the upgrade flow for a clearer, more direct user experience.
SaaS checkout strategies had a singular commonality
From my discovery of SaaS products with similar subscription tiers, many used a modal-based or a side-panel checkout to reduce friction and drop-offs by keeping users in the same interface. These were valuable approaches we considered adopting.
A/B testing the redesign for trial start transactions
Together with the product trio, we decided to A/B test the checkout redesign, focusing on the trial start flow from the post builder and app navigation bar to checkout.
Despite some risks, we made our decision based on two key factors: the high traffic through Later’s checkout flow and the complexity of redesigning multiple components.
The A/B test will measure the redesign’s impact before committing to a full app rollout
Above: With the UI engineer, we addressed usability issues on the checkout to organize the content for the new iteration for the test.
The checkout had usability issues
The existing checkout page’s structure had several problems, mainly around information redundancy and unclear hierarchy. We addressed these by reorganizing and regrouping content, refining visual hierarchy, and eliminating unnecessary steps to create a more intuitive and efficient checkout experience.
Streamlining the experience took multiple iterations
Understanding that free users were dropping off during upgrades due to a confusing, multi-step flow, I streamlined checkout and plan snapshot directly within users' current workflow.
We reused existing components but also designed various new modals. After gathering feedback from the design team, we refined the mockups and aligned with developers to tackle any technical challenges early on.
A/B Test Findings
Hypothesis
The new checkout design and flow will increase conversion by 10%
Successful Results
+23% order completion, converting trial users to paying customers
Next Steps: Beyond the Test
Covering logic intricacies for an app-wide rollout
Following a successful A/B test, we went ahead with the full rollout of the redesign, refining it for extensive use cases and improvements.
Anticipating positive results, we planned ahead of time for nuances and complexities of the checkout
Our team addressed various factors — such as upgrade and downgrade paths, plan changes, coupon logic, and legacy accounts — that impacted core features like post scheduling, link-in-bio customizations, and the creator-brand marketplace. This required close collaboration with the appropirate product managers, designers, and developers.
Features Launched
Checkout modal for desktop web
Above: The new modal-based checkout allows users to upgrade or start a trial without interrupting their work.
Credit card input and country detection
Above: Once credit card is entered, we autofill the country field and open up the remainder of the required fields for the country detected.
Plan snapshot for free users
Above: Previously, free users were redirected to the plans page in Settings when upgrading. With the new iteration, users can stay on the same page and proceed to checkout without disruption.
Mobile web checkout flow
Above: With a growing number of users accessing the product via the mobile website, we aimed to streamline the subscription process by enabling upgrades directly on mobile, removing the friction of redirecting users to the desktop web app.
Account sign up from the modal page
Above: Previously, signing up from later.com/pricing directed users to a generic account creation page without proper context. We customized a signup modal for trial starts to ensure consistent information, reducing confusion between the two steps. It will lead to the new checkout once account is created.
Reflecting on the Journey
What I learned
The checkout redesign was overall a massive project, and reducing scope was not an option. Our team tackled this by breaking the initiative into an initial A/B test to prove the idea's validity, before breaking the rest to-do's into smaller and manageable phases for launch. As a result, we were able to release this project without delay.
The checkout redesign at Later leveraged defaults to simplify the decision-making process for users. Features like directing users to the appropriate subscription plans and auto-filling address fields align with industry standards, while also highlighting Later's value to users.
There's more to do
This redesign opened the door for new features and has shaped the future of payment options at Later.
Consider digital payment platforms like Apple Pay and Google Pay for a secure and contactless subscription purchase.
Evaluate the use case of offering AI credits as a purchasable add-on.
