Visual design, Daily UI, Sketch App, Mobile
Checkout Form Redesign
Redesign of the A Book Apart credit card checkout form. Designed with Sketch App.
I purchased a few books from A Book Apart recently and decided to work on a redesigned credit card for their site. This is just one screen, no flows here, basically the main focus is on visual design, you know, daily ui :).
Let's get started
Here's the current flow for context:
- First, you see your cart and click the 'Checkout' button
- Next, you enter your contact info and shipping address
- Then, you enter your shipping preference
- Finally, a long form that includes everything you entered up to this point and the final step—your credit card details.
A few details
An 8pt/4pt grid
The design follows an 8pt grid (see this post) with 4pt spacing used in the tighter spots.
Incorporating brand colors
A Book Apart website has 3 main brand colors: a green color for their "buy" buttons (#7db72f), a beige color for borders (#f6f5ea) and a brownish color for text (#997e11). The colors play similar roles in my version.
To overlap or not?
Overlapping the books made a more interesting layout, but I chose to clip the books behind the form in order to keep the focus on collecting the credit card info.