Checkout UX redesign
Fabric, an insurance tech company, wanted to update the UI/UX on their checkout flow. From a complicated, two-screen process, we simplified the experience into a single screen, with improved functionality that enabled customers to customize their coverage, leading to a better overall user experience.
(Note: The majority of purchases are made via mobile, so we approached this mobile-first).
-
Design director
-
Figma
1. ORIGINAL
The original checkout flow was a legacy experience from a previous design manager, during a time when Fabric had a limited product line up. As the company expanded their term length offerings, the existing flow became exceedingly complicated and difficult for customers to navigate.
The experience consisted of two screens:
(1) A confusing offer screen, in which users would need to expand a “More options” button to see additional term lengths options. There was also no way to customize your offer if the combination you were looking for was not part of the options shown, short of purchasing the policy, then contacting customer service to edit it.
(2) A visually heavy checkout screen that was redundant of the previous screen.
2. RESEARCH & TESTING
Before I joined Fabric, the company had just moved from a colored background in their product to an all-white background, but this change was not implemented in the offer/checkout experience. Therefore, the parameters for this project were to:
(1) Include an all-white background to match the rest of the product experience
(2) Combine the separate offer & checkout screens into a single screen experience
(3) Give customers the ability to easily customize their coverage and view different policy combinations
RESEARCH
After reviewing our current experience, we researched the checkout experience of several competitors in the same industry. We also looked at checkout flows across well-known ecommerce brands, such as Nike, Amazon, Asos, etc. While we weren’t selling a tangible product, we wanted an experience that mimicked flows that people were used to engaging with.
PROTOTYPING & USER TESTING
Based on our research, we created several prototypes and used UserTesting to test various UI/UX options.
Initially, we tested an experience that displayed all information at once, versus a pop-up editing experience. While users preferred the first experience, we found that they were often distracted, opting to scroll around, versus focusing on each section.
From this finding, we tested an accordion option, where each module opened up once the previous module was completed. We found that this UI performed very well with users – it helped them to focus on the functionality in each section, simplified cognitive load, and made the experience feel easier, even though they were going through the same actions.
3. NEW CHECKOUT FLOW
The new checkout flow is dramatically simplified versus the original, cluttered version. Now, users can easily review their policy, edit their coverage, and pay – all in one seamless experience. While it is still early, we have already seen same-day purchases increase from 76% v. 79%. From a qualitative standpoint, the move to an all-white background gives the user a more seamless transition from the rest of the application to checkout, and the ability to edit coverage easily helps to address customer feedback that we've received from Customer Support – all of which works together to create a better overall user experience.
