Increasing Conversions with a Checkout Redesign
MedBridge is an online education platform. Their subscription gives clinicians access to courses, patient education, and rehabilitation program tools.
In looking for new opportunities to increase customer acquisition, we decided to redesign our checkout experience and conduct an A/B test to compare the conversion rate of the current checkout with the new design.
My role: Lead Product Designer
Google Analytics, competitive analysis, heuristic evaluation, sketches, wireframes, user testing, hi-fidelity designs
- Redesigned the layout to focus on primary tasks, in order to reduce friction at each step of the checkout.
- Eliminated unnecessary work and instilled trust in order to keep users in the checkout conversion funnel
- Developed form field UI and interactions in order to reduce user errors, reducing cart abandonment rates
Research & Key Insights
#1: Navigation causing users to exit funnel
I first set up a funnel in Google Analytics to understand what users were doing at every step of the checkout. I discovered users exiting the checkout to pages in our navigation.
#2: Unclear what the primary task is on each page
To identify design opportunities I first looked at best-in-class subscription-based company checkouts to learn what they were doing right. I then conducted a design heuristic evaluation of our current checkout. I noticed the order summary was higher in the visual hierarchy, taking focus off of the "Create login" and "Payment Information" steps.
#3: No mobile experience
Because our checkout wasn't responsive, we were creating a barrier to purchase for mobile users, causing potential customers to drop-off.
Sketches and wireframes
In hopes of making the biggest impact on conversion, we decided to create a completely different layout to A/B test. I explored responsive layouts that allowed for focus on the primary task and maintained context throughout the experience.
Because Google Analytics showed users exiting our funnel to pages in the global navigation, I eliminated the navigation.
During the design process I created a hi-fidelity prototype and conducted user testing. I observed users hesitating on the "Create login" step, unsure if they should enter their promo code first. To make it clearer what the primary task was, in my next iteration I removed the order summary.
Prioritizing the most important action
To give the "Create login" and "Payment information" steps higher priority in the visual hierarchy, I reduced the size of the order summary. Aligning with the user's mental model of reviewing an order before purchase, I moved the "Purchase" button below the order summary.
As uncovered through a competitive analysis, to provide a sense of security, I added trust symbols near the "Purchase" button. To reduce work required to purchase, I eliminated unnecessary fields, including our credit card type and shipping address fields.
Preventing errors through interactions
To prevent errors after users click the final "Purchase" button, I designed our fields to use inline validation.
I used material design standards as my baseline, and adapted for our users and contexts.
An A/B test of the new design against the old announced the new design as the winner, showing a 32% increase in conversion rate! For details let's chat in person:).