PetsAtHome.com

Responsive design, Checkout process optimisation

Brief

Redesign the full checkout experience, bringing in a new responsive design, and improve conversion.

Outcomes

This checkout has since been implemented fully, and is processing every order for Petsathome online.

Key challenge

Design a process combining order summary, delivery and payment in a single and clear screen.

Design highlights

A better basket

Before:

Page shown when any item is added to the basket
Confusing call to actions
Illogical page flow
Confusingly showing time price before the discount
Key information hard to find
Some information is too cramped, some too sparse

After:

Page shown only when requested
Key information (cost, delivery) immediately visible
Clear and prioritised calls to action
Better information density
Extra content and cross sell opportunities become possible

A dynamic combined checkout and payment flow

I designed a checkout process navigation framework that would make the progression through the form steps clear and less stressful than on most sites. It summarised the information entered in the previous steps at all times, greatly reducing the need to go back in the process.

This framework was designed to be responsive, working well at all screen sizes. To make the experience even clearer and more enjoyable, I recommended the use of animated transitions between steps.

What I did

Workshop with the full team (marketing, brand, technology) to understand the existing checkouts functionality and what constraints drove them, before exploring new simpler journeys by rapid sketching and critique.
Prototyped the main navigation framework and its animation to bring the client onboard.
Prototyped key full journeys in a mobile prototype that we usability tested with consumers in-store.
Work with a visual designer to ensure the concepts get adapted without introducing usability issues.
Created a copy workflow to ensure our designs were suitable for the final content and ensure clarity for the development team.
Documented content and interactions for all scenarios.

I mapped out the existing process, noting where the traffic exist and what elements exist at each step.

We reviewed the existing site, using “I like, I wish, I wonder” to capture frustrations and opportunities.

Each group grouped each of the requirements into steps.

Early sketches from one the workshop group. Yellow papers indicate aspect we particularly liked.

Working together as one team to rethink the checkout flow.

Testing our mobile prototype with customers in stores.