Founded in 2012, Diamondere is a luxury jewelry start-up created by two brothers who wished to make their family’s 132-year legacy of exquisite handcrafted jewelry design accessible to everyday people globally.
Overview
The original checkout process, with its lengthy, tabbed format and outdated branding, created friction and trust issues, leading to a high rate of abandoned carts.
The challenge was to streamline the process, reduce friction, and build trust in order to boost conversions.
Approach
The original checkout process, characterized by a lengthy and tabbed format alongside outdated branding, proved to be a hindrance, resulting in a high rate of abandoned carts. Our goal was to overcome these barriers and create a checkout journey that instilled confidence and encouraged completion.
As Lead UI/UX Designer I collaborated closely with the Diamondere team, which comprised the Chief Executive Officer, Chief Technology Officer, Digital Marketing Manager, and Offshore Engineers. We formed a dynamic unit committed to enhancing user experience.
Iterations & Testing
In our iterative process, we incorporated user feedback and insights to enhance the checkout experience.
Drawing insights from extensive user research, we created various designs, focusing on simplifying the checkout journey while ensuring alignment with user expectations. Rigorous testing, including prototyping and usability assessments, enabled us to refine our approach.
Iterations
Improved UI to collect shipping and billing information.
Improved UI to collect payment information.
Reducing Friction to Boost Conversions
Accordions with Summaries
Replacing the stepper approach, we implemented an accordion-style checkout, enabling users to access and modify previously entered information.
When collapsed, the accordions display a summary of the entered information so users can easily spot and correct errors.
Address
Autocomplete
One notable improvement was the implementation of the Google Autocomplete API, a feature aimed at simplifying the input of shipping and billing information reducing friction, and minimizing errors in the checkout process.
Single Line
Card Entry Form
We adjusted the credit card payment section by condensing the credit card entry process into a single line, simplifying the process improved usability and efficiency.
Outcome
The culmination of our efforts led to a vastly improved checkout experience, reflected in a notable increase in completed purchases. By streamlining the interface, and reducing user friction, we successfully mitigated concerns regarding trust and usability, resulting in enhanced customer satisfaction and improved conversion rates.
Impact
The revamped interface yielded a significant improvement:
Achieved an immediate
25% surge
in completed transactions
Additional Improvements
After the launch of the new checkout interface - we continued to refine and enhance.
Refined
Input Labels
After release, we continued to gather feedback from users and the stakeholder team.
During feedback sessions, we heard frequent complaints that the form fields were too cluttered so we implemented floating labels on the input fields.
Enhanced
Payment Options
To further enhance the checkout process we integrated Apple Pay and Google Pay to boost user experience by offering swift, secure, and mobile-friendly checkout options. This reduces cart abandonment, increases trust, and enhances convenience, resulting in higher conversion rates.