Over the years, Xebia has been the driver of Agile software development at Intergamma, known for the GAMMA and KARWEI DIY stores. A year ago, we set out to replace the checkout process for their webshops. The existing checkout was slow and cumbersome to use, and no longer on par with other parts of the website. We knew there was a lot of room for improvement. In order to justify the investment we needed measurable results quickly. Within a year, we're consistently seeing a significant conversion rate improvement. Before starting out to replace the checkout, we discussed the technology stack and general approach. We had prior experience with React and Next.js, but decided against Next.js because of the complexity it adds. A checkout app also doesn't need to be indexed by search engines, which is why you'd otherwise want to use Next.js. We decided to stick with a standard React setup, which enables us to focus and keep things simple. In order to measure our success, we set up A/B testing to directly compare the old and new checkout running in parallel.
Minimum Valuable ProductOur initial goal was to go to production as soon as possible. This meant building a minimal version of the new checkout, without sacrificing quality or usability. We call this the Minimum Valuable Product. Because we were shipping this product to our customers, we couldn't compromise on quality, usability or performance. However, we could omit features that are hardly used, especially with control over who's seeing our new product. Taking the Minimum Valuable Product approach means you should:
- Minimize the work required to go live
- Offer a working, usable product
- Not compromise your quality standards
- Measure your results, and adapt
Reduced friction, improved performanceReducing friction for the customer was our main goal for the new checkout. We did this in many ways:
- Avoiding page reloads by putting everything on one page rather than 3 separate pages and calculating shipping costs on the fly.
- Change the order of steps so we avoid asking for information we don't always need (i.e. phone number) and explain why we need it if we do.
- Make sure the browser can properly autofill the form fields, and offer suggestions for possible mistakes, such as a typo in the email address.
- Offer a zipcode autocomplete, but also allow entering the address manually.
- Integrate directly with our payment service provider to avoid navigation to an external payment page.
- Automatically scroll the viewport when necessary to reveal form fields.
- Validate user input as soon as possible and provide actionable error messages.
- Provide ARIA hints for screen readers and allow keyboard navigation.