Isero Checkout

UX & UI Design

Isero Checkout

Isero is the most specialized hardware wholesaler and service provider for construction professionals and technical services.

During my job at Wunderman Thompson Commerce, I’ve redesigned the checkout completely according to latest UX Princinples.

Role

UX Designer

Deliverables

High fidelity designs in Sketch, uploaded to Zeplin/Abstract

Year

2019

The project & me

As a big process on Jira Software, I was assigned to a ticket containing an open question on improving the checkout. The checkout consisted 5 steps to complete an order, which was quite troublesome for returning and experienced users (B2B).

Deliverables

During this assignment, I’ve kept contact with several stakeholders such as; a product owner, the client and the development team.

At the end of the sprint (Scrum), Isero get’s a redesigned checkout ready for development to take on the next sprint.

User goals & UX Principles

User problem

Customers of Isero have a hard time completing the checkout (given from user feedback), as it is currently 5 steps long with a page refresh in between. These users are B2B customers and are returning frequently to the website to order, therefore the checkout needs less friction in order for users to complete their goal.

Sequencing

The behaviour design technique ‘Sequencing’ was very appropriate here as this checkout contained 5 steps which slowed the user down in completing their goal. During my UX Review (conducted at the beginning of the assignment) I came to a conclusion the 5 steps aren’t needed and could be sequenced further into more logical steps.

Way of working

This project was made in Sketch, a vector based design tool. Within Sketch, I set-up a small Design System to keep things consistent and easy to edit. In Sketch I’ve created 3 base art-boards to represent the dimensions of the media breaks (mobile, tablet and desktop), which is based on the breakpoints of SellSmart/Bootstrap (the system in which the website is build). With a mobile first design this checkout redesign was born.

To communicate to both clients and developers, I’ve used the program Abstract (which is similar to Zeplin).

Designs

Tools/processes used in this project

Sketch
To create designs

Design System
To create consistent design elements

Abstract/Zeplin
To hand-over designs to development