Article

7min read

How AB Tasty’s Feature Experimentation and Rollouts Enrich the Lives of Our Tech Teams

We developed our feature management tool to provide tech teams with the capabilities to deliver frictionless customer experiences more effectively. Naturally, we also use this tool at AB Tasty, but in the past, we also had to master our development cycles without the tool. 

In this article, I’d like to give you insight into how our tech teams’ work has changed thanks to our Feature Experimentation and Rollouts solution. How did we work before? What has changed, and why do we appreciate the tool? Without further ado, let’s find out!

What a typical development cycle without our feature management platform looks like

The beginning of a typical development cycle is marked by a problem, or user need that we want to solve. We start with a discovery phase, during which we work towards a deep understanding of the situation and issues. This allows us to ideate possible solutions, which we then validate with a Proof of Concept (POC). For this, we usually implement a quick and dirty variant – the Minimum Viable Product (MVP) – which we then test with a canary deployment on one or two clients.

When the solution seems to be responding to customer needs as intended, we start iterating the MVP. We’re allocating more resources to the project to get it into a robust, secure, and user-friendly state. During this process, we alternate between developing, deploying, and testing until we feel confident enough to share the solution with our entire user base. This is when we usually learn how most of our users react to the solution and how it performs in a realistic environment.

The pitfalls of this approach, or: Why we developed a server-side solution

Let’s see why we weren’t happy with this strategy and decided to improve it. Here are some of the main weaknesses we discovered:

Unconvincing test results.

A canary release with one or two clients is great for getting first impressions but doesn’t provide a good representation of the solution’s impact on a larger user base. We lacked qualitative and quantitative test data and the ability to use it simply and purposefully. Manual trial and error slowed us down, and our iterations didn’t always produce satisfactory results that we could rely on.

Shaky feature management.

Developers were often nervous about new releases because they didn’t know how the feature would behave under a higher workload. When something went wrong in production, it was always incredibly stressful to go through our entire deployment cycle to disable the buggy code. And that’s just one example of why we needed a proper feature management solution. 

We see tech teams around the world know and fear the same difficulties. That’s why we created a server-side and feature flagging solution to help them – and us – innovate and deliver faster than ever before while reducing risks and headaches. 

I spoke to some of my tech teammates to determine how their work lives have changed since we started using our new tool. I noticed some major themes that I’d like to share with you now.

We know the impact of a new feature

Our product teams need to make a clear connection between a business KPI and a feature under test. In the past, we’ve fiddled with Google Analytics for a rough idea, but without distinct control and test groups for our experiments, we couldn’t know if our changes made a difference.

With our feature management platform, we no longer have to guess and can follow a scientific approach. We now know for sure whether a business KPI is positively impacted by the feature in question.  

Suppose we publish a new feature while the marketing team starts a campaign without us knowing about it. We may get abnormal test results such as increased traffic, engagement, and clicks because of this. The problem: how can we measure the real impact of our feature?

The platform lets us define control groups to reduce this risk. And thanks to statistical modeling (Bayesian statistics), we get accurate data from which we can make a reliable interpretation.

The discovery phase lives and dies with qualitative information – but how can you get reliable data? Our answer is to conduct controlled experimentation and progressive deployments.

One time, we worked on a new version of one of our APIs and used our server-side solution for load testing. Fortunately, we found that the service crashed at some point as we gradually increased the number of users (the load). The problem wasn’t necessarily the feature itself. It had to do with changes in the environment, which can be easy to miss with traditional web testing strategies. However, we could stop the deployment immediately and prevent end-users or our SLAs with customers from being harmed by the API changes. Instead, we had the opportunity to further stabilize the API and then make it available to all users with confidence.

We iterate faster by decoupling code releases from feature deployments

We often deploy half-finished features into production – obviously, we wrap them in feature flags to manage their status and visibility. This technique allows us to iterate so much faster than before. We no longer have to wait for the feature to be presentable to do our first experiments and tests. Instead, we enjoy full flexibility and can define exactly when and with whom to test.

Additionally, we no longer have to laboriously find out who can see what in production during feature development, as we don’t have to integrate these things into our code anymore. Instead, we use the Decision API to connect features with the admin interface through which we define and change the target groups at any time. 

What’s more, everyone in the team can theoretically use this interface and see how the new feature performs without involving us developers. This is a huge time saver and lets us focus on our actual tasks.

“Our Feature Experimentation and Rollouts solution helps me take back control of my own features. In my old job, I was asked to justify what I was doing in real-time, and I sometimes had trouble getting my own data in terms of CDP MOA, now I can get it.”

