Building an end-to-end SaaS Checkout Flow

Format is a platform that aims to help photographers run their business. The company offers an online portfolio builder that allows users to easily create a portfolio website based on one of many themes available, and a workflow product offering client proofing, file transfer tools, and a client manager.

PRODUCT

Format

PLatform

Desktop

ROLE

Product Designer

year

2020

OPPORTUNITY

In early 2020, Format was growing as a company and offering more features to its users. We wanted to be able to provide these features as add-ons when users signed up and, in addition, the current checkout flow was becoming outdated.

To be successful, this new checkout flow had to raise conversion rates, that is bump up the percentage of users who end up paying for a plan after landing in the flow, and raise FTPC ARPU, which is First Time Paying Customer, Average Revenue Per User (both compared to the old flow).

Research

We took cues and common practices from many SaaS and retail checkout experiences to form our own idea of what our checkout experience should be; breaking the flow into digestible chunks, keeping these chunks simple, reducing friction wherever possible, and auto-filling information where we could were just a few ideas we kept top of mind when exploring our options.

With help of our in-house research team, we also planned to put a working prototype in front of actual users. We tested comprehension, basic understanding of the flow with the goal of seeing if and where users got tripped up and how we could mitigate these issues.

Sketch of plan selection
Sketch of upgrade flow

Sketches and Wireframing

When starting to sketch out ideas, it helped to know we knew we had three steps to our flow: Plan Selection, Add-ons, and Checkout. We used these three steps as pillars to build around.

How could we best display these steps to keep things digestible and easy to use and understand?

We iterated rapidly with numerous navigation styles and layouts until we landed on something that we agreed was relatively frictionless and met our needs based on research.

High Fidelity Design

Thanks to Format’s rugged design system, Snapple (named after one of our office dogs), the high fidelity work was relatively effortless. We have components and rules for most situations, including text styles, buttons, containers, form inputs, and other controls.

Format Plan Selection Screen

We worked from our wireframes, plugged and played, and let Snapple work it’s magic. In the end, we had something that was truly Format: clean, concise, to the point, and simple to use and understand.

Format add-on screen
Format checkout screen

OUTCOME

I stated earlier on that the success goals of this project were to raise both conversion rates and FTPC ARPU; both were achieved with flying colours.

Conversion rates went from 10% to 17%, meaning 7% more users ended up paying us for a plan after landing in the flow.

FTPC ARPU went up by almost $1, representing that the average number of dollars in each first-time paying customer's 'cart' was $1 more than before.

These numbers are both significant increases that helped the organization's bottom line, and render this project a huge success.

LOOKING BACK

What have I learned designing such an important piece of an app? Collaboration. Is. Key. This is doubly true for me, as the development team on this project was our remote team in Poland. It took some early mornings to get together with them, virtually, to iron out the kinks and get things feeling right.

The closer you work with your developers, the better the result will be. I truly believe there’s no getting around that. In the end, I learned that tightly coupling with your development team on a project has endless positives, and will save you countless headaches down the road.

Visit Format.com to sign up and experience the checkout flow live.

Left arrow

Back Home

Next Project

Right arrow