Project brief

The famous wine shop gave me the task to redesign its checkout process as a case study for the interview. Its existing e-commerce website, where it sold wine worldwide, was experiencing low conversion rates ( Important : invented scenario).

Please note that I will not cover the entire e-commerce experience of the users in this case study. I will be addressing the issues faced by the users after they have chosen and added their product to the cart for checkout.

The checkout process is an important part of any e-commerce website. Here I will discuss how I redesigned the checkout process to improve sales and conversion rates.

"Having a hassle-free experience from cart to checkout will help boost the conversion rate of an e-commerce website".

When using an e-commerce website, why do some users have difficulty performing a successful checkout?

68.8%

The global average cart abandonment rate according to Baymard Research

How do they decide what to buy?

In the case of a new or frequent user, what causes frustration that can negatively impact their conversion rate?

During the checkout process, are you asking for too many details?

Reasons for abandonment during checkout (Source: Baymard Institute).

To visualize the rest of this project is required the use of a desktop

Possible existing problems on the Vivino website

A high dropoff rate from the cart page to the shipping page? There was a further dropoff of users from the Shipping page to the Payment page. As a result, the conversion rate was low.

Concerns regarding payment security? There was no visual indication of how secure the payment of the website was to ensure that customers' money is secure and is sent through a secure payment gateway.

Long checkout process? Taking too long to complete the checkout process resulted in low conversion rates.

Research: Identifying the problems in detail

My first step was to conduct a heuristic analysis of all the pages that the user has to navigate through to complete the checkout process.

This was done to uncover possible problems during checkout, calculate the number of clicks required to place an order, and identify any potential usability issues.

To understand the common trends of a fast checkout experience, I did some competitive analysis.

A series of interviews were conducted with people who know the site and often place orders in order to better understand the problems they are experiencing with the current checkout process.

Let me take you through this case study for improving the experience for the users of the Vivino website.

Competitive Analysis

Before entering the design phase of flow and wireframe, I will benchmark some successful checkout examples platforms that I have researched.

The sites chosen were selected from the analysis of reports and from the documentation study of other designers available on the web.

The source of greatest interest is the documentation offered partly free of charge by the Baymard Institute in Denmark.

The interfaces of the sites described in this case study were analyzed in February 2021. They may therefore be different from the current design.

Best Buy

The best feature of the Best Buy website’s checkout page is simplicity. It only asks for the shipping information and contact info. Then you can proceed to the payments page.

To avoid confusion and clutter, Best Buy has divided the checkout process into multiple pages. It also allows users to check out items as a guest or sign in to an account.

Etsy

Etsy is the largest online shop for arts and crafts that empowers artists to make art and sell it online. Also inspiring is Etsy’s checkout page. Currently, it’s the most straightforward checkout page that we’ve seen.

Without account registration, Etsy allows you to proceed to the checkout as a guest. And, with a clutter-free interface, it requires a simple step-by-step checkout process.

Scandic

The more complex a hotel’s booking or checkout process is, the less likely travelers will book it. The goal in e-commerce is to minimize friction in the buying process, or in the case of hotels, in the booking process. This means that they have to make it easy for travelers to book a room with them. This is a good example from a Scandinavian Hotel Chain that:

1. Avoid long checkout forms and asking for too much information

2. Use autofill for the forms (i.e. The City and other information automatically completes when the user enter their social security number)

3. The checkout process is intuitive and is well aligned (it means that also the mobile experience will be very similar and easy to follow)

I also found some bad examples of checkout that need to be considered.

Tiger Direct

TigerDirect is a California-based online retailer dealing in electronics, computers, and computer components that cater to business and corporate customers.

This site has numerous problems that cause their customers to abandon checkout for various reasons :

- The checkout is full of text, the user doesn´t know exactly what is going to buy.
- No CTA to go the next steps
- Absence of a progress bar
- Lack of sense of security
- Wrong label alignment – hard for the user to read
- Bad design and distractions with links that are not helping the checkout
- No social sign-in to speed up the registration
- Limited alternative payment options

This checkout experience needs a total restyling

The most important changes are:

- See the products that were in the cart with picture and cart details allowing users to change their minds, and offer full control over their cart contents
- Make the payment form look secure by adding trusted logos strategically during the checkout process
- Use a single column layout also to work much better on smaller screens

Arngren

Norwegian online retailer Arngren
www.arngren.net

Overwhelming visuals and puzzling navigation

Some products have a price, some products are not ---> difficulties with connecting items to their prices

Confusing website layout
non-uniform font styles and colors

Plenty of graphics make the website less responsive and increase loading speed up to several seconds

The links to categories in the index section lead either to single products or groups of different goods

The search result is difficult to compare as they do not appear with product photos, prices, or clear descriptions

Impossible to pay online, the user needs to pay in advance to the Bank Account of the owner

Pros and Cons of the actual Vivino checkout process

PROS

- Guest checkout available

- No unnecessary information

- No surprise costs and fees

- Use form validation and error notifications

CONS

- Complex, burdensome process

- Lack of available payment methods

- Not very clean design with concern distractions

- No security seals and badges

My Proposal

On the login page, I planned to organize the layout according to the importance of each element.

I reduced the steps to complete the checkout from five to three.

A progress indicator was added to indicate the remained steps and the effort required.

The details page

In the actual Vivino design, the details page has some major problems:

1. The checkout form is extremely long, users have to scroll through to fill in all the details regarding the shipping that are divided into different sections.

2. It is possible to click and view only one section at a time

To solve these problems, the details section and the Shipping method section were merged.

I have combined the Details section and the Shipping method section and placed them together on the same page. This not only saves the number of sections and steps but also combines related information together.

I decided to chunk in groups to help the user process data faster and to make the form easier to grasp. It´s easier to understand and a lot less intimidating.

The form follows a vertical alignment to help users through the design from top to bottom.

The users will know the optional field, everything else is assumed to be mandatory (no asterisk=old-dated convention)

These are the screenshots from my checkout redesign

Order Confirmation and Payment details were placed together. I made some new significant improvements:

Different kinds of payments are accepted (even cryptocurrency).

Perception of security is now increased with payment processor and padlocks icons.

The payment amount is clear and visible. The user knows exactly what is going to pay.

Measuring UX Success

To understand if the design solutions have solved the user problems and have improved the overall checkout experience I should know the results from the Vivino team. Since this was an hypothetical proposal project, I don´t have access to these information. If I had the opportunity to access Vivino's information, I would definitely check these Key Performance Indicators (KPI) :

Time to complete order

The total time that takes for a user to complete a purchase.

Shopping cart abandonment rate

Number of people who are able to add the products to the cart but leave the website without making a purchase.

Users drop off from checkout

Number of people who entered the checkout pages after login but dropped out and did not complete their order purchase.

Improving an E-Commerce Checkout Experience : Vivino website