Julien Madiot, Technical Support Engineer

We can rely on secure deployments

Proper feature management has definitely changed how we work and how we feel about our work. And by managing our feature flags with our feature flagging platform, the whole process has become much easier for our large and diverse teams. 

EVERY feature has to be wrapped in a feature flag – this is possibly one of our most essential rules in development. But it pays off:

  1. They’re ON/OFF switches. Let’s not lie: we still make mistakes or overlook problems. But that’s not the end of the world. Especially not if our code is enclosed in a feature flag so that we can “turn it off” when things get hairy! With our feature flagging platform as our main base for feature management, we can do this instantly, without code deployments.
  2. They help us to conduct controlled experiments. We use feature flags to securely perform tests and experiments in real-world conditions, aka in production. A developer or even a non-tech team member can easily define, change, and expand the test target groups in the dashboard. Thanks to this, we don’t have to code these changes or touch our codebase in any way!

They cut the stress of deployments. Sometimes we want to push code into production, but not yet for it to work its magic. This comes in handy when a feature is ready, but we’re waiting for the product owner’s final “Go!”. When the time comes, we can activate the feature in our dashboard hassle-free.

DevOps engineers have many responsibilities when it comes to software delivery. Managing our feature flags with our server-side solution is an effective way to lift the burden off their shoulders:

I honestly sleep better since we started using our server-side solution 🙂 Because I’m the one that puts things in production on Thursdays. When people say ‘Whoops, we accidentally pushed that into production,’ now I can say, ‘Yeah, but it’s flagged!’

Guillaume Jacquart, Technical Team Leader

Wrapping up

I hope you found the behind-the-scenes look at AB Tasty both interesting and informative. And yes, if there was any doubt, we actually use AB Tasty’s Feature Experimentation for all AB Tasty feature development! This helps us improve the product and ensure that it serves its purpose as a valuable addition to modern tech teams. 

Subscribe to
our Newsletter

bloc Newsletter EN

We will process and store your personal data to respond to send you communications as described in our  Privacy Policy.

Article

8min read

Use Heatmaps to Uncover Areas of Improvement on your Website

Website heatmaps are visual representations of attention, engagement, and interactions generated by your visitors as they navigate through your website. Free or paid tools help you generate different maps to better understand user behavior and optimize conversions.

What is a heatmap?

Heatmaps are visual representations of attention, engagement, and interactions generated by your visitors as they navigate through your site.  Warm colors indicate areas that attract the most attention or engagement, whereas cool colors show overlooked spots on the page.

Let your own visitors show you the areas of improvement on your site to help you boost sales, then simply make the appropriate changes and measure how well it’s working.

Example of heat map
Source: www.pixeller.co

When to use heatmaps?

Heatmap tools measure attention, engagement and even number of clicks on your website. They are a key component to your optimization toolkit (to learn more, read our complete guide to Conversion Rate Optimization).

To give you some concrete examples, here are some of the main reasons to use these softwares:

  • To measure engagement.  Do you write online articles, and wonder up until what point your audience stops reading? Using a heatmap can help you visualize the ‘scroll’ of a user, and where they interact with your site.  If you notice that only a tiny percentage of people actually reach your CTA, it might be time to make a change.
  • To measure actions. Where do my visitors click? Are they clicking the right button? Heatmaps help you see if your visitors are completing your desired actions, and also highlight where they might be getting stuck.
  • To measure attention.  What headlines attract the most attention? What images attract the most attention? What elements are distracting from the main content? Do my visitors see my form? Once you have solid answers to these questions,  you can start making changes that will increase your conversion rates.

Information delivered by a heat map
Source: Unbounce

Gaining the answers to the above questions can help you answer even more nagging questions:

  • Where should I place my most important content?
  • What’s the best way to use images and videos?
  • Where are my visitors getting distracted?
  • Where should I talk about my product/service?

Most heatmap softwares will let you generate maps that show user interactions from different points of view. The idea is that you should refer to all of them in order to reveal your visitors’ behavior.

Clickmap

This type of map allows you to quantify actions. It’s a visual representation of all of the clicks visitors make on your page.  This ‘map’ generates precious data since it allows you to see precisely where people interact with your site.

Each time someone clicks on a precise area on a page, the heatmap marks the spot with a light dot.  If you see large areas of white, this is where the majority of visitors are clicking.

Click heat map
Source: Sumo

