Checkout - Expert review & Heuristic evaluation

UX & UI Design

The problem

The checkout process in SoftUni has many flaws. Numerous pitfalls were identified during the UX research and evaluation. Misleading information, missing or wrong instructions, and more. Leading to mistrust, and abandonment of the checkout process. The SoftUni team tried to solve the problems by adding more text for the user to read, which was an obvious but not effective solution.

The checkout process needed expert review & UX heuristic evaluation. In this case study, I will demonstrate how you can still make crucial decisions even when you don’t have access to all the information you need, by leaning on the UX heuristics and expert reviews.

Industry:
Online Education
Client:
Designer:
Nikola Velev

nikola.velev@abv.bg
+359 883 390 312

Current Design

Strategy for identifying and solving the problem

Objective:

I’ve built a strategy for identifying and solving all the specific problems for this case. I’ve separated the payment process into chunks.

First divided by steps:

  • Payment Method screens
  • Information Summary screen

 

Then divided by payment method:

  • Credit / Debit Card payment process
  • Bank transfer payment process
  • EasyPay payment process
  • ePay payment process

In the end, I gathered all the parts into one unified solution.

Payment Method

Objective:

Identify the problems users are facing while choosing the payment method. For my research and analysis, I used: user testing, statistical data from Google Analytics, user sessions from Yandex Metrica, UX expert analysis, and “10 heuristics for user interface” from the Nielson Norman group – link here.

Payment Method Sreeen - Current Design

If you want your customers to checkout with ease and not abandon their orders you should focus on several things: trust, the right information presented at the right time, and flawless interactions.

The pitfalls SoftUni’s payment method screen:

Missing logo

So simple, but yet so important detail. If the logo is missing, how do you expect the users to feel they are at the right place and trust you?

Some users are receiving payment links in their mailboxes. If they visit the link, they will be presented will little to no branding elements. Clearly, the most important branding element will be missing.

So my suggestion is: place the logo on the page to build trust.

Wrong progress trackers title

The first step in the process is named “Избор на пакет” or “Choose a Package”. That is clearly a misleading title.

Why? The user can not choose a package at this step at all. The course packages options are available for less than 1 % of all the courses offered by SoftUni. So we can say that 99 % of the time the user will not be able to choose a package. So why this step should be named that way?

Misleading UI element

For “Избор на пакет” or “Choose a Package” the user is presented with a drop-down UI element. But there is only one option behind it. As stated in the previous point the user will have only one option more than 99% of the time.

My suggestion: display the dropdown only for the extreme 1% of the cases.

Misleading UX

Actually, the only thing that the user must choose on this page before he or she continues is “Начин на плащане” or “Payment method”.

But doesn’t it look like the field is already filled in for you? Just like the other “options”, this one looks like it is already filled in.

Wrong button placement

The user’s attention is dragged to the wrong button. When you choose a payment method from the dropdown some payment provider’s logos appear. The eye registers that movement and it is naturally dragged to the wrong button. This clearly leads to confusion.

Missing information and option

“Форма на обучение” is an option for the user where he/she can choose to pay for the online course or for the face-to-face training. This affects the price of the course directly. For example, one course can have two options:

a) 100 BGN – Online course
b) 180 BGN – Face-To-Face Training

That is not clear to the user at all. In fact, if he or she wants to check the prices for the online and face-to-face training he/she has to go back to the course page.

My suggestion: give the user opportunity to see the prices and to choose the suitable option on this page, without the need to go back.

Design Review - Video