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 Designer




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).

If both of these numbers went up, we would consider our new checkout flow a massive success and well worth the investment.


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.

First, we explored multiple ways to display these steps. Side navigation? Top navigation? All steps displayed on one long screen? One screen houses all steps in collapsable containers? To keep things digestible and familiar, we landed on a top navigation.

Plan selection was fairly straightforward. A column for each plan made sense so the user could easily compare the features of each plan. In addition to the features, the cost, and CTA were the most important pieces of each column. With that information, we had a good foundation to build off when moving to the next step.

The add-on step presented more of a challenge. How do we not overwhelm the user with information, while still confidently ‘selling’ the user on these additional features? Our answer: keep it simple. Clear, concise copy about what each add-on is and why it matters to their business and single-column layout allows the user to scan the benefits feeling overwhelmed.

Lastly came the checkout step, where the user confirms their payment. This had to be simple and clearly display what the user was buying and how much it cost. We explored this in depth and eventually landed on a two-column layout: one side with payment options, credit card and PayPal in this case, and the other with a summary of the plan, add-ons, costs of each, and total cost. This way the user can see everything at a glance and purchase their plan quickly and easily.

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


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.


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 to sign up and experience the checkout flow live.

Left arrow

Back Home

Next Project

Right arrow