How Improving Accessibility Boosted Checkout Conversion Rates by 26%
Zūm Rails | 5 minute read
Company Overview: All Things Fintech
Zūm Rails, founded in 2019, is one of Canada’s top Fintech startups, serving clients like Questrade and Mitsubishi. The company primarily focuses on payment solutions for B2B customers and has recently expanded to offer BaaS.
The information in this case study is my own and does not necessarily reflect the views of Zūm Rails.
Summary & Results
To improve checkout conversion rates and UX, I took the initiative to redesign Connect UI, a major checkout feature for clients’ B2C end users. Our design goal: accessibility and consistency across all screen sizes.
We achieved this by ensuring effective communication with stakeholders across departments and teams, building the best solutions, and leveraging their expertise.
We achieved this by ensuring effective communication with stakeholders across departments and teams, building the best solutions, and leveraging their expertise.
26%
increase in checkout conversion
$7.5MM
additional annual volume est.
30%
increase in task completion
Analyzing the Data
Mobile users accounted for a significant portion of all users, at 42%.
However, a significant portion of these users dropped off after reaching the information entry stage, leading to decreased conversions.
However, a significant portion of these users dropped off after reaching the information entry stage, leading to decreased conversions.
Unclear Instructions & High Interaction Cost
Imagine you're a B2C user of a B2B Zūm client. On your mobile Gmail app, you receive an invoice link for a product or service. You open it, but there is an unbelievable amount of friction. First, you have to go through several unnecessary steps. Then, you realize key elements are cut off, unselectable, and there's no clear information to ensure you're purchasing the right product. Frustrated, you close the tab and give up, hoping to remember to reopen it later on a computer.
This is the flow to purchase a product. For payment profiles (recurring payments), users cannot select a payment method if it is cut off.
Internal & External Insights
Together with the PMs, I conducted multiple user interviews to gather insights and identify pain points. These interviews included both internal users who worked closely with clients, B2B clients, and the clients' B2C users.
Findings: Artifacts, Missing Info, and Friction
- Artifacts from Other Checkout Functions: Multiple prices and plans require additional clicks and interaction cost, even when only one price/plan is available (design debt). This also obscured other important information, taking up space.
- Product Information Missing: There was limited information about products, which was not clearly presented. This left users unsure of whether they were purchasing the correct product.
- High interaction cost: A side effect of artifacts from other checkout functions was an increased number of clicks required to perform a specific function.
Desired Outcomes/Goals
- Increase conversion rate
- Enhance accessibility on smaller screen sizes
- Reduce interaction cost (number of clicks)
Inspired by Shopify's Checkout Layout: A Masterclass in UX
Shopify's checkout model addressed most of the issues we uncovered during user interviews as well as our design goals.
I approached this problem by looking beyond direct competitors and examining how other big companies with comparable features addressed similar challenges, cross-referencing these insights with the user feedback we received as opposed to rote copy.
- Clear Payment Breakdown: Shopify provides a transparent and detailed breakdown of charges.
- More Product Information: Shopify offers comprehensive product information, clearly laid out to help users make informed decisions.
Our Initial Solution
Keeping in mind what I learned from Shopify's checkout experience as well as our interview findings, this was the initial solution I came up with.
Overall, it was well received, especially regarding the level of detail and breakdown for the total dollar amount.
Issues: Mobile Testing
While desktop testing was a success, mobile/SDK testing revealed significant issues. Users who had not previously used the desktop version did not realize there were other payment methods available with some scrolling. This problem mirrored the issues encountered with the original design, but in a different way.
This reminded me a lot of my work at Dyne on the meetup redesign and the issues with infinite scrolling.
The key takeaway was that we needed a way to display all available payment methods initially on mobile.
Reiterating: Navigation Tabs
We implemented navigation tabs to switch between payment methods, creating a consistent design for both mobile and desktop. This solution reduced high interaction costs and ensured all available payment methods were visible to users.
Naturally, this tested much better, even with users who saw the mobile design first.
Challenges: Developer Resources and User Preferences
Determining User Preferences: Without the initial payment selection, it was unclear which payment method users preferred to use.
By examining our data, we discovered that most B2C users predominantly used EFT (transfers between bank accounts).
By examining our data, we discovered that most B2C users predominantly used EFT (transfers between bank accounts).
Showing the most commonly selected payment method further reduced required clicks.
Results
Usability testing for the redesign yielded a 30% increase in task completion rates for mobile testers. Additionally, 6 months after the redesign was shipped and implemented, we noted a 26% increase in checkout conversion rates compared to the previous baseline. Based on this, we estimate an additional $7.5MM in annual checkout volume.
26%
increase in checkout conversion
$7.5MM
additional annual volume est.
30%
increase in task completion
Key Takeaway: Design Debt Accumulates Interest
The redesign of Connect UI at Zūm Rails underscores the importance of focusing on user needs and accessibility. By addressing key issues such as unclear instructions, high interaction costs (friction), and mobile usability, our work increased checkout conversion rates.
These problems were direct results of design debt, which we didn't realize was impacting conversion rates. In other words, the design debt was accumulating interest. In the future, I'll advocate more for addressing design debt, especially if its impact outweighs the benefits of ignoring it.
While only one initial goal was tied to a business metric, focusing on UX led to increased conversion rates and B2B client adoption as a secondary effect.
These problems were direct results of design debt, which we didn't realize was impacting conversion rates. In other words, the design debt was accumulating interest. In the future, I'll advocate more for addressing design debt, especially if its impact outweighs the benefits of ignoring it.
While only one initial goal was tied to a business metric, focusing on UX led to increased conversion rates and B2B client adoption as a secondary effect.