ACEABLE Checkout Redesign
Project: Enhanced Checkout Experience Redesign
Objective
Optimize and streamline the user journey during the checkout process on our e-commerce websites for each of our three brands. Recognizing the importance of a seamless and user-friendly checkout, our goal was to reduce friction points, increase conversion rates, and enhance overall user satisfaction.
Research
A brief overview of the different research conducted throughout the design process. While some of the research was necessary to begin designing, some research continued throughout the design process to verify our decisions. Some of these research efforts included but were not limited to:
Personas
Checkout Trends & Best Practices
Limitations on our platform
Requirements for individual brands
Conversion testing (A/B)
User testing
Personas
For our driving courses at Aceable we generally cater to two personas: the parent and the student.
Result of Study
Our current checkout experience provides options for parents that differ from the student experience, but these systems were dated and did not perform well. By creating personas we were able to break down the needs of a student vs. the needs of a parent. As a result of the parent research done for checkout, we have started a series of new projects that focus on the parent experience.
Checkout Trends & Best Practices
While designing our new experience, I spent time looking at popular checkouts and creating lists of best practices. The list of checkouts included both regular e-commerce sites as well as education based sites.
Key Information I was seeking:
Number of steps to complete checkout from website entry to purchase
Number of clicks from website entry to purchase
Information collected (name, email, are they setting up a password?)
Buy now, pay later options
Error messaging and handling
Result of Study:
Reducing the clicks between entering our site and completing their purchase will result in better conversion
While limiting the amount of information collected in checkout may improve conversion, not collecting enough information will result in account error and customer experience calls after checkout
Buy now, pay later will increase purchases made over $100
Clear and quick error messaging is key
Variations
Understanding the nuances of three different brands and the different variations and requirements of each can be tedious, but necessary. During the research phase it was essential that all versions of our checkout were documented to ensure we had every element accounted for in the designs.
Result of Study:
Multiple new components were created in order to comply with state regulations, as well as improve our user’s understanding of requirements when purchasing our course.
User A/B Testing
Before releasing our new parent checkout experience, we wanted to ensure our users would understand how interact with our account creation options. Using a self-moderated test in Lookback, we ran two different tests and compared responses to select the best option.
Each test had 2 prompts that participants had to go through, one acting as a student, and one acting as a parent. Participants were asked to interact with the prototype accordingly while talking through their thoughts and decisions.
Option 2: A dropdown parent vs. student option
Option 1: A tabbed parent vs. student option
Result of Study:
Option 1 Results: While participants were eventually able to work out the tabbed option, it was not always clear that the user could only select one and not go back and forth between them.
Option 2 WINNER: Participants had no problem understanding this version of the account creation. It was clear they were selecting who they were checking out as, and they understood how to enter the information.
Design System
Starting from scratch with the designs meant we needed to build out the reusable components for each brand. Each brand got its own design treatment that follow brand guidelines and provided developers with a one stop shop for anything they would see in the designs going forward. This includes different states a component might go through, additional options specific to state regulations, and any error or information handling that might appear throughout the checkout process.
Previous State
Click through to view the previous checkouts from our different brands.
UI Pass
While continuing our UX tests, we worked with developers to transition our checkouts to their new look while keeping the existing functionality. This allowed us to test the new look, get each component pixel perfect, and verify that our new look will not hurt conversion.
UX Elements
While the developers built and launched our UI changes, the design team and conversion rate optimization team worked to design and test new elements with the main goal of these elements being to improve our user experience.
Account Creation
A major change to our checkout is found in the account creation section:
Student vs. Parent: Providing the option to checkout as a parent or a student allows for more parent involvement and an increase in parent account created while also collecting student info in the parent section, and vice versa.
Last Name: As our app requires student and parent information for certification, collecting last name in the checkout reduces steps in app and when tested, did not hurt conversion
Double Email: Having the user confirm their email address reduces the amount of CX calls due to log in issues
Password: Adding a strength bar helps ensure users are providing a safer password, and by allowing users to unhide their password reduces password entry errors.
Post Checkout
In our former experience, users would complete their purchase and be prompted to create their password on the next page. This created confusion and often was ignored which resulted in an increase in CX calls and complaints. Additionally, after a password was entered, users would be led into our web app experience without mention of our mobile app.
To improve this experience we moved password creation into the account creation (seen above) and used our post checkout page to ensure that users have the option of web vs mobile and a direct way to access either.
To view all this and more, head to any of our 3 brand’s websites and browse through our checkout!