Checkout on devices

Chegg textbook checkout

The primary goal of this project was to redesign the desktop and mobile textbook checkout experiences into a single responsive design. We also wanted to address a number of usability issues with the previous designs that were discovered through user testing.

Progressive checkout experience

One of the issues with the previous desktop checkout experience was that it had a grid layout which caused some user confusion and errors if they user didn't complete the form in the right order.

For the new design we wanted to keep a single page design, but progressively display each of the steps. After user and A/B testing we learned that users preferred to see the shipping and billing steps open by default so they knew upfront what they needed to complete.

Review & Edit

On the review step I wanted to keep the information compact, but easy to scan so users could quickly confirm everything was correct before placing their order. The pricebox on the left would also lock to the top of the screen when scrolling so the price and 'Place order' button were always above the fold.

Single responsive framework

The mobile and desktop experiences for the previous textbook checkout were designed and built by different teams, which led to a disjointed cross device experience and more engineering overhead.

For the new designs we wanted to create a single responsive framework without sacrificing the user experience on either device.