How Improving Accessibility Boosted Checkout Conversion Rates by 26%
Zūm Rails | 5 minute read
The final solution kept an accessible and consistent experience across desktop, mobile/SDK platforms.
A Team That Defies Siloing
To improve user experience and boost client retention, I took the initiative to redesign Connect UI, a major checkout feature for clients’ B2C end users. By focusing on accessibility across all screen sizes, the redesign resulted in a 26% increase in checkout conversion rates.
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.
The information in this case study is my own and does not necessarily reflect the views of Zūm Rails.
Who We Are
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.
Our design principles prioritize accessibility and intuitive design for both client-facing and internal features. Before I joined, the design efforts were mainly on new feature development to support B2B Fintech and client retention. This focus led to challenges such as design debt, even on popular and frequently used features.
Our design principles prioritize accessibility and intuitive design for both client-facing and internal features. Before I joined, the design efforts were mainly on new feature development to support B2B Fintech and client retention. This focus led to challenges such as design debt, even on popular and frequently used features.
Analyzing the Data
Mobile users accounted for a significant portion of all users, at 42%.
However, most of these users dropped off after reaching the information entry stage, leading to decreased conversions.
However, most of these users dropped off after reaching the information entry stage, leading to decreased conversions.
The information entry stage on mobile had apparent issues that were identified even before conducting user interviews.
Unclear Instructions & High Interaction Cost
Imagine you're a B2C user of a B2B Zūm client. On your phone, you receive an invoice link for a product or service. You open it, but you are greeted with a convoluted mess. 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.
Spoiler: users often forgot to reopen it later on their computers.
Leveraging Insights from Internal Stakeholders and B2C Users
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.
Our hope was that internal users who worked closely with clients would be able to provide additional insights.
Key findings:
1. 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.
This also obscured other important information, taking up space.
2. 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.
3. 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
1. Increase conversion rate
2. Enhance accessibility on smaller screen sizes
3. 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.
1. Clear Payment Breakdown: Shopify provides a transparent and detailed breakdown of charges.
2. 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.
Scarce Developer Resources: Despite the potential impact of this project, developers were busy with work on other features.
Having been burned once before, I wanted to ensure there were no issues with my design or anything too time-consuming to implement. To achieve this, I hosted internal workshops with the relevant developers to gather their feedback and suggestions for improvements to decrease implementation effort.
Having been burned once before, I wanted to ensure there were no issues with my design or anything too time-consuming to implement. To achieve this, I hosted internal workshops with the relevant developers to gather their feedback and suggestions for improvements to decrease implementation effort.
Luckily, there were no complaints or revisions required, so I used the remainder of the session to answer any questions.
Results
1. Increased conversion rate by 26%
2. Increased the number of B2B clients using Connect UI for checkout by 14% (previously, they were using other solutions)
3. Reduced interaction cost by more than 3 clicks from selecting the payment method to 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, 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.