Checkout Form Redesign

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.

Learn more

Sign-Up Form Design with TailwindCSS

Visual design, Daily UI, CSS, Forms

Sign-Up Form Design with TailwindCSS

A sign-up form created with the TailwindCSS framework.

By signing-up, you agree to our terms and conditions.

Online Banking

Member Benefits

Safe, secure access to your account.

Get notified when payments are due.

Transfer funds fast.

Learn more

Animating a Line Graph

Animation, JavaScript, CodePen, Interactive-design

Animating a Line Graph with requestAnimationFrame

Inspired by Ben De Cock to use requestAnimationFrame for animation.

Learn more

Time-tracking App

Prototyping with Invision.

View prototype Learn more

Counting Eye

A counter app that I designed and built in Swift for iPhone 5-7 Plus.

View final design Read case study

Typeface Quiz

A quiz that draws attention to typeface anatomy with explanations.

View final design Read case study