Planning and research
In the research phase, I gathered insights from the Baymard Institute’s extensive e-commerce checkout research alongside my own competitor analysis.
User journey map
Design phase
Exploring different design solutions, I first created a few wireframes on paper and then several medium-fidelity wireframes in SketchApp using previously made components from the SketchApp library I created for our design system.
Paper wireframe of the checkout payment options
The designs were reviewed by the cross-functional team at every stage thanks to our weekly meetings that kept us all aligned.
The final prototype included the different scenarios, all variations and states of the newly introduced components and colour-coded spacings – allowing developers to use them as an accurate reference.
Checkout page previews with spacing specifications in the background
User testing
Once our prototype was complete, we conducted user testings in order to validate our solutions for the key user problems. These sessions revealed a few additional opportunities that I then incorporated into my final designs.
Results
Working closely together, we delivered on all major milestones and released the new checkout on time, meeting all requirements.
The result was a 13% increase in checkout completion rate. Our new checkout also got the best score in Think Sprint’s UX review when analysed against two of our main competitors.