DIGITAL BOOK STORE

Designing an effective eCommerce flow

ABOUT THE PROJECT

After dealing with a third party eCommerce store for years, Sally Ride Science decided to build an online store housed under the main website. The redesigned store allowed customers to buy teaching materials, including both print and digital eBooks, with more calculated user experience. The internal team developed an eCommerce solution allowing customers a complete shopping experience.

MY ROLE

Early on, I worked as the sole interaction designer in collaboration with our engineering, marketing, and sales teams. Later as a junior UXer joined the team, we collaborated on sketches, high fidelity designs and production ready code.

Finding patterns

 

With product inventory set, I begun researching common eCommerce patterns from big brand names and competitors. I compiled a competitive analysis to understand the interaction details and contents of each major shopping period (item search, product listings, shopping cart pages, final checkout and confirmation emails). The research was used to inspire early sketches, core user flow and product design details.

Screenshots of eCommerce Patterns

User flows

The store was built at an interesting time when the customer base was heavily evolving due to changes in the product line and shifting product access permissions. A functional user flow was created in Gliffy to ensure we covered the various use cases and account types.

eCommerce User Flow
Example flow for customers adding an item to their cart (click to enlarge)

Designing in the browser

With a cohesive visual language already established, we developed most of the high fidelity designs through HTML, CSS and JS. We explored different wireframe iterations on paper, followed by design reviews to determine the high fidelity direction.

eCommerce Item added
User adding an item to their cart

Checkout Wizard

The checkout wizard was one of the most significant UX improvements in the new store. In the previous eCommerce store, users were sent to multiple places to complete their payment transaction resulting in a much higher rate of cart abandonment. With our redesign, users had immediate access to digital materials, order history and received a personal confirmation email after placing an order.

eCommerce Checkout
A user mid-checkout process