Mockups from the UX Refresh for Plan International
Plan International

Reducing friction in the checkout flow


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


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.

A desktop mockup of the original checkout step to enter personal data. (1) At the center is the checkout form with multiple columns, it need to be scrolled to get to the next step. (2) To the right side, it is accompanied by a celebrity testimonial. (3) At the top of the page is a large headline with a thank-you message and an image of children on a brightly colored background. A desktop mockup of the redesigned checkout step for entering personal data showing (1) a much shorter one-column form, (2) a summary of the project the user is donating for to the side, and (3) a clearly separated dark page header with navigation.


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.


I then replaced the celebrity testimonial with a donation summary to provide encouragement and reduce cognitive load.


The navigation between process steps is now more intuitive: it indicates clearly where the user currently is and where they can go.


A mockup of the original mobile checkout form for specifying the amounts for a child sponsorship. (1) Users can select rhythm and amount of the donation with small radio buttons that are aligned vertically and take up most of the space on the screen. (2) At the bottom is a button labeled "Next" in all caps. A mockup of the redesigned mobile checkout form for specifying the amounts for a child sponsorship. (1) Selections are now made via large buttons with the most common options preselected. (2) At the bottom are three large button showing all available checkout options: guest checkout, login and checkout via PayPal with the guest checkout being the most prominent option.

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.


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.


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.

Portrait of Frederik Menke

Frederik Menke

Team Lead Online, Plan International

Read the whole feedback ↓

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.

Portrait of Stefanie Kruse

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:

The misereor donations checkout is a one-step on-column form

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

Female avatar Female (27)
Female avatar Male avatar Male (36)
Female avatar Female (41)
Male avatar Male (56)
Female avatar Female (84)

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

Jump to redesign for reassurance ↓

Landing Pages

Build trust.

  • celebrity testimonials
  • transparency info
Checkout Flow

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.

The design tool Figma showing a handful of mobile screen designs for the checkout

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.

Improving Login & Account Creation



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.


The new design positions all choices next to each other in step one and provides a clearer visual hierarchy on the login page.

A collage of two screens showing the redesigned login flow. The first screen shows step one, where the user can decide between the most prominent guest checkout, logging in or continuing to PayPal. The second screen shows the login mask with prominent fields for e-mail address and passwords plus a clear call-to-action to login and less prominent links to reset the password or continue without a login in case the credentials aren't at hand.

Account creation


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


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.

The last step of the checkout process sowing a thank-you message and the option to create 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.
A desktop mockup of the payment step in the checkout process. (1) Next to the payment data form is the celebrity testimonial. (2) At the bottom of the page a short list of five remarks about donation amount, cancellations, usage of funds, tax deductibility and terms and conditions. A desktop mockup of the redesigned payment step of the checkout process. (1) Next to the payment form is a summary of the order with a picture and information of the child the money goes to, as well as the donation amount and the information about cancellation conditions and tax deductibility. (2) Below the payment form an FAQ section with expandable items where questions can be answered in more detail.


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.


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


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

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