100CBD Website Redesign: How Advanced UX Reduced Bounce Rate by 17%

How can a new and complex product or even a category be presented to the audience via the website interface? How to showcase the company's advantages and increase the customers' loyalty? The 100CBD case study reveals how a website redesign and UI optimization reduced the bounce rate by 17%, increased the time users spend on the website by 198%, and laid the foundation for further traffic growth.

Disclaimer: We are not advertising 100CBD products or the 100CBD brand, but we are using examples of the website's interface to showcase the work done by Turum-burum CRO/UX/UI agency.

About the project: goals, objectives and client’s request

100CBD is a Ukrainian premium brand that offers natural dietary supplements based on cannabidiol (CBD) and fractionated coconut oil. These supplements help increase psychological resilience, relieve muscle spasms, improve sleep quality, and reduce emotional stress. Thanks to a high concentration of active ingredients, convenient use, and a variety of flavors, the brand has become popular among customers and doctors.

When the company launched its B2C business, it turned to Turum-burum to enhance its e-commerce. Until 2023, the brand primarily operated as an offline distributor. However, due to blackouts and a growing demand for solutions to fatigue and sleep issues among Ukrainians, the company shifted its focus to online sales.

The main project objectives:

• Lay the foundation for the website’s traffic growth. We expected marketing to attract new customers, so we had to provide newcomers with an easy and clear path to purchase.
• Showcase the brand's unique nature through its interface. Creating a website design where each element highlights the company's advantages, devotedness to quality, scientific approach, and product uniqueness.
• Increase customers' trust and loyalty. Adding social proof elements, such as reviews from customers and doctors, was crucial in building trust and increasing loyalty among new users toward the company and its products.
• Inform and raise awareness of the audience. Provide easy access to all necessary information so that users can easily find answers to their questions about the company’s services.
• Optimize the user journey. Eliminate barriers and reduce unnecessary steps on the customers’ journey to placing an order. 

100CBD usability audit: applied approach, analysis process, and key findings

We started our work with a thorough analysis of the business niche, its goals, user behavior patterns, and competitor research. Besides the website’s UX audit, work with analytics and heatmaps, we also analyzed how customers perceive the company’s product. The brand shared with us the results of survey conducted with buyers and non-buyers which allowed us to find out the barriers that limit business conversion. By analyzing real user feedback, we identified key usability issues as well as growth points and developed UX/UI solutions that do address customer needs: 

• 97% of visitors are new users, but they usually can’t find key information about the company and quickly leave the website.
• The homepage is a key entry point and the first page viewed by 50% of users, but 48% leave it without understanding the CBD services, benefits, and reasons to buy from this company.
• The “About CBD” page is the second most popular entry point, but at the same time the page with the highest exit rate of 55%. Users usually spend there less than 2 minutes and often leave the page without answers to their questions.
• 75% of traffic comes from mobile devices, but users spend twice as much time on desktops compared to mobile devices, showing that mobile interface requires optimization for better adaptability across different devices.
• About 76% of users leave the funnel on the product page since they don’t find enough information to make a purchase decision.
• Only 1.5% of users complete the purchase process, while the remaining 98.5% drop off at various stages because of obstacles they face along the funnel.

All these disappointing tendencies are caused by usability issues, like inappropriate page structure, inconvenient navigation, unclear content placement, etc. But if we optimize the interface, we can eliminate these problems and improve the overall user experience.

Website redesign: satisfying user needs and addressing business objectives

We started our work on the 100CBD project in November 2023, and in July 2024 the business owners launched an updated website version based on our prototypes and recommendations.

Homepage: retaining customers and navigating them to purchase

‍Issue: poorly structured pages

Approximately 30% of users left the homepage immediately, as the first screen failed to highlight the company’s products, benefits, and how this brand can address users' needs.

It is also proved by the fact that 50% of users reached the end of the page and navigated to information pages instead of going to product pages – they were trying to find answers to their questions.

Recommendation: Add key information about the product, its value and benefits on the first screen. Implement blocks with product descriptions, benefits, reviews, FAQs, and recommendations.

By restructuring the homepage, the company reduced the bounce rate by 27% and encouraged users to move further along the sales funnel.

Issue: lack of information about the brand's advantages and offline stores

Blocks like “Made in Ukraine” and “Spray and keep calm” looked nice, but did not sound like a reason to opt for this brand. And since the website didn’t present a block with offline stores, users were looking for additional information, guessing how they can buy these products offline.

Recommendation: Add a block with key brand advantages and implement a section with a map so that users can search for offline stores and pharmacies in the regions where they are available.

Issue: users can’t add products to the cart without opening a product page‍

There was no “Buy” button on the product previews on the homepage, which made regular users take unnecessary steps. In the mobile version, it was not obvious how to view all the products, so users simply did not see other offers.

Recommendation: Add a “Buy” button directly to the product previews on the homepage. In the mobile version, ensure a convenient scrolling experience that allows customers easily navigate through the entire website’s assortment.

Homepage UX/UI design: things to consider

The homepage serves as the store’s business card, shaping the first impression of your business. If users don’t quickly grasp what you offer and why they need it, they’ll simply close the tab.

To avoid this, the homepage should answer three major questions:

