CHECKOUT PAGE REDESIGN
Redesigned LazyHat checkout page for responsive screens, leading to a 100% task completion rate across usability testing sessions
This project was carried out in collaboration with a fellow UX designer. The goal was to improve LazyHat's checkout experience by reducing friction, increasing clarity, and strengthening user trust, with a focus on creating a smoother and more transparent flow to support higher conversion rates.
Timeline
From explorations to final designs in 3 weeks while working with multiple projects at the same time.
Tools
Figma | Miro | Claude | Clarity | Google Analytics | Google Meet | Google Forms
The Problem
Users encounter points of friction during LazyHat's checkout flow due to unclear information hierarchy and unexpected form requirements. These issues increase cognitive load and reduce user confidence, disrupting the most critical stage of the purchase journey.
Discover
The discovery phase included internal alignment, stakeholder interviews, competitive analysis, a user survey, and exploratory usability testing, all focused on understanding how users navigate and experience the checkout flow.
User Survey
To have a clearer understanding of how users experience online checkout and what drives them to abandon a purchase, we launched a quick survey. We collected 22 responses that helped us identify recurring patterns and surface key friction points.
User Interviews
Four moderated interviews were conducted to observe real user behaviour within the existing platform. The sessions revealed consistent usability issues affecting the checkout experience, reinforcing the survey findings.
Define
We synthesised research insights to identify the key friction points in the checkout flow. The main issues were:
Inconsistent information hierarchy across form fields
Several unnecessary mandatory fields, including an unexpected tax code request
Insufficient colour contrast on the primary call-to-action button, flagged against WCAG accessibility standards
These became the foundation for the design decisions in the following phase.
Develop
Design solutions focused on three key interventions within the checkout flow:
Form fields were reorganised to reflect a clearer and more intuitive hierarchy, reducing cognitive load across the process.
Unnecessary mandatory fields were reclassified as optional or removed entirely, including the tax code field, identified as a primary cause of user abandonment.
Insufficient colour contrast on the primary call-to-action button was flagged to the client as a WCAG accessibility issue, with a recommendation to update the colour accordingly.
Deliver
The final deliverable focused on the data entry step of the checkout flow, the stage where friction was most concentrated. The solution moved through mid-fi wireframes to a hi-fi prototype, and was subsequently implemented directly on the live site. A WCAG accessibility report flagging the contrast issue on the primary call-to-action button was also delivered as a separate recommendation to the client.
OLD CheCKOUT
NEW CheCKOUT
A usability test conducted with 4 users confirmed that the redesigned checkout flow was completed without friction or hesitation. The project successfully translated key friction points into concrete design improvements, including a simplified form structure, a revised field hierarchy, and a reduced set of mandatory inputs. Success for this project would be measured through checkout completion rate, drop-off rate, time to complete, and form error rate, alongside qualitative indicators such as perceived trust and confidence.
Challenges
The main constraints included limited access to real behavioural data, such as Google Analytics, and a dependency on the site owner for implementation, which slowed the ability to iterate quickly.
Learnings
This project strengthened our ability to manage a collaborative design process across two designers and to work effectively within the constraints of a real client relationship. It also highlighted the importance of structuring stakeholder communication early to maintain momentum throughout the project.
Future Considerations
In future projects, we would establish success metrics at the outset and negotiate direct access to the site earlier in the process, to reduce dependency on third parties during implementation.