Case Study - Headless Magento, 58% increase in conversion rates on mobile

Butterbell.com is a D2C brand owned by The L. Tremain Company, a privately-held, family-run business based in Los Angeles, CA. 

The company's main focus is to provide unique and time-honored kitchen tools, gourmet housewares, and decorative tabletop lines to consumers worldwide.

Their very first product line - Butter Bell® crock, launched by the company was based on a centuries-old French butter storage device. Since its inception in 1995, the Butter Bell® crock has become the most recognized brand of butter crocks in the United States and around the world.

Pain Point

Butter Bell's conversion rate was going down on all devices in spite of increasing traffic.

The conversion rate from mobile users was 2.65% - which was less than half of that from desktop users (6.03%). This was alarming for the retailer because traffic from mobile devices constituted 70% of total traffic and was expected to increase with the growth of m-commerce.

Due to the poor ROI from mobile devices, Butter Bell was only running Google Ads for desktop traffic and was missing out on opportunities from mobile users.

Our Role

• UX and User Behaviour Audit
• User Experience and User Interface Design
• Mockups and High Fidelity Prototype
• Magento 2 upgrade
• Headless Storefront Development on ReactJS

Our Approach

Butter Bell's online store was running on Magento 2, built using a pre-built 3rd party Magento 2 theme. The website had a standard large-catalog eCommerce design while Butter Bell was selling just one product with multiple colors and shades.

We needed to build a strategy to deliver an updated store, with new features and a customized shopping journey to suit their needs.

UX and User Behavior Audit

The first step we took was to understand how the website visitors were using and interacting with Butterbell.com and identify where in the purchase funnel majority of users were dropping off.

We identified that users were mainly spending time viewing products and jumping from one collection to another. This lead to users viewing multiple designs again and again and eventually buying nothing due to decision fatigue.

User Experience and User Interface Design

Based on insights from the 'UX and User Behavior Audit', our UX Team came up with a new simplified journey from landing page to order success page.

Screenshot from Butter Bell Figma Design

 Wireframes and High Fidelity Prototype

The UI/UX design team created wireframes and a high-fidelity working prototype.

With a high-fidelity working prototype, stakeholders were able to feel and use the website before going into development. And provide feedback on changes required in the design.

Store Development - Headless Magento

With the plan to develop a bespoke storefront from scratch we opted for a Headless Architecture on Magento 2.

We delivered a fully bespoke front end, keeping the brand guidelines and focusing on a customer-first approach to the e-commerce journey. 

Result

Since the headless project has launched, Butter Bell’s online growth has improved massively, offering a superfast shopping journey.

The conversion rates on desktop saw an increase of 26% while the mobile conversion rates saw a whopping increase of 58%

You can take a look at the final store here — www.butterbell.com