charles tyrwhitt checkout

Scroll Down!

Designing a Checkout focused on Clarity and Conversion

A small difference in conversion rate can mean a huge difference in revenue, and with the old checkout process for Charles Tyrwhitt the UI/UX and design wasn't helping in any way. Text was too small, contrast and legibility was bad, and web accessibility guidelines weren't being met. The overall process felt clunky and dated.

To this end, working alongisde our UX and development teams we put together a proposal for a redesigned and completely overhauled checkout process, working from the recently developed Corozo design system to ensure a consistent and cohesive experience.

Design System Menu

Starting with usability testing sessions we were able to observe people using the old checkout process and identify where initial pain points might be. This along with quantitative date from customers actually using the checkout everyday gave us a good indication of the key problem areas, some of which we knew already (poor clarity of information, text that was difficult to read, not knowing how to get to the next step), and some of which we didn't (difficulty entering offer codes and understanding when offers had been applied, and which offer was applied to the shopping bag at any given time.)

Design System Menu

After developing an initial proposal, we then tested out wireframes followed by design mocks amongst small groups of users to see if these problems had been alleviated, and also to get a sense of if the process was more or less enjoyable or engaging. Obviously the checkout process isn't the most exciting of processes, but being able to engage and create some sort of visual interest was key to maintaining momentum throughout the process. We did this through clear feedback, and clear use of colour to identify success and next steps.

Design System Menu

After developing the final designs, prototypes and functional specs, our developers took the lead. Since we had built the entire process on the back of the newly implemented Corozo design system, all layouts and classes were already in place. We used axure and Figma for a smooth handover to engineering.

Next Project