Creating A/B testing feature for LiveBecho

LiveBecho is a plug-and-play product that helps to increase user engagement, acquisition, and retention for digital platforms through interactive feed, stories, and live streaming.

The features that I worked on in the platform include

• Feed builder (Which helps the users to create and customize the feed)
• Post builder (For creating posts into the feed with interactive actions and CTAs)
• Story builder (Which helps the users to create and add stories to the feed)
• A/B Testing (Users can create a variant of the feeds and compare it with the Control to identify which gets the better results)
• Analytics (For the users to keep track of the feed and the posts)
• Website redesign and creating a new design system.

A/B Testing

A/B testing was to be implemented into the platform according to the PRD given to me. A/B testing helps the users to create variants of the feed that they have created and compare it with the control to get a better understanding of which one does better.

The problem:

Users should be able to conduct A/B testing for the feed. The number of parameters that can be changed in a variant is one, and not more than one variant can be created.

Solution and design process:

Since the platform already had a page for the feed list (list of feeds that are created by the users), I had to rework the user flow to fit the A/B testing accordingly.

User flow of A/B Testing

First thing, there was an A/B testing button to be added in the page where the feed list is displayed.

Feed list page

The above wireframe is created in the case where no feed has A/B testing active. Once the user clicks on ‘A/B testing’, the user will be displayed the below page, where they can create a variant.

Creating a variant for the feed

1. The user should be entering a name for the A/B test
2. The parameter that needs to be changed in the variant should be selected.
3. Schedule the A/B test
4. Determine the winning version of the A/B test
5. Create variant

There are two scenarios after the user clicks on ‘Create variant’:

1. If the parameter selected requires the user to do the changes in the feed builder, the user will be redirected to the feed builder and can change the desired parameter, but the user won’t be able to change any other parameter than the selected one as we are currently only allowing one parameter change. (Example: If the uses choose to change the font family, only the font family can be changed, and other editing features are disabled)

2. If the parameter selected does not require the user to make any changes in the feed builder, a lightbox will appear saying that the variant has been created. (Example: If the user chooses the parameter for the variant as ‘Android devices only’ that doesn’t require the user to work with the feed builder).

After the variant has been created, the user won’t have the option to edit both the control and variant of the feed, since it will affect the results. The user can either stop the A/B testing and edit the feed or can delete the feed entirely.

The insights of the A/B testing can be tracked in the analytics section:

Analytics of A/B testing

The user can then finalize the version of the feed that can be live either in the Feeds list section or in the analytics section. The finalization of the feed can be done irrespective of the end of the A/B testing schedule.