← Back

A new check out in steps
To create a new check out that had focus on bringing the customer easy and fast to payment, I and my UX designer created this check out which works in steps.

The idea is that steps comes one after another in an anchor scrolled order, where the customer gets a small summary in the same view as in the next step in the process. In that way the customer can focus on each step, making sure that the check out process goes faster and creates an overview that follows the customer.

What items the customer is about to purchase is always visible on the right side on desktop and tablet as a sticky feature, and on mobile it's only a tap away in the "Order summary" in the top of the page.

Step 1 — Personal information
The first information the customer have to fill out is his/her's personal information; name, address, email, etc.

If the customer already have an account, the system detects right after the email has been typed in and an overlay pops up with sign in steps. If the customer doesn't have an account, the customer will get the opportunity to create an account in the final step. More about that later. Should the  client make a typing error in e.g. the email address field, the system will of course tell the user that there is an error. 

Underneath Step 1 — Personal informatin, the user can see Step 2 — Delivery which is greyed out. The reason for the greyed out state is that the user have to fill out step 1, before continuing the check out flow.  

Step 2 — Delivery
Now its time for the next step; Delivery. It's fairly basic where the customer can choose between click and collect in store, a pick up shop or collect in store or delivery to the customer's home address. 

Right above the delivery input fields, the customer can see a resume of step 1 so he/she can make sure that everything is in place and correct. If there should be a mistake, its possible for the customer to go back to step 1 and make the changes. 

Step 3 — Payment
Last and final step to the check out process. As in the previous step, the customer get's a resumé of step 1 and step 2 to make sure that everything is correct. 

The customer have various options to pay; By credit card and Klarna. When the customer has decided what payment method he/she wants to use, the big black button encourages the customer to go on with the order. After placing the order, the customer get's an order confirmation.

The order confirmation says thank you for your purchase, and gives the customer an overview of the order. As mentioned in Step 1, there is a special feature if its a new customer to SAMSØE SAMSØE. If the system can't detect the email address as a user, the customer gets an easy opportunity to create a user by clicking the button "Create account". By doing that, the customer now have an account and the password will be send to the customer's email. It's easy and convenient. 

The conclusion
I and my UX designer had created a check out solution, with focus on mobile design, that is easy to complete, where the focus is to get the customer through the check out process quick and safe. By splitting the each area up in steps, we give the customer focus and by providing a small resumé for each step, the customer can always check up if there sould be any mistakes.

No matter what device the customer is using, he/she has an overview of the purchase there only is a tap away on mobile. We also made it easy for the customer to create an account by one click, if the customer doesn't have one.

The design of course fits into SAMSØE SAMSØE's CVI and brand, so the customer can recognize and feel safe through out the whole check out. We believe this check out process creates a good experience, and that it converts sales.