2020CASE STUDY
Flutterwave V3 Checkout
Project
Objective
Flutterwave provides one of the easiest and most reliable payment solution for businesses in Africa. 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 200,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 while putting low internet speed into consideration, and delivering the best payment experience to our customers on any device they choose to Pay with.
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.
- Better way handling of error messages — With the new checkout, we had our error messages rewritten to properly communicate to customers whatever the issues with their payments are and how best to proceed
- Customization — We separated the checkout interface codebase to make it easy for businesses to customize the checkout to go with their brand colors/look without having to alter the core functionalities
- Payment options Simplification — We Simplified 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
Objective
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.
Designs testing
The ones we had to let go
Since we were designing in Figma, it was easy for us to prototype and test at every stage. We started with a selected number of internal users. The process was, test, gather feedback, make improvements, and repeat. After a series of improvements and weeks of designing and testing, we had a final review session with all stakeholders. This was where we made sure that everything checks out. After these sessions, we refined the designs and made the necessary changes, and prepared the design for handoff for implementation.
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.
Sidebar on the right?
The question about the placement of the sidebar 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.
NNGroup conducted eye-tracking visualizations on different types of web 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 place the sidebar as a secondary content on the right. It also reduces how long it takes to complete a transaction since the first content the customer sees is the most important one
The Z-pattern
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.
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.
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.