Mobile Checkout Redesign
New Look
Mobile checkout was performing poorly
The analytics showed that there was an unexpectedly high bounce rate from mobile checkout users on the New Look website. The business wanted to know why and also improve conversion.
The team + my role
UX researcher / designer | The cross-functional, team comprised 1 UI designer, a product manager, a data analyst, and 2 UX researcher/designers. Development was handled by an offshore team and work was handed over in 2 week “sprints”. I facilitated, and documented the output from, usability testing, sketched and produced wireframes (in Sketch) for the new user journey for the mobile checkout experience.
The challenge
Understand why mobile checkout was significantly worse than the desktop version and create a new design that would improve conversion by one percentage point.
The process and deliverables
Usability testing
We tested the old checkout on mobile and desktop with 30 users and discovered that people were confused by the one page checkout on mobile. We also tested the new concept to ensure that it was easier compared to the old design.
L-R: Empathy map and user journey mapping as part of a pioneering behavioural study piece with New Look customers
Wireframes
We created sketch wireframes through to high definition wireframes to test out a new, multi-page’ checkout experience on mobile. We defaulted some choices / retained previously chosen steps to shorten the journey for returning users.
Sketches of the proposed new multi-step mobile user journey for the checkout flow.
Prototypes
We created prototypes in Axure to test the interactions and transitions required of the new design. These are still accessible on Axure share. Pick a path prototype. Checkout prototype.
Prototypes showing the proposed changes to the checkout.
Final design
The redesigned checkout went live in 2016 and we were able to confirm with analytics that there was an increase in conversion by 1 percentage point within a few weeks of launch.