Refine and simplify the checkout error handling flow during checkout for an online educational course management platform designated for educators and students.
Teachable is an educational online course management platform for educators, entrepreneurs, and coaches as well as students in any industry/topic. The platform allows educators to be flexible in teaching and educating their students; and for students to have easy access to an all-in-one course experience.
Improve the error handling flow during the checkout process for students purchasing courses to provide users with a clear understanding of which text field they need to adjust or fill out, thereby reducing confusion and minimizing the need for guessing.
Focused on how the platform should handle and notify users when they make errors on the form page. To better understand any potential user confusion, I collected user flow data from previous users who had experienced the original flow. This data analysis informed the development of improved solutions. Finally, I tested the new UX flow with user testers to evaluate its effectiveness.
CLIENT
Teachable
ROLE
Product Designer, freelance
During checkout, future students complete an online course purchase form. If a student makes a mistake, they are directed to an error page. Unfortunately, this error page refreshes to the bottom of the screen, leaving the student stranded. The "Subscribe/Submit" button (still green despite the error) remains stuck at the bottom with no guidance on next steps.
Gaining user insight
It was best to analyze real users in the checkout scenario to understand the successes and failures fully. We used FullStory, a great resource to collect real user experience data, with the users going through an actual purchase flow and errors. Reviewing the real flows were easy to find any natural hiccups vs. pushing out a fake potential prototype scenario; in a user prototype, they would hunt for a possible mistake instead of displaying genuine responses. Found that the users were confused with the error refresh page, which delayed their time to fix their error.
Observing real user responses to the current version revealed widespread user frustration with varying reasons, indicating multiple issues within the flow.
Most (90%) users waited at the bottom of the page and tried to scroll down by default. There was a delay in waiting for an action or potential pop-up instructions, and users would naturally scroll up after a delayed response.
Some (40-50%) users missed the error's location. Forced to scroll repeatedly, users struggled to locate the error message. Although the page refreshed, the message remained fixed at the bottom without any notification or instructions. This lack of guidance made error resolution feel like a guessing game. Additionally, the error message box, located above the entry fields, obscured the actual error field(s). Ideally, the page refresh would start at the top, allowing users to see the error message first, before scrolling down to the corresponding field.
Lack of instructions. Upon encountering an error, the page would refresh to display the error handling version. However, the only discernible difference was the CTA button changing color from green to gray. The page lacked any action prompts or instructions informing users of the error and the need to adjust the form.
Breaking sections into multiple pages
We tested breaking up the form sections into separate categories across multiple pages. This solution reduces scroll time and minimizes guesswork in identifying errors, as most errors will be readily visible within the screen's real estate. Consequently, a dedicated error notification bar might not be necessary, as the error support text from each field will be visually accessible on the screen.
Why this wouldn't work
While breaking the sections up into separate pages could be a long-term solution, it is not ideal for the immediate situation. This approach would require additional clicks and significantly extend the sprint cycle.
Auto-scroll feature: Previously, locating the specific error on the form was a major hurdle for users. The new auto-scroll feature streamlines the error correction process by eliminating guesswork and significantly reducing the time users spend searching for issues. Upon clicking the CTA button, the screen automatically scrolls to the top of the form and highlights the first encountered error. If the form contains multiple errors, the auto-scroll function will focus on the top error first and subsequently scroll down to highlight each remaining error individually until the form is error-free.
Sticky notification error message: Adding a sticky notification bar at the top of the screen ensures users are notified of any errors on the form, prompting them to address the issue before proceeding.
User feedback
To determine if the new user flow would lead to less user friction, we needed users to test the new UX flow prototype via UserTesting before sending it to the developers. Leveraging the UserTesting platform, we incorporated pop-up specific questions that appeared during users' testing sessions. These questions prompted users to verbalize their thought processes, which we captured through audio recordings. This encouraged users to think out loud during each step, providing valuable insights into potential oversights or successes.
Results
The results were overwhelmingly positive. All users completed the new flow significantly faster than the original flow. They found the new flow effortless to navigate and fix error messages, allowing them to complete their orders without any frustration. Observing the metrics confirmed the significant impact of the adjustments made to the flow.
