Some background

I redesigned the A Book Apart credit card screen. I focused on just one screen, no flows here.

Current screens

Here's the current flow for context:

1. First, you see your cart and click the 'Checkout' button
2. Next, you enter your contact info and shipping address
3. Then, you enter your shipping preference
4. 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.