Brief

Frictionless checkout can make or break an online store.

Caratlane is one of India’s biggest omni-channel jewellery retailers, spread over 36 cities in India with more than 92 stores in its network.

Ranked by Dataquest, JuxtConsult and SapientNitro as one of best e-commerce stores in India during the digital boom in 2011, Caratlane has pioneered mindful and usable design for almost a decade - and it was in this same quest that our paths crossed.

Caratlane wanted to streamline and optimize their checkout flow, but that wasn’t the only challenge. The team wanted to build a composable checkout system as a proof of concept, so that they could deploy similar approaches for functions across the store.

Our challenge was to imagine and implement the checkout module as a Single Page Application (SPA) for Caratlane, with a composable structure.

Challenge

Modernizing checkout elements and interactions.

Caratlane was facing attenuation in their checkout conversion rate, with unexplained drop offs during the transaction cycle. This was something we wanted to deep dive into, in an effort to explore and find potential solutions.

Operating at the cutting-edge of usability was also extremely important for us, so we set out to modernize as many elements and interactions as possible for improved UX.

Our primary challenge was to build progressive changes and systems on their existing codebase, especially since the back-end wasn’t designed to allow RESTful authentication endpoints that our SPA needed.

During our research, we noticed the absence of a robust Unit Test Framework and Continuous Integration (CI) Systems, both of which we implemented during the course of our engagement.

For the CI pipeline, we set up a Jenkins environment with Blue Ocean integrated. For unit testing, we set up the Jest framework.

Solution

Redefining the e-commerce checkout experience.

Here’s what we handled for Caratlane.

An intuitive and simplified checkout module

During our engagement, we built a separate backend module powered by Mithril to extract the auth token, so that it could be exposed as a REST endpoint for other front end components.

This improved the performance and efficiency of the checkout functionality, making it incredibly user-friendly, and paving the way for similar modules to be built for other aspects of the store.

Our checkout module was also built for enhanced usability, with added responsiveness across multiple screens and devices for a uniform experience.

Unit testing for improved results

Our Jest unit tests were designed to test the newly created UI components and elements, so that they could be refined over time.

Outcome

The Caratlane product team was incredibly happy with the speed of our checkout system and the instant rendering of page components, marking yet another milestone in our long journey with them.

Their tech team quickly adopted our Continuous Integration system, and started setting up their projects in Jenkins.

After our tryst with Caratlane, unit testing became a core part of their development and product release cycle.