Project: Flutterwave Checkout: Version 3
Company: Fluterwave Inc
My role: Lead Designer
Year: 2020
Flutterwave provides the easiest and most reliable payment solution for businesses anywhere in the world. making it possible for customers to pay businesses using their preferred payment options notwithstanding their location. This makes the Flutterwave checkout our most used product being the link that connects the over 80,000 businesses that use Flutterwave and their customers.
Flutterwave is currently live in more than 10 countries, and each new market entry comes with new challenges like currencies(conversion), payment options, and user behavior. So, part of what we had planned for the new checkout was to build a checkout that easily scales with multiple payment options, loads fast putting low internet speed into consideration, and delivering the best payment experience to our customers on any device they choose to Pay with.
The Flutterwave checkout was upgraded previously, and it checked every box and lived up to the expectations we had for it. It also excelled where the V1 didn’t. But, with growth comes new challenges. Adding new payment options, and entering new markets, we knew it was time to step it up.
Why a new checkout
Asides from giving the checkout a fresh look, we had a list of reasons why we thought it was the right time to build a new checkout;
- Scalability — We needed something that can easily scale and accommodate our steady growing list of payment options
- Improve communication — We wanted to better manage customers’ expectations when making payments and be able to provide assistance where and when necessary
- Better way handling of error messages — With the new checkout, we had our error messages rewritten to properly communicate to customers whatever the issue with their payment is and how best to proceed
- Improve the mobile view — The mobile view was improved to keep customers from having to scroll to find/access some information on the checkout
- Customization — We separated the checkout codebase to make it easy to customize for our merchants to go with their brand without having to alter the core functionalities
- Payment options Simplification — We took the time to Simplify some of our payment methods
- Speed — With the growing number of customers that pay businesses using the Flutterwave checkout, speed was something we had to improve
V2 — The good, the bad, and the ugly
While the V2 checkout had its shortfalls, it was also a success on many fronts and since our primary goal at Flutterwave is to simplify payments and deliver the best experience to our customers, it only made sense to retain the things that worked, learn from the things that didn’t, and improve on them and bring them over to V3.
Who uses the Flutterwave checkout?
In the last 12 months, we’ve processed over 8.5m transactions through the Flutterwave checkout, our merchants have been paid by customers in 16 countries using 49 currencies, and on both mobile and desktop computers.
The V3 Checkout
The V3 checkout is everything that made the V2 successful and more. Knowing that the checkout is Flutterwave’s most used product, the touchpoint and only contact most customers have with Flutterwave, and also, it’s the link between our merchants and their customers, it’s of utmost importance that it not only works but, make sure that it delivers nothing short of an excellent experience to our customers.
Iterations
The checkout design and development process involved a couple of iterations.
We started off with rough sketches and quickly transitioned to screen design so that we can easily test, gather feedback properly, improve, and iterate. During the early stages, we had roughly 5 design approaches and stripped them down as we moved on.
Testing
Since we were designing in Figma, it was easy for us to prototype and test at every stage. We started with our internal users. We started off with a select number of users at first. The process was, test, gather feedback, make improvements, and repeat. After a series of improvements and weeks of designing, we had a final review session with all stakeholders; Backend engineers, QA, Frontend, Project Managers, and every other person we thought was necessary. This was where we made sure that everything checks out. After this session, we refined the designs and made the necessary changes, and prepared the design for handoff for implementation.
The ones we had to let go
During the testing and iteration phase, there were some designs that we had to let go along the way. Not because they weren’t good enough, but, because they didn’t capture what we were looking to achieve with the V3 checkout. But, the final design is made up of everything that worked on the ones we dropped.
Why have the sidebar on the right?
This question was one that we had to answer over and over again during the design and review sessions. And I think that answering it one more time won’t hurt 🙂
There are two key patterns that web contents are consumed; the Z-pattern and the F-pattern.
The Z-pattern shows the route the human eyes follow when scanning contents on a web page; left to right, top to bottom.
The F-pattern shows that users typically read web pages in this manner: two full horizontal stripes followed by a vertical movement.
NNGroup conducted eye-tracking visualizations on different types of web pages: an about page, product pages, e-Commerce websites, and search results pages.
The result of the research birthed the F-pattern which is currently the most used and widely adopted pattern for web contents.
Working with this data combined with our knowledge of user behaviors when making payments, we decided to present our customers with the most used and successful payment option within their region by default. This makes it easy for users to make payment being that the first option they are presented with is one that they recognize and familiar with. It also reduces the amount of time it takes to complete a payment since the first content the customer sees is the most important one and having the other “Payment options” on the right as secondary content.
And being that the checkout is smart and would have a customer’s previously used payment option selected when next the customer tries to pay, having the customer’s previously used payment option be the first content that they are presented with when the checkout loads make total sense.
Smart Checkout
Smart Checkout automatically suggests the payment with the highest likelihood of success based on data we have collated over a period of time.
This means, reducing transactions on payment options that are experiencing downtime, reducing failed payments, and more successful checkouts.
Payment methods we improved?
Bank Transfer: We improved the pay with bank transfer flow by taking user expectations into considerations. Previously, when there’s a delay with confirming Bank transfers, the customer was usually in the dark as to what was going on and didn’t know how to proceed. The error message was vague and the flow, once an error occurs, does not clearly state what the issue is and what the customer is expected to do. On the V3, we improved that process. We had the error message rewritten and put measures in place to communicate what is going on with the transfer and how the customer can proceed.
Pay with USSD: The pay with USSD was reduced to the barest minimum; just one step. We scrapped the authorization step, and instead, embedded it into the initial code. This means “Just one USSD code”, and just one step, to complete payments.
Pay with barter: We finally brought Pay with barter into the Flutterwave checkout. Our customers won’t have to be redirected to complete payments using barter. And, we also added One-touch login so that our customers won’t have to login every time they want to make a payment.
Saved cards
The saved cards feature on the Flutterwave checkout makes it easy for customers to make payments without having to enter their card information every time. This saves the customer time and with the checkout being able to remember the last payment option a customer paid with previously, this further simplifies the payment process for the customer and reduces the amount of time it takes to complete payment.
Now, what’s next?
At Flutterwave, we don’t just build payment solutions, our primary goal is to simplify payments for both businesses and the individuals that pay them through Flutterwave checkout. That means that whatever channel businesses choose to collect payments from their customers, we’ll make sure that it works perfectly well and that the experience is both seamless and satisfying. And, whatever payment options or devices customers prefer to pay Flutterwave businesses with, we are sure to deliver seamless and top-notch payment experiences to them.