Apester Upgrade Flow

How the redesign of our upgrade payments flow led to more than 200% in uplift (conversions) in one month, which was more than the entire previous years.

Background

During the beginning -mid of 2020, Apester took another step in her growth, evolving into a full Saas model by creating a Paywall (moving away from what was mostly free services before) where new users will be entering a 14 day trial, and encouraged by the end of this trial to upgrade and convert into paying users (freemium).

In addition, Apster decided to expand their offering with new plans, aiming to a wider range of users (SMB, individuals etc.)

These strategic shifts required multiple pivots and had various implications, one of which was to redesign and update the payment flow and pricing page.

Old Pricing Pop up

Research

Apster’s platform was offered free up until then, with only one available plan to upgrade to, that didn’t generate enough conversions.

The team realized that users needed more options while also simplifying and cleaning the process and our overall user’s journey.

After researching and looking at many payments flows, from companies with similar offers to companies with completely different approach and set of products (yet with an interesting take and approach on pricing, flows and payments checkouts), I started to gather and understand what are the common patterns and the best approach companies were taking, when “asking” users to convert during the payments flow, to access a wider range of features and products.

User Journey Map

Equipped with my gained knowledge and inspiration , I created user flows to better map the ways we will take our users through the upgrade process in the platform: from sticky alerts notifications that indicated trial mode ,to upgrade pop-ups and smarter, better placed CTA’s.

Designing the Pricing Page

A total of five upgrades options were asked to be added to our payments page- Three Saas plans, and two premium custom plans

We wanted to have an overlay page above the user’s action, and it was important, due to the fact that our users can interact with different channels, to clearly communicate the different plans and their packages.

My goal was for the design to convey that same approach, keeping it clean and subtle.

Color Palette

Consistently keeping the name of the “upgrade” plan above, supporting users' understanding for plan and payments

Have a Toggle bar for monthly and annually payments and plans.

Main plan is subtly highlighted, indicating best value, and distinguished from the other two packages available

Customer plan for contact us.

Including in that page our biggest customer (paying) logos

Pricing Page all states

Designing Payment page

Our previous payment form was too complicated and not optimized for converting costumes, with form being too long, CTAs button appearing below the fold, and an overall un-friendly users approach.

Our goal was to obviously change that and make the payment process as seamless, easy and UX friendly as possible- we shortened the form to be only two required fields : Credit card and full name.

Added a filter for monthly and annually billing option.

Only Two Payment fields (powered by stripe).

clearly showing the “payment summary”, stating the total price calculated and savings.

An area to add coupon codes

Coupon Pop-over

In order to stimulate users to upgrade the plan utilizing discount prices, we needed to emphasize the “add a coupon” option.

We decided that the coupon field will actually be featured as a pop up screen in order to ensure that users are both aware of this option and/or don’t miss it, during the checkout process

Purchase Flow

Blocking

In order to test the efficiency of our new upgrade flows, we started blocking the system by creating a trial mode for new users , which led to different “segmented” users’ flows: Trial stage users, paying users and blocked users.

Based on where the users were in the process, we could easily and efficiently push specific alerts to them, as well as enable different parts of the platform.

The goal was to increase efficiency internally, while ensuring that our users understand their stage and status.

Trial Sticky Alert

Blocked State & Pop over

Results & Next steps

The Newly design page was released as part of a test we ran against our original prices page. The results showed that the new design performed significantly better than our previous page.

Yielding to a 200% uplift in paying users in the month of the launch, more than the sum of upgrades in previous years.

This was the first step in building our payment flow, accommodating Apester’s new business offering.

As it evolved, we continued to add on and fine-tuned the look & feel of the elements and the content, while keeping the new structure and UX approach.

See it live here.

Daniel Barash