An end-to-end checkout experience

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.

The goal was to create a comprehensive checkout experience that allowed users to not only easily purchase their plan, but add-ons that would help their photography business run smoothly. To be successful, this new checkout flow would have to perform at least as well as our previous one in terms of trial to paid conversions.

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.

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 selectinon 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

Format's new checkout flow was released in September 2020. I will update this section with the results when they become available.

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