Intro
Jane was a privately owned e-commerce marketplace where customers could find discounts on products curated from small businesses around the United States. Jane provided the platform, marketing, and exposure for the products that they sold in exchange for a percentage of products’ sales value.
Opportunity
In 2017 Jane formed the Purchase team to grease and grow their sales funnel. Our primary directive was to make sure cart and checkout were as efficient as possible.
Jane.com is looking to increase profits through investment in their shoppers’ checkout experience.
Competitive analysis
The audit table in Airtable of all experience issues from Jane’s checkout
Industry research: Baymard Institute
Using the Baymard Institute’s library of ux benchmarks based on the top 1% of industry performers (e.g. Amazon, Etsy, Walmart), I conducted an extensive audit of Jane’s checkout. I found 5 core issues that ranked high in tasks importance, issue severity and or issue frequency.
The top 5 issues in checkout
- Tasks were non-linear
- Checkout was not enclosed
- Purchase had a sign up wall
- Excessive form fields
- Conflicting CTAs
Customer validation
Screen capture of a customer in Fullstory struggling with the need to “Save card” before placing their order.
I then validated the issues I found in the Baymard audit via Fullstory, a product lookback service, to watch users go through Jane’s checkout. Within a few hours of observation, all of the top issues from the audit had been validated as happening in multiple users’ experiences.
We presented our findings to our stakeholders and got the go ahead to begin ideation and planning.
Going to stakeholders with solid industry and customer data made it easy to communicate the value of addressing the issues in checkout.
Ideation
Card sorting and wire-framing done by contributors and stakeholders.
Task sorting & group wire-framing
We checked some of our assumptions against our team and stakeholder ideas by having them do task sorting and wire-framing activities.
Task sorting and wire-framing as a team allowed us to quickly check our assumptions with stakeholders and the team regarding the flow and organization of checkout.
Brainstorming results (left) for checkout based on the product values for Jane (right).
Product values brainstorming
We also held a brainstorming session wherein groups of stakeholders and contributors were assigned values like “Jane is transparent” and associated principles like “Show opportunities” and tasked with finding ways the checkout experience could manifest those values and principles.
Product value brainstorming quickly generated impactful ideas as well as investment from the team.
Because there was so much we intended to improve in the checkout experience, we broke the improvements into phases.
- Phase 1 - Make checkout linear & enclosed
- Phase 2 - Make checkout forms easy
- Phase 3 - Introduce guest checkout
Phase 1 - Make checkout linear & enclosed
We chose to start with linear and enclosed checkout because it was the easiest technically to achieve. In addition, starting with this would allow us to introduce much better tracking analytics.
We created two iterations of checkout that addressed the need to isolate checkout and make checkout tasks linear. One iteration was a step-by-step design similar to Etsy and the other was an accordion design similar to Walmart.
Step-by-step checkout prototype
Step-by-step checkout
Step-by-step checkout isolated each checkout task into a dedicated screen. While it allowed users to focus on their tasks, it did obscure some information like cart items, order summary, and completed steps.
Accordion checkout prototype
Accordion checkout
Accordion checkout allowed us to present focused checkout tasks while simultaneously presenting order summary, cart, and completed step information.
Both iterations performed well in usability testing.
In live A/B testing the Accordion checkout created a larger increase in GMV (2.1%).
Phase 2 - Make checkout tasks easy
Usability improvements for checkout tasks / forms were separated because they could be pursued independently and incrementally.
Click through of shipping improvements.
Shipping address improvements
The form for adding a shipping address had many opportunities for improvements.
Some noteworthy improvements include:
Consolidating the name fields
Pre-filling the name field from account info
Introducing an address typeahead / autofill
Reordering to prioritize ZIP code
Introducing a ZIP code typeahead / autofill
Click through of payment method improvements.
Payment method improvement
The form for adding a payment method had many opportunities for improvement as well.
Some noteworthy improvements include:
Reordering the forms to match common card formats
Pre-filling and highlighting account name in the cardholder name field
Summoning useful digital keyboards for the field (e.g. number for date)
Showing card type specific placeholders and image indicators in the card number field
Showing success and error indicators on the card number field via LUHN validation with front-end regex
Adding help text to labels
Adding help image and tooltip for security code
Phase 2 of improvements was deprioritized and eventually abandoned though I believe firmly many of these improvements could have had great impact on GMV and checkout conversion rates.
Phase 3 - Introduce guest checkout
In introducing guest checkout we had two conflicting objectives. On one hand we needed to make guest checkout available and thus welcome many new customers. On the other hand, Jane had a very loyal return customer base and strong faith in the value of account creation.
So, the designs had to accommodate both an unencumbered path to checkout for all, as well as a clear and enticing call to sign in / up for our would be account holders. We introduced a handful of variations to promote account creations and AB tested them against the baseline.
Prototype of guest checkout.
We AB tested 6 variations of guest checkout promoting account creation in numerous ways.
The winning variation was to upsell account creation during the review step, when the customer has already provided an email for contact.
In the end, guest checkout increased GMV by 10.2%.
Outcome
Checkout went from a black box inside which customers felt overwhelmed and confused, to a simple and linear experience tracked with extensive product analytics.