Checkout Fields Redesign

An e-commerce platform was looking for a redesign of their checkout input fields, particularly their shipping and billing sections.

Using Moqups, I worked with a team to create wireframes for the different options.

We did wireframes of both shipping and billing sections because the design of the shipping fields directly affects the billing area.

Based on research, we decided to go the "stacked" route as it appears to be the standard in e-commerce and as such is the most user-friendly as people automatically know how to navigate through the process.

Shipping Section

Version 1

 

 

v1_00_shipping.png

Version 2

 

v2_00_shipping.png

Billing Section

Version 1

v1_01_billing.png

Version 2

v2_01_billing.png
 

Final Outcome

shipping-address.jpg
billing-address.jpg
shipping_address.png
billing_address.png
Previous
Previous

Simple Store

Next
Next

Streamlined Checkout Page