Skip to content
Menu
Steve Eighmey

Thoughts about User Experience

Steve Eighmey

Thoughts about User Experience

High fidelity check out flow wireframes for a mobile device

Checkout flow

By stepheneighmey on February 28, 2020September 14, 2022

Digital checkout flows are meant to be fast, error proof, and instill trust. Small details can make a big difference. I redesigned this flow to address these concerns.

Original check-out flow
The original check-out flow

The original design of the flow was extremely basic and lacked many of the qualities necessary for a successful user journey. There should be a sense of context. Where am I? Do I trust this site? I branded the site as Macy’s, a well known retailer. Someone a customer would know and trust.

Re-designed check-out flow
Re-designed check-out flow

I broke the original 1 page design into 3 pages to help reduce cognitive overhead, and by numbering the steps I gave the user an understanding of the time it would take to complete the flow. I also gave the design some breathing room so the user could more easily interact with it. I made sure to bring up the proper keyboard when filling out certain fields; a numeric keyboard for numeric only entries, and I designed type-ahead functionality to minimize typing for the address fields. Another quick win was to create a checkbox that allowed the user to choose if their shipping address was also their billing address. The original design asked for what is most likely the same information twice.

Numeric keyboard on mobile
Use a numeric keyboard for a numeric only entry on a mobile device
Type ahead functionality on mobile device
Type-ahead function

In UI design, small changes can make a big difference. Stick to the basics and match your user’s mental models. Your designs will be the better for it.

Category: All

Post navigation

Delta cargo
Smoothsurface

Related Posts

Live animals

Delta cargo

November 1, 2019
Read More
Colorful and stylized hard plastic animals

Mental Models

January 2, 2016
Read More
UX island, vector map, aerial view

No UX is an Island

July 29, 2019
Read More

Leave a Reply

Your email address will not be published. Required fields are marked *

CUA certification logo
©2023 Steve Eighmey | WordPress Theme by Superb WordPress Themes