Skip to content

HTML prototype for a responsive e-commerce checkout

I helped a Candi London develop a responsive check out for an e-commerce user experience for leading UK retailer.

Overview

The client required the checkout to work across desktop, tablet and mobile. Instead of developing a set of static wireframes (that would mean having three different wireframes for each page), I decided to develop a functional HTML prototype using the Bootstrap framework developed by Twitter.

This meant I could quickly develop each stage of the checkout process, share with the internal team, get their feedback and include this in the next iteration of the code. The result was a slick-looking functional prototype and a reduced development time and cost.

Responsive web checkout user flow.
Responsive web checkout: step 1 (sign-in)
Responsive web checkout: step 2 (delivery address)
Responsive web checkout: step 3 (delivery options)
Responsive web checkout: step 4 (billing address)
Responsive web checkout: step 5 (payment details)
Responsive web checkout: step 6 (order confirmation)
Responsive web checkout: step 7 (thank you)

Share This Project

If you enjoyed this project, then let others know about it by sharing it.