Checkout Form

Meet Samantha

She’s in an airport waiting to board a flight to Colorado for vacation. She has some time to kill before her flight, so she does some impulse shopping online. This is her first time purchasing anything on this site. Since she’s going on vacation for a week, she wants the it to be delivered after she arrives back home.

Samantha has initiated the checkout process after viewing the dress in her cart. She needs to fill out the checkout form, which contains billing/shipping and payment info. Once she provides that information, the site will enable her to review the information before submitting the transaction.

What did I do?

I was responsible for the whole UX and UI of this project. It was a quick challenge project done after hours in a few days.

So here’s the idea

The process needs to be quick and simple, so as to not get in her way.

Mistakes and cognitive strain need to be minimized so the process can be smooth and flawless, and the client doesn’t drop out of the purchase journey.

First things first

The checkout form provided is lengthy and the lack of visual hierarchy makes ir difficult to read. The 1st task then is to deconstruct it and arrange the information in a more human firendly manner.

Information Architecture

Firstly, the information was broken down into logical segments, away from any interface or possible implementation. This allowed me to consider it on it’s on, and organise it on a conceptual level.

Personal Information

Honorific

Name

Surname

Card

Type

Long Card Number

Name

Start Date

End Date

CVV

Address

House Number

Street

Post Code

Town

County

Country

Billing Address

House Number

Street

Post Code

Town

County

Country

Once the schematic was done, I then rearranged the blocks of information to make it more intuitive.

Personal Information Name

Honorific

Name

Surname

Card

Type (auto detect)

Long Card Number

Name

Start Date / End Date

End Date

CVV

Delivery Address

Post Code

House Number

Street

Post Code

Town / County

County

Country

Billing Address

Same as Delivery Address

Post Code

House Number

Street

Post Code

Town / County

County

Country

User Journey

Now I could design an interaction that would guide the user through the information grouped into these sections.

Putting ideas to paper

Pen and paper helped me refine how the interaction should work and how the different form elements should behave.

Final Product

Prototype