Visual design, Daily UI, Sketch App, Mobile

Checkout Form Redesign

Redesign of the A Book Apart credit card checkout form. Designed with Sketch App.

Some background

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:

  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.