Serato Checkout Experience
Overview
During my time at Serato I was trusted to lead the redesign of the website's pricing pages and express checkout flow, which sees half a million visitors per year. The project was UI-leaning – an opportunity to bring these pages in-line with the new design system we were rolling out. There was also an opportunity to make "quick UX wins/improvements" along the way, ones that didn't affect too much of the original flow (which was already testing well with users).
Responsibilities
User flow mapping
Google Analytics & Hotjar behaviour analysis
Moodboarding
Competitor analysis
Wireframing
Testing
High Fidelity Component Design for the Design System
Google Analytics & Hotjar behaviour analysis
Moodboarding
Competitor analysis
Wireframing
Testing
High Fidelity Component Design for the Design System
Timeline
Nov - Dec 2023
Team
Reported to Chris Elliot, Senior Web Designer at Serato
Deliverables
Pricing, cart summary, billing details & purchase success pages
Two projects in one
The work was split into two distinct projects: the refresh of the website's pricing pages (of which there were 4 products, each with either 1, 2 or 3 tiers, either buy outright or subscription. There was added complexity with some products also shifting from two to three tier plans. I started work on the pricing pages, first defining the how might we's before using Hotjar and Google Analytics (thanks data team) to work out how users were behaving on the page.
I then moodboarded and took down notes about how we could learn from the success of other designs. There was then plenty of exploration and iteration of the pricing card, header, toggle, table and more until a final design was tested, and finalised.
A similar process occurred when redesigning the checkout screens - lots of user testing before we arrived at a final product.
I then moodboarded and took down notes about how we could learn from the success of other designs. There was then plenty of exploration and iteration of the pricing card, header, toggle, table and more until a final design was tested, and finalised.
A similar process occurred when redesigning the checkout screens - lots of user testing before we arrived at a final product.
There's more where that came from.
Check out my other projects today.