Loading...

Teachable

Improved the checkout error handling process 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.

My contribution: My job for this project was to re-evaluate and improve the checkout process and error handling flow, by designing new UX flows. Within the checkout process, when a user makes an error on the form page, how will the platform handle and notify users to correct their mistake? To better understand any users' confusion, I collected user flow data from previous users who experienced the original flow to analyze better and produce upgraded solutions. Then tested the new UX flow with user testers, to see if the new flow was a success.
Client
Teachable

Duration
1 month

Tools
Figma, FullStory, UserTesting, Atlassian Confluence

My Role
Product Designer, Freelance

Team
1 Senior Product Designer
1 Product Manager

Observation
Error handling flow

The check-out process that potential students would need to fill out their information on this form page to purchase course. If the student happens to make a mistake on their form, the screen will push to the error form page, which the page is refreshed at the bottom of the screen and the Subscribe/Submit button (located at the bottom of the form page) will change color from the green to gray.

Findings

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.


Challenges

Confusing error flow

After observing the real user responses, the crucial flow components that frustrated many users became obvious.

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 message box completely & the error entry field the first time. Users would scroll up and down multiple times because the error refreshed page location was stable at the bottom of the page without any notification/action instructions for the user. At this stage of the process, it felt like a guessing game for the users.

Gray button In the error refreshed page the obvious first impression difference was the “Subscribe” button color changing from green to gray. Since gray buttons are universally associated with the button being disabled without any action or instructions, a gray button would confuse them, assuming the page is at a stand-still.

Some users didn’t see the error message. The error message box that notifies users of the exact error was located above all entry fields that would hold the actual error(s). It would be ideal at the original location if the refresh page location started at the top of the page. Users would have to scroll down to the error message box to understand what they did wrong before seeing the actual error field.


Exploration

During this phase, I had to ask myself, "how can I notify the user to fix their error within a short period of time?" Also, I need to figure out an ideal transition to push the user from the start of the error refresh page to viewing/noticing the actual error.

Breaking up sections

The original scroll duration from bottom to top is lengthy and time-consuming. Another solution I would recommend is breaking the sections, which will reduce the user's scroll time to no scroll or at least very limited scroll time. The user would also see the visual UI indicators of the error text field that they would need to fix. Although with less scroll time in this solution, there would be more clicks within this UX flow. This UX solution would not be within this sprint.

Reviewing the error message box location

Since the current message box location isn't ideal, nor benefits the user, there wasn't a reason to keep the messaging box. With the removal of the error message box, I needed to find a better solution to display that there is an error. Since the problem with the message box was visually finding the box, adding a sticky message bar to notify the user would be a better solution, especially for mobile view, since mobile has limited real estate space.


Solution

New effortless error notifications

Cleared up any previous user confusion from the original flow.

Auto-scroll feature: Saves users time to quickly correct the error, with no guessing on what they did wrong in the form. The screen will auto-scroll up to the top first error after clicking the “Subscribe” button (from the previous page).

Sticky notification error message bar: Adding a sticky notification bar at the top of the screen will ensure users are notified without them looking for the error message.

UI elements to think about... The original CTA button was gray after submission, and I can understand why the UI aspect of that button was confusing users. A gray-colored CTA button is not ideal for active CTA buttons since gray buttons are a universal disabled button color. Changing the color to the functional branding UI guideline will present itself as a clickable, interactive button.

Click to enlarge

Eliminating user time delays

The new flow cuts the typical user's time figuring out the error refresh page purpose, instead of confused users waiting at the bottom. This version will automatically pushing up the page them to see the error. So there's a quicker in and out fix to proceed to the checkout.


Outcome

Testing the new flow

Users tested the new UX flow prototype via UserTesting. Added pop-up specific questions within the UserTesting platform to appear during their session, to help push users to explain their thought-process. Which drives the users to think out-loud during each step, to better understand any oversights or victories.

Results: All user’s complete time duration was significantly shorter with the new flow than original flow.

All users said the new flow was effortless to find and fix the error message to complete their order.

None of the users mentioned they were frustrated during the new flow.