Optimize DrSmile's website to enable quick execution of cutting-edge experiments

1. About DrSmile

DrSmile, established in 2016, is a dental company that has gained attention throughout Europe. Their mission is to democratize the dental market and help everyone achieve a confident smile. They have achieved this through their flagship product, the latest and affordable technology for transparent dental aligners.

2. DrSmile and Bejamas: The Road to Jamstack

Patrycja Dzaluk, one of Bejamas' lead developers, has written a fantastic case study on DrSmile. In it, she introduces how DrSmile established its reputation as a modern dental care company, utilizing high-tech approaches and leveraging their unique expertise, as well as their dedication to providing the best customer service.

 

In order to continuously check if our marketing is in line with our reputation, we thought it was necessary to conduct tests on a regular basis. Therefore, they wanted to introduce an A/B testing strategy to support and strengthen their successful growth strategy.

3. What is A/B/n testing?

A/B testing is a method of testing multiple variations of the same page in order to measure specific KPIs related to performance. In growth marketing, it is common to support experiments. The main purpose of A/B testing is to continuously improve existing websites or products and understand user reactions to different versions of the same page.

 

For example, you can test a simple hero text and image to compare two completely different versions of a page.

 

 

The easiest way to conduct A/B testing is to use apps designed for such experiments, such as Optimizely, VWO, Google Optimize, etc.

 

Now, when introducing these tools, there are several routes to take. So, let's explain the main challenges when implementing an A/B testing strategy.

 

What are the challenges of implementing A/B testing?

A/B testing is an excellent method for marketers to evaluate the success of their marketing efforts, but it requires an implementation strategy. And each implementation strategy comes with some side effects.

 

When considering the easiest way to conduct such experiments, it is recommended to install a client-side JS script. This will allow each tool to generate snippets and input them into the elements of the page that you want to test.

 

The problem here is that the script is rendering blocks to avoid style flickering. In other words, until the script is loaded and executed, the browser cannot render anything.

 

• Serious performance issues that may affect test results
• Loading slows down and conversion rates decrease
• Terrible user experience

 

In that case, it would be decided to conduct A/B testing using server-side experiments. However, this option requires servers that we do not have when fully utilizing Jamstack. Needless to say, scalability and caching are not easy for servers.

 

In order to fully utilize Jamstack, we want to conduct experiments as close to the user as possible and ensure the fastest experience. And this is where Edge comes in.

 

You can use serverless features such as Cloudflare Workers and Netlify Edge Handlers with interesting improvements. It is also ideal for making direct changes on the page as it minimizes cold starts.

4. What is Edge?

At Edge Computing, you can run code right next to the user. This feature reduces latency and improves response time. In a standard setup, all code is executed on the origin server or cloud data center. Since the execution limit for edge functions is often around 50 milliseconds, Edge is the optimal choice when you want to run small scripts quickly.

 

As a general example, there are the following:

 

• User authentication. You can directly verify users with Edge.
• Localizing content. Translates content based on the location of the request.
• Personalized Ads
• A/B Test

5. Customization on Edge

At DrSmile, we have decided to use Cloudflare Workers to modify HTML responses and provide different variations of experiments to each user. This response is generated by our company at the Edge and is based on an anonymous user ID stored in cookies.

 

Once the ID is obtained, data will be retrieved from the Optimizely API and the selected variant will be displayed.

 

 

Here, we will introduce the process when a new user accesses the website.

 

• If there is no user ID, the worker will create a new unique ID.
• Workers will seek the variant selected for experimentation in Optimizely.
• Workers will modify the HTML and return a customized version of the page to the user.
• Users will obtain an ID in the cookie header.

 

If you are a repeater, you already know the ID stored in the cookie, so you can skip the first step. When a returning user is detected, the worker will return with the same variant and maintain consistency in testing across multiple sessions.

6. Editor Experience Revolution

Now is the time to improve the editor experience. Here, we will introduce what we are working on. DrSmile uses Contentful as a headless CMS and Optimizely has a plugin available to connect to Contentful.

 

 

So, in order for editors to easily experiment, we have created a preview environment.

 

Each component has a simple tab that allows you to switch between controls and versions.

 

Introducing the situation.

 

7. Results

In order to achieve great results, it is necessary to create the best strategy according to the purpose. DrSmile is committed to providing its customers with the most sophisticated digital experience, and for that reason, we believe that an architecture centered around Jamstack is most suitable.

 

Using a user-friendly editor, the marketing team can create and execute A/B tests in minutes. By being able to quickly test, they are able to confidently determine which content and features are most optimal for customers, knowing how important the customer experience is.

 

On the technical side, we believe that choosing Cloudflare Workers, which utilizes Cloudflare's global network, was one of the key factors for our success. Additionally, the deployment to Cloudflare Workers propagates globally within 1 second, making it crucial for smooth experimentation delivery to our users. Due to its lightweight nature, Cloudflare Workers can be executed before every request, allowing us to determine which experiments our users should perform.

 

7-1 Core Web Vital Modification

These are data from the past 30 days. Looking at the overall picture, we have been struggling with performance issues for several months now.

 

 

New settings were introduced in July and since then, performance has improved. August is the first month where DrSmile fully complies with Core Web Vitals evaluations.

 

José Adame from DrSmile says the following:

 

Dealing with flickering in A/B testing apps on the client side used to be a necessary pain. However, now you don't have to do that anymore. By combining the technologies of Optimizely Full Stack and Cloudflare Workers Edge, you can achieve a seamless and fast user experience, as well as accurately track and report on it.

 

Alberto Adame
Senior Product Manager at DrSmile

 

We are very happy that Bejamas and DrSmile were able to collaborate. And we look forward to their site continuing to thrive using Jamstack!