Animal checkout flow redesign

Checkout-showcase-presentation

The challenge

There was growing concern among senior stakeholders at the disappointing revenues being delivered by the e-commerce website. Google Analytics and Hotjar revealed fall-off rates of over 60% during the checkout process. There was a clear business imperative to improve this situation as soon as possible. New delivery options (CollectPlus and International) also needed to be added to the checkout flow.

Hotjar funnel showing drop off in checkout journey

Hotjar funnel showing drop off in checkout journey

Development time had been allocated by PFS, our commerce cloud solution partner; this put the pressure on to deliver completed designs to them within a tight time frame.

The process

I worked in conjunction with the head of e-commerce and head of IT to define the scope of the project, given the time frame and constraints of the commerce cloud platform.

I began with a detailed heuristic review of the existing checkout flow and analysis of competitor websites.

I also reviewed Hotjar recordings; these gave valuable insight into areas that caused confusion and frustration.

Left: confusion caused by size and placement of payment logos. Right: Misplaced taps indicate that entire row should select radio button on touch devices

Left: confusion caused by size and placement of payment logos. Right: Misplaced taps indicate that entire row should select radio button on touch devices

Before designing, I mapped out the possible user flows, and identified key information to surface to facilitate users’ decisions around delivery and billing methods. Once I had agreement from the stakeholders, I began a process of design and test. I made prototypes to test specific tasks and check that relevant information was easily accessible.

This one, https://marvelapp.com/93ga10g, for example, was used for the task, “Purchase the items in your cart, selecting standard UK delivery and paying by credit card. How many days does standard delivery take?”

Deliverables

High fidelity, pixel perfect annotated designs delivered to commerce cloud solutions partner for development work. These were accompanied by Marvel prototypes to show flow and functionality (see https://marvelapp.com/12h2bd7).

Annotated_designs

Sign-in simplified and inline validation added

Sign-in simplified and inline validation added

Two new delivery options added; information surfaced to differentiate and expedite decision-making

Two new delivery options added; information surfaced to differentiate and expedite decision-making

Next steps

Once live, monitor through Google Analytics and Hotjar; follow up with user testing where required and make appropriate adjustments.

Skills: Digital design, Interaction design, UX design