By quickly identifying the ‘hot spots’ on your site, you can immediately tell if people are clicking where you want them to click. On the above image from Sumo, we can see that the ‘SHARE’ and ‘IMAGE SHARER’ are the least popular areas.

Scroll heatmap

The scroll-map lets you see how far down a page visitors scroll, and especially: what elements attract their attention and what do they linger on?

By using a scroll-map, you can determine if users ‘see’ the right parts of your site, or if they get distracted by unimportant elements.

Scroll heat map
source: nguyenvincent.com

If we look at the above screenshot of an article that talks about SEO, we can see that the image and the two lines of text below it are the most popular: about 85% of visitors have seen these elements.

Percentage of clicks heatmap

The ‘percentage of clicks’ heatmap compliments the classic one. It lets you see, element by element, how many clicks were generated by a certain image or CTA. The ability to quantify clicks by element is extremely important.

This allows you to:

  • Understand how much importance users give to each element
  •  Avoid allowing users to click on images without links

Percentage of click heatmap
Source: nguyenvincent.com

Confetti heatmap

The confetti heatmap lets you see each individual click on a page, as opposed to a view that shows a ‘density’ of clicks. It allows you to see if people are trying to click on non-clickable areas, and to fix the problem if so!

Confetti heatmap
Source: CrazyEgg

Heatmap vs. eye-tracking

If heatmaps rely mostly on tracking a user’s mouse movements and clicks, eye-tracking analyzes their gaze.

The point of eye-tracking is to see exactly how your site users look at your site, to analyze the zones where they pay the most attention.

Heat map versus eye tracking
Source: Nielsen Norman Group

As with heat mapping, the areas highlighted in warm colors show the areas where readers pay the most attention.

Although it’s certainly useful, eye-tracking relies on technology that’s a bit more difficult to put in place. It requires specific equipment that most agencies don’t have.

If you’re interested in eye-tracking, there is software based on AI, like Feng-Gui or EyeQuant, that allow you to simulate eye-tracking with the help of algorithms.

Heat mapping tool features

When looking for a heatmap tool, keep in mind the following points:

  • Segmentation: The tool should allow you to create heatmaps specific to certain audiences that you define using certain targeting and segmentation criteria (ex. new visitors, visitors who have converted, visitors from sponsored link campaigns…)
  • Map Comparison: You should be able to easily and visually compare the results of different maps from different user segments.
  • Page Template: Having a heatmap specific to each page can make the analysis tricky if your page is an ecommerce product page, and you have hundreds or even thousands of them. You need to be able to aggregate results for all pages of a certain type.
  • Responsive Heatmaps: The tool has to work on pages accessed from a mobile device. Actions specific to these devices should be recorded, such as touches, scrolls, and swipes. During the analysis, you should be able to distinguish between behaviors and navigation sessions seen on mobile vs desktop devices so that you can correctly interpret the data.
  • Exportable Maps: This important feature lets you easily share your results with teammates.
  • Dynamic Heatmaps: You should be able to see clicks on dynamic elements: drop-down menu, slider, carousel, elements loaded using AJAX or using a JavaScript framework like React.js or Angular.js.
  • Retroactive Heatmaps: Has your site design changed since your last analysis?  Your software should be able to conserve previous results as shown on the then-current website design, and not simply superimpose the results on your new design – the results wouldn’t make any sense.

Combine heatmap and A/B testing

Let’s imagine that you’ve used a heatmap to better understand how your website users interact with your brand. You’ve identified strong and weak points on your site, and you’d like to make the appropriate changes.

Question: How can you measure how effective these changes were? There’s only one solution – A/B testing your modifications.

The idea is to create different versions of your web pages, ads, landing pages, etc. in order to compare how they perform.

By combining heatmap and experimentation, you’ve got yourself a 3-step method to:

  • Identify problems
  • Test potential solutions
  • Choose the highest performing solution

On this home-repair website, a preliminary heatmap reveals that users’ attention and engagement are split between too many competing elements.

Insight: attention is divided and conversion is low.

heatmap and ab testing

With the help of A/B testing, the company made a few changes to the home page in order to refocus visitor attention on one call-to-action.

A second heatmap is made after the modifications.

Insight: attention is refocused on the phone number, the main call-to-action, and conversions increase.

A/B test your heatmap

To sum up, use heatmaps and A/B testing to:

  • Analyze visitor behavior and engagement
  • Reveal strong and weak areas on certain web pages
  • Find specific ways of increasing conversion rates
  • Test these solutions until you see your conversion rates go up