FutureFarm
Agricultural eCommerce Marketplace
Tackling Drop-Offs in Checkout
Date
Nov 2024 - Present
Deliverables
iOS
Android
Responsive website
My Role
User research
Responsive design
Wireframing
Prototyping
Usability testing
Design system
Team
CTO
Lead engineer
Front-end developers
Back-end developers
Overview
FutureFarm faced a checkout challenge with a disjointed payment flow that failed to support its users' diverse payment needs. I enhanced the checkout experience by streamlining store credit redemption and integrating flexible payment options to reduce drop-offs.
This aims to address pain points across all stakeholders, FutureFarm, B2B partners, and B2C users with expected rollout by the end of Q3 2025.
Checkout Drop-Off Funnel
3-Step Funnel (Jul-Sep 2024)
Step 1
Checkout Started
100%
Step 2
Payment Method Selected
56%
Step 3
Purchase Completed
44%
Problems
FutureFarm saw a rising drop-off rate at checkout in Q3 2024, compared to the past 6 months. This prompted a deep dive into potential friction points. I conducted various research methods, leading to the identification of two key pain points.
Why are users abandoning checkout?
Store Credit Friction
B2B partners offer store credits to encourage purchases, but low redemption rates. Users struggle to apply them, leading to frequent support inquiries and abandoned checkouts.
Payment Flexibility Gap
Limited payment options make it difficult for users to complete purchases, especially when cash flow constraints impact their ability to pay.
User Research
I conducted user interviews with 4 active users, along with app feedback. I found that users experience usability issues, such as misleading information and inconveniences.
It’s really confusing to redeem the Store Credit. How does it work?
🧑🌾
I want more payment options like pay later.
👩🌾
Please walk me through your checkout journey.
👩💻
Store Credit Confusion
Users didn’t realise they could redeem store credit first and pay the balance with another method. The message "Apply £180 credit towards purchase. Then choose how to pay the balance." wasn’t clear enough, leaving them uncertain about the process.
Unclear Payment Flow
After selecting Store Credit, users saw "Your order has been received," which implied completion. One user paid the balance, while another left, thinking the process was finished.
Stakeholder Interview
I interviewed our CEO and CTO for insights from both user and business perspectives, cross-checking their input with my research.
FutureFarm
👨💻
We need to simplify checkout to scale globally and reduce friction for all users.
Recovering the drop-off rate to 72% is critical for sustaining growth.
B2B Partners
🙍♀️
Our store credit incentives aren’t driving engagement as expected.
Customers ask if we offer financing options when requesting an invoice.
B2C Users
👩🌾
Trying to use store credits and complete payment is too complicated.
More payment options would make purchasing easier during tight cash flow.
How can we effectively meet all these needs?
Information Architecture
I created an Information Architecture to visualise the new checkout flow. Mapping out the structure helped identify friction points, such as unclear store credit usage and payment sequencing.
Checkout
Subtotal
Order Summary
VAT
Shipping Fee
Redeemed Credit
Total to Pay
Place Order
Contact Details
Available Store Credit
Confirmation Message
Redeem
Pay with ConnectedFi
Pay by Card
Add Payment Method
Card Number
Name on Card
Expiry Date
CVC
Billing Address
Confirmation Message
Name
Phone Number
Edit
Store Credit
Payment Method
Select Method
Page
Action
Content
User Flow
I built this user flow to ensure users can redeem store credit seamlessly and complete their payments without friction.
How might we help users complete the checkout?
Expanding Payment Options for Flexibility
We believe that bridging the payment gap and offering more flexibility will encourage users to complete their purchases instead of abandoning checkout.
So, if we provide additional payment methods, we will reduce drop-off points and increase successful transactions.
We will measure success by tracking drop-off rates and conversion rates.
Expanded payment options beyond Visa, Mastercard, and Maestro to include PayPal, Google Pay, Apple Pay, and ConnectedFi financing.
before
after
Separated Store Credit from payment methods to create a natural flow. Users redeem credit first, then select a payment method.
Easy redemption with a toggle and a confirmation message, ensuring users know when store credit is applied.
Users can view real-time balance updates in the Order Summary and CTA button, helping them make informed decisions.
Users can select a payment method with details clearly displayed in the card design.
Users also can add other available payment methods for more flexibility.
before
after
Optimising Payment Flow to Reduce Checkout Friction
We believe that improving the user interface and creating a more intuitive flow will help users make informed decisions and experience a smoother checkout process.
So, if we enhance the checkout page, we will reduce drop-offs and improve conversion rates.
We will measure success by tracking drop-off rates and conversion rates.
Solutions
With the initial hi-fidelity prototype, I conducted usability testing with 3 B2C users. Feedback revealed issues with store credit redemption, payment clarity, and user confidence in new payment options.
Usability Testing
How do I know if my store credit was successfully redeemed?
👩🌾
Please walk me through your checkout journey, again?
👩💻
Despite the "Redeemed" label, some users were unsure if the store credit was successfully applied.
Users hesitated to use ConnectedFi due to a lack of familiarity with the service.
A user has mistaken it for an error message.
Some users were unfamiliar with store credit and wanted more information before using it.
Others preferred to wait until their store credit accumulated, unaware that it had an expiry date.
The final design improved navigation, streamlined the checkout process, and made key information more accessible to enhance the checkout experience.
Final Design
Expiry date notification to inform users about credit validity.
Clear credit redemption confirmation message to reassure users.
Improved card design to clearly indicate the selected option.
Color adjustment from red to green to reinforce success and reduce negative perception.
Easily accessible service information for better understanding.
Expected Impact
The solutions are currently in development and set to launch by Q3 2025. We aim to reduce drop-off rates to 72% and increase conversion rates to 25%, with measurable results expected by Q1 2026.
72%
drop-off rate recovery
25%
increase in Conversion Rate
Once we have data, I will update this case study accordingly.
Learnings
Ecosystem Thinking: Addressing needs across the entire business ecosystem (platform, partners, and end-users) created multiplicative benefits beyond what isolated improvements could achieve.
Providing clear information, status indicators, and confirmation messages for each action is essential for improving the user experience.
Next Steps
Gather user feedback after rollout to identify any remaining friction points.
Refine the experience based on real-world usage and data insights.
Browse More Work
FutureFarm
Agricultural eCommerce Marketplace
Newell Brands x Amazon
Strategic Cross-Brand Store