Loading...

Error in Check-Out

Teachable

Error Handling Flow

In the check-out process, there’s a form stage that a user needs to fill out with their information in order to process to purchase the course order. If there’s an error preventing the user from submitting their order the Subscribe/Submit button (located at the bottom of the form page) will change its color to gray, and the screen will refresh at the same location after the action.

Understanding the Users

In order to understand if this flow is successful, it’s best to conduct user testing with real users going through a real purchase process, via FullStory. It’s best to analyze real users in a real scenario to see if there are natural hiccups that would delay the process, vs a fake scenario where a tester would hunt for a possible mistake that’s outside of the flow.

Problem

After observing real users, it became clear that there are parts of the flow that are frustrating to many users. By default, users would just have to figure out that they would need to scroll up since the action after clicking the Subscribe/Submit button is the same location without notifying the user to scroll up. Around more than 90% of the users stayed at the bottom and/or try to scroll down, then it’s only natural to scroll up after trying everything else which uses a good amount of the error correction time. Some users scroll all the way up to the top of the page, then down again multiple times missing the error message box & highlighted the error entry field completely. Then finally back up to the error. The actual error box message, which notifies the user what’s the actual issue/error is located in a section/box above all the entry field boxes that would hold the error(s). There were some users that scrolled up to the error and didn’t even get to see the error message box, because of the location. Overall the main problems based on the user data that was collected were the after-action location of the refresh error page and the location of the error message box.

Solution

In the new flow, to solve the issue/confusion with users on not knowing what to do after they submit and hopefully figuring out they need to scroll up without notification to scroll. Now if there’s an error, the screen would auto-scroll up to the 1st error after the user submits a form incorrectly. Which also saves them time to quickly correct the error. Also, the error message is a sticky red bar at the top of the screen.