About

Redesigning the purchase pages of Atera

Atera is a SaaS management platform used by IT professionals. As the product designer in the billing and subscription squad, I led the project. My work included investigating the data, desk research, prototyping, working with the product researcher, and of course designing the purchase page based on the results of the study.

Contents

1. The current state of the purchase pages
2. Project kick off
3. User testing
4. Design suggestion

Prototyping

Journey Mapping

Sketching

Wireframing

UI Design

The Current Situation

End Of Trial Purchase Page

Atera has a zero touch purchase model. That is, users create an account and get access to the software for 30 days. After their trial has ended when logging in, the users see the End Of Trial purchase page.

Visually, the software is locked. In order to unlock it the user must go through the payment wall and purchase a subscription.

Trial Purchase Page

During the trial the user can purchase the software at any time.

Visually, the user experience is similar between the pages.

Project's Kickoff

The purchase pages were written in aspx technology and didn't behave as part of the Atera platform. This caused quite a few issues and was decided as a tech debt to rewrite the page. Rewriting the page gave us the opportunity to redesign it.

However

1. We had very little data gathering abilities for these pages.
2. Since the context of the project was a tech debt, we didn't have the capacity to properly A/B test.

The Data We Did Have

Purchase Pages Conversion Rate

In the below image we can see users who viewed the purchase page and how many of them actually purchased. The purple represents the Trial purchase page. The red represents the End Of Trial purchase page.

Data is from 03 – 09 / 2022

When Do Users Purchase?

In the below image we can see that most of the users purchase on day 29 of their trial. The general assumption is that they do that to maximize their trial period. However, there are quite a few who purchase the day after — when their trial expires — and then there's a "tail" of purchases following.

Data is from 09 / 2021 – 09 / 2022

Clicks Heat Map from FullStory

We can see here that most of the engagement takes place on the right side of the page. I assume that users would interact with that area to understand what the purchase will cost them.

Data is from 06 – 09 / 2022

UX Issue

FullStory recording example

Let's say you're going shopping. What would the experience feel like if the salesman kept asking you if you want to pay?

In our case the required credentials are stuck in front of the user's face throughout the whole purchase process. This is kind of what's happening above — the user customizes the plan, then naturally clicks on the subscribe button, but forgot to input their credentials first.

Desk Research

Next step — desk research

To gain a better understanding of the industry's standards and best practices I set out on a journey of inspecting various purchase pages from different SaaS companies.

My research page in Figma

Platforms Researched

I looked at end of trial, purchase and pricing pages across 15+ SaaS companies.

What We Understood

1. It makes sense to split the process into two digestible steps.
2. We should present the contents of each plan.
3. We need a clear summary to show the user what they're buying.

However, we still had open questions

Three of them to be precise:

‹ ›

‹ ›

3

How should billing cycle selection be handled across both the plan and Network Discovery?

Our goal was to answer those questions and bring confidence to our design suggestions.

User Testing

Research Context

We consulted with a product researcher — Danielle Jaffit, an external consultant for the company. We decided to test 3 clickable prototypes with users to determine which journey is clearest. We talked to:

• 10 users who have recently purchased
• Half who purchased Network Discovery and half that didn't

Spaghetti monster — the Figma prototype I built

Research Limitations

Users used this as a proxy support call. Makes sense — they recently purchased the product.

The 3 Tests

1. Short
2. All in one
3. Network Discovery as a separate step

Here's what each looked like:

Final Design

End Of Trial Purchase Page

We incorporated the test results and finalized the design, taking a "mix and match" approach — using what worked best from each test. Here's what it looked like:

First page — Plan Selection & Customization

1. We put all the customization on the plan selection page. It made sense because it allows the user to get a better understanding of what their subscription will cost.
2. The plan contents are presented as a comparison table, helping the user see which plan best suits them.
3. On the bottom we added a summary that also serves as breadcrumbs to reflect the purchase process.

Second page — Network Discovery

1. Network Discovery as its own step helps change the "sneaky" behavior of having it checked in by default.
2. The Atera billing cycle will affect Network Discovery's. If the user selected monthly for Atera, it'll be locked here in monthly as well. When attempting to change it the user will get a tooltip explaining that.

Third page — Checkout

Static summary — all the customization has been done already. All that's left now is the checkout.

Closing Thoughts

Questions I received along the way

Did we perhaps emphasize Network Discovery too much?

Even with the current behavior of opting in by default, we didn't get complaints from users that they were "lured" into selecting Network Discovery. Apparently users select Network Discovery for its capabilities. So we might be doing them a service by implementing transparency to the process and offering an explanation of what Network Discovery is.

What were our KPIs for success?

Since conversion rates were known (around 20%), we'd like to see them go up, or at the very least not change.

So why embark on this journey in the first place?

Atera strives to be a leading SaaS company in general, and specifically in its domain. As such, its main entrance gate can't look like a phishing scam (actual feedback we received). Think for example what you'd feel if, before completing a purchase, you notice a typo error.

In my opinion, a good experience is a wholesome experience — from the onboarding, using the product and its features, and at the end — the purchase and payment process.

That's A Wrap

The project was an excellent learning experience. It was the first time we really tested our design on our users prior to development. This gave us a better understanding of what they actually need.

It was a personal acheivment for me, to lead and manage this process.

What did you think?