• What kind of store is this and what does it offer? Add eye-catching banners showcasing your products with clear explanations of the problems they solve for users.
• Why is it worth buying from this website? Highlight the company’s main advantages, add social proof blocks, and answer frequently asked questions.
• What can I buy here? Provide a sufficient number of entry points and paths to purchase.

The homepage should not only introduce the brand to the user but also encourage them to move further the sales funnel, without leaving any space for doubts and thoughts about switching to your competitors.

Product listing: simplify the choice and shorten the user journey

Issue: lack of information and inconvenient product cards

While browsing the catalog, users, especially new ones, could not quickly find answers to key questions: “What kind of product is it?”, ‘Is it legal?’, ‘How can I use it?’ or ‘What problems will it solve?’. So, they left the page or navigated to other website sections. And since there was no “Buy” button on the preview, customers couldn’t quickly add the product to the cart and had to go through extra steps to complete the purchase.

Recommendation:

Redesign the product cards on the catalog listing page by adding basic information directly to the preview: description, key features, and price. Also, place a quick 'Add to cart' button to shorten the path to purchase.

Issue: too large product photos in the mobile version‍

On mobile devices, product photos on the listing page took nearly the entire screen, overlapping key product characteristics like its name, price, and rating. This made it harder for users to browse, compare, and choose relevant products.

Recommendation:

Optimize the image size for the mobile version so that users can see key product information on one screen. 

After the redesign, the exit rate from the product listing page decreased by 8% and the session duration on the product listing page increased by 32%.

Product listing page UX/UI design: things to consider

The product listing is like a shop window where users explore your store’s assortment and search for the right product. If the information is unclear or the selection process is complicated, users may abandon the website or spend too much time on product searches.

To avoid this, you need to:

• Add key product characteristics directly to the product preview (high-quality product photo, article, short description, price, rating);
• Allow quick purchases without unnecessary steps;
• Optimize the mobile product display to ensure customers can view all essential details on one screen for a smoother browsing experience.

A simple and clear catalog shortens the user's path to purchase and makes the selection process easier and more enjoyable.

Product page: making it informative, convenient, and functional

Issue: insufficient information for making a purchase decision

50% of users scrolled to the end of the product page but left without purchasing, unable to find key details like available flavors, concentrations, delivery, payment, return policies, and quality certifications. Reviews appeared too long and lacked visible ratings, making them harder to read.

Recommendation: Reorganize the page structure and add:

• a short block with information on delivery, payment and return policy;
• a link to the product certificate;
• a block with product reviews, ratings and a horizontal scroll for easier navigation and readability;
• interactive blocks with similar products (with other concentration level or flavor) next to ‘Buy’ button;
• FAQ block that answers the most frequently asked questions of users.

As a result, the exit rate from the product page decreased by 45%.  

Product page UX/UI design: things to consider

The product page is the place where the users take final purchase decisions. If key information is missing here, the user will look for it somewhere else, and in the worst case, from your competitor.

As not to lose the user at this stage, you have to:

• Provide all the necessary information about the product and its variations (photos, characteristics, available concentrations and flavors);
• Offer details on delivery, payment, return policy, and certification;
• Add social proof blocks like reviews and ratings from other users;
• Provide recommendations with similar products to retain users and offer them a wider choice.

Checkout: simplifying and shortening the process

Issue: confusing and complicated checkout process

About 50% of users left the checkout page because of the unclear form structure, confusing fields for different delivery types, and misleading page name (“Cart” instead of “Checkout”). In addition, when choosing a payment method for delivery, users saw the “Pay for order” button which confused them.

Recommendation: Simplify the form structure, making it more compact (2/3 of the screen), adapting the fields to different delivery types, and changing the page title to “Checkout”. The “Checkout” button also informs the user that the order has been confirmed, regardless of the payment method chosen.

Checkout UX/UI design: things to consider

If users abandon checkout, it's more than just lost sales — it shows serious usability issues. And the most effective way to encourage customers to complete the purchase is to offer a smooth and flawless checkout experience.

If you want to retain your customers, you must:

• Make the short and intuitive checkout form — just a few fields, clear prompts, and automatic data filling where it is possible;
• Display order details and allow users to edit them without taking additional steps;
• Remove all unnecessary elements — ensure a minimalistic header and obvious buttons that clearly explain the next step of the funnel.

Changes pave the way for opportunities: 100CBD website redesign results

While working on the project, we conducted a website usability audit, developed design prototypes, and provided them to the client's development team for further implementation. 

At each change implementation phase, our team provided authorial supervision to ensure that all UX/UI solutions were put into the interface correctly to achieve project goals (improve website usability and boost business conversion).

Our main goal was to create a website design that showcases the brand's premium and unique nature, satisfies user needs, and meets business objectives. And that’s what we managed to achieve:

• The number of users increased 6 times;
• Bounce rate decreased by 17%;
• The duration of sessions on mobile devices increased by 32%;
• The exit rate from product pages decreased by 45%;
• Sessions from product pages became 198% longer.

These results prove that investments in customer experience optimization make sense. By ensuring advanced UX/UI, you can strengthen your customer retention strategy and boost brand loyalty. 

Changes always mean a wide room for growth and new opportunities. Your conversion rate is in your hands. And a client-oriented interface is the first and pivotal step on the path to high e-commerce KPIs.