Reducing friction in the checkout flow
Summary
In this pro-bono project, I supported Plan International, an NGO that collects donations and offers child sponsorships to help children in need.
I was tasked with finding improvement opportunities for the checkout flow for donations and sponsorships, with a focus on conversion optimization.
Based on a heuristic evaluation and a competitive benchmark, I redesigned the checkout flow to offer a frictionless user experience for better conversion on both mobile & desktop.
Form Design: Before and After
Desktop
On desktop, one of the biggest problems was a somewhat cluttered layout that did not use the available space in the best possible way. The resulting cognitive load was a likely culprit for checkout abandonment.
1
In the new design I established a clear visual hierarchy by removing unnecessary page elements and using a one-column form layout with fewer fields for faster and easier completion.
2
I then replaced the celebrity testimonial with a donation summary to provide encouragement and reduce cognitive load.
3
The navigation between process steps is now more intuitive: it indicates clearly where the user currently is and where they can go.
Mobile
On mobile, the existing implementation made it harder for users to choose between options: radio button lists make it comparatively to recognize the available options, tap the option one wants to select (especially for users with limited dexterity).
They also consume a lot of the limited screen real estate, making the checkout feel longer due to more scrolling.
1
In the redesign, I replaced the selection controls with more appropriate components like segmented buttons.
They show available options more clearly, save screen real estate to use for context information, and always provide a sensible default.
2
The new design is also easier to navigate through clear labeling (both in wording and font choice), improved navigation between process steps and clearly distinguishable primary and secondary actions.
Client Feedback
Working with Stefanie for our checkout flow was a game-changer. We’ve already started taking into account some of the actionable recommendations. Nothing compares to having a fresh perspective from someone with Stefanie’s deep experience in usability, accessibility, and digital products.
Team Lead Online, Plan International
A lean process for fast results
In order to deal with the project constraints, namely a short timeline over the Christmas holidays and almost no availability of stakeholders on the client side, I opted for a short and lean process that allowed me to achieve the maximum results with the limited resources.
I truly believe that being adaptable trumps doing UX works “by the book”—as long as design is not purely based on assumptions.
Stefanie Kruse
Sustainable Product Designer
(1) Heuristic Evaluation
I started with an audit of the existing checkout flow on desktop and mobile, using the 10 Usability Heuristics by Jakob Nielsen. I also added additional categories for checkout best practices based on my experience in e-commerce and existing research and guidelines by the Baymard Institute, because much of what works for an e-commerce checkout is also applicable for the donations checkout.
(2) Report & Presentation
I provided the client with a written report of the evaluation results featuring both a management summary with ratings across heuristics as well as detailed lists of positives and negatives per heuristics and annotated screenshots illustrating the issues found.
I discussed the report with the client, answering questions and proposing different scenarios for improving the checkout based on client involvement and resource availability on the client side.
(3) Competitive Benchmark
For some of the challenges, the heuristics didn’t provide clear answers:
- Should we use a multi-step or single-step checkout?
- How to best deal with gifting options in the context of donations?
I performed a competitive analysis of comparable checkout flow by Misereor, SOS Kinderdorf, and UNICEF—NGOs that provide donors with similar offerings.
Screenshot taken on 04.12.2023: https://www.misereor.de/spenden/spendenformular
(4) Lean User Research
How to reassure users in the checkout?
The client requested a special focus on providing reassurance to users during checkout and the previous steps had not yielded sufficient data on what kind of information users needed in a checkout at this point.
Trust-building vs. reassurance
My hypothesis was that there is a difference between trust-building and reassurance:
- People decide for or against an NGO before the checkout process and trust needs to be formed there.
- During checkout, people rather need reassurance that they are doing the right thing.
Quick interviews with 5 recent donors
I simply talked to a handful of network contacts from different demographics who had donated to a charity within the past year.
In 5- to 10-minute interviews, I asked them about their experience, what doubts they had during the process of donating and what information they required.
Focus on reassurance in the checkout
As a result of confirming my hypothesis, I decided to focus in the checkout on providing reassurance:
- about the choice of donation (type and amount)
- about canceling recurring donations and tax deductions
- easy access to FAQs during checkout
Build trust.
- celebrity testimonials
- transparency info
Provide reassurance.
- cancellation & tax info
- answer FAQs
(5) Redesign
Based on the collected insights, I redesigned the flow.
I stuck with the multi-step checkout form, considering a one-step flow would have been too complex especially for gift options.
Throughout the design phase, I made sure to use mainly standard components of the given Bootstrap UI framework, so that the development effort for the improvements would be kept to a minimum.
Here’s why I did not usability-test the original site
Some UX designers would have started with stakeholder interviews and user tests for the existing site. Given the project constraints and that a first glance at the site already revealed significant improvement potential based on usability heuristics, I decided to proceed without initial testing.
Checkout flows are a common problem with existing solutions that can be seen as best practices, based on UX research by large companies like the Baymard Institute with thousands of users, so additional testing would have likely revealed the same issues as the heuristic review at a much higher cost.
The main challenge:
Navigating a multi-step process with variations on mobile
The original checkout flow had a few problems with navigating through the different process steps.
1
Users could leave the checkout by tapping the Plan logo at the top, whereas they might expect an arrow or (x) icon to leave the checkout.
2
Moving back and forth via buttons at the bottom of each step sometimes skipped steps when a user had already filled them out.
3
Contrary to checkout best practices, the stepper was not labeled on mobile and did not signal interactivity, prompting the user to navigate via buttons at the bottom.
While fixing the back navigation in the main header and specifying the expected behavior of the “Back” and “Next” buttons was an easy fix, the most challenging part of the redesign was finding a good solution for the process stepper on mobile.
Iterations
I iterated on a few designs with the existing stepper component. On desktop there was enough available space to show the maximum amount of steps without taking away space from the main checkout area.
On mobile, a horizontal stepper was a decent solution, but had two disadvantages:
- on small screen the step labels had to be very short and would still be too small for some people to read comfortably
- it could only contain a maximum of 5 steps, whereas following best practices recommended by Baymard would need to include a sixth step for gifting in some cases
A vertical stepper would have given the space for longer labels and more steps, but used up too much screen real estate.
My Recommendation
I ended up designing a two-part expandable and collapsible header to show all process steps in detail.
- In the collapsed state, a small amount of code could easily update the number of steps, e.g. for gifting.
- In the expanded state, users could easily navigate between steps. Steps are clearly labeled, progress is marked, and the stepper shows via underlined labels as well as solid lines, where the user can go based on their progress.
Show video description for checkout steps navigation
The video shows how a user can navigate between different checkout steps. At first, the navigation header is collapsed, but it can be expanded and the user sees 3 steps. With each step completed the app updates the current step, like 2 out of 6. When moving through the checkout flow and selecting a gift sponsorship, 3 new steps are added to the flow, so that the expanded navigation header now shows 6 steps in total. Users can go back to previous steps via this navigation.
Implementation, Testing, and Backup Solution
While this is in my opinion the best solution from a user experience perspective, it does not come without feasibility and usability risks.
My approach would be to
- discuss feasibility and implementation effort with developers and adapt if needed
- do usability-tests with users (including older, impaired, and less tech-savvy users) and adapt if needed
If the proposed expandable stepper is infeasible or is too difficult for users, I would stick with a labeled 5-step horizontal stepper and include the gift data form with the personal data form in one step.
Improving Login & Account Creation
Login
Before
The existing flow offers the guest checkout as the most prominent option, but also allows checkout via PayPal and logging in.
Especially because users need to log in with a reference number and not their email address, chances are higher than elsewhere that people cannot log in.
The choices between checkout methods are distributed across two pages, PayPal can be selected in step one and the other two options in step 2.
After
The new design positions all choices next to each other in step one and provides a clearer visual hierarchy on the login page.
Account creation
Before
Users are encouraged to open an account and set a password in the second step where they enter their personal data. Benefits of setting up the account are displayed in a tooltip where one would expect password requirements.
While account creation is not mandatory, it can still interrupt the flow and even discourage them from completing the checkout.
“Interrupting all guest users to suggest they create an account too early — before or in the middle of the checkout process — was observed to cause some participants to hesitate and stop their progression through checkout.”
Baymard Institute
After
In the redesigned version, optional account creation is offered in the last “Thank you” step of the flow, after the user has completed the checkout and clearly listing the benefits of having an account.
Providing Reassurance
The redesign focuses on providing reassurance to people by
- engaging them emotionally,
- addressing doubts, and
- answering questions that haven’t come up until the checkout.
1
I therefore removed the celebrity testimonial and replaced it with a donation summary that answers the most important questions:
- What am I donating for?
- What about payments and taxes?
The summary shows the amount and purpose of the donation—in case of a child sponsorship with the photo of the child to evoke emotions—as well as the information that payments can be stopped at any time and that the donation is tax-deductible.
2
I added an FAQ section at the bottom of the screen to provide more space for information that had previously been placed in-between the form fields (e.g. what kinds of businesses are and are not allowed to donate).
This way, Plan International had the flexibility to adapt and add to the FAQs without requiring layout changes. At the same time the form feels less cluttered.
Next Steps
Handover
Due to shifting priorities on the client’s side, I wasn’t able to discuss all the changes with client’s team and hand over the designs to development. Therefore it is possible, that some of the suggested changes—while good for usability and thus conversion—might be too much effort (e.g. the variable number of steps in the progress indicator) or interfere with existing business processes (e.g. removing personal data fields might require changes in mail communication templates).
If and when this project is taken up again, my next steps would be:
- update the designs based on required changes from development and business stakeholders
- adding additional layouts for tablet breakpoints
- handing over designs to development
- testing the improvements with a mix of A/B testing and usability testing
Usability Tests and A/B Tests
Given the limited resources for this project and the fact that improvements were mainly based on best practices and used common interaction patters, I recommend to save time and money by not usability-testing the whole design before implementation.
- Many changes are small, can be implemented iteratively and tested with A/B-testing on the live site.
- The process stepper mentioned earlier should be usability-tested before implementation with a smaller prototype in short sessions.
- In order to test for usability and remaining errors, I recommend doing that after implementation on the live site. This provides the added benefit that interacting with a real website provides a more natural experience for users that with e.g. a Figma prototype.
Nothing compares to having a fresh perspective from someone with Stefanie’s deep experience in usability, accessibility, and digital products.
Her thorough review not only aligned seamlessly with our business goals but also brought forth invaluable insights for making our website easy to navigate and more inclusive while optimizing conversion.
Frederik Menke
Team Lead Online, Plan International
How can I support your project?
If your product or website has some challenges, I am happy to help you out.
No matter if it’s checkout optimization, refreshing the look and feel of your app or fixing accessibility problems on you site…
Find out more about my UX Review and UX Relaunch or just pick a spot in my calendar to chat about your project:
You can find information on how your data is processed in my privacy policy.
Of course, you can also get in touch via the contact form, find me on LinkedIn or email me directly.
Looking forward to hearing from you!
I use your data to answer your request. Further information can be found in my privacy policy(opens in a new tab).