Announcing Freshmarketer’s Responsive A/B Editor 2.0

Amrita Ethiraj
4 min readJan 23, 2018

--

Illustration by Indra Kumar

Over the years, A/B testing has become important for every website and yet it’s no easy task.

Creating variations for a web page requires a lot of patience to bring all the design thoughts and intuitions to be reproduced perfectly, as a variation. With the available tools in the industry, visual editor is not just enough but requires a developer’s hand.

It’s time to rethink the way the visual editor works and expand its breadth to cater the needs of all types of users ranging from digital marketers to designers to product managers.

Introducing a new way to create, test and optimize web pages- Freshmarketer Visual Editor 2.0

All of your web page editing needs, handled ✅

Hot on the heels of Freshmarketer’s A/B Testing Editor 2.0 release, we’re excited to introduce some killer new features:

  • Smart and intuitive contextual menu
  • New options to add and edit an element in a webpage
  • Preview changes from editor
  • Mobile and desktop view responsive editor and more!

New Design

Previously, Editor 1.0 had the toolbar at the bottom bundled with various options that caused ambiguity in using it.

The new design is centered around simplifying the design elements with usability under primary consideration, while bringing a plethora of options into the editor. Hence, moving the global editor toolbar to the top to support the usage, at great frequency.

Visual Editor 1.0 and 2.0

A Single Unified Code Editor

JS and CSS Code Editor

Previously, the visual editor had two different code editors: CSS and JS to make the required style and script changes. It made a technical and design sense to group the editors and populate the javascript of every change made to the variation. This way it’s made possible to apply or edit the changes to a bulk set of elements using the variation code.

Everything goes in the Code editor! Now if there’s something for you to make any code level changes, there’s only one place to look. And it’s totally redesigned.

Introducing Hierarchy Bar

Hierarchy Bar

As part of the release 2.0, we have introduced the hierarchy bar. Hover anywhere and the corresponding element’s hierarchy will be displayed in the hierarchy bar. This way, you can access any element at the hierarchy level.

Highlight changes and Track click goal

Highlight Changes and Track Click Goal

Multiple users, one web page and a lot of changes. Sounds like a nightmare? Well, it can turn out to be one without tracking the changes. Creating variations and tracking the changes is a breeze when you can see visual highlights of changes in the editor.

Freshmarketer makes it easy to measure the effectiveness of your changes with the track click on element goal. Select this option from the contextual menu and once the clicks are received, you can measure the goal’s performance with our real-time report.

Responsive Editor

Responsive Visual Editor

So you’ve got a responsive site but what about your changes? Up until present, our visual editor allowed you to make changes only via the desktop view of your web page.To help you build variations for your mobile and tablet in just minutes, we have rebuilt the editor from the ground up to serve perfect variations for the mobile and tablet view.

Truly Smart Contextual Menu

Whether you’re a designer or a developer, Freshmarketer has a plenty of options for redesigning your web page. Make all kinds of changes on text image and much more. With this release, we have bundled up with new exciting features that includes:

  • Search and Replace the text at multiple places in your web page in just a click.
  • Automatically generates variation code for you to edit and apply the changes for multiple elements.
  • Integrate Freshmarketer tracking code right from the editor.
  • Smart and intuitive contextual menu options displayed based on the element tag.
  • Built-in variation preview to double check the changes made using the editor.

What’s next?

That, in a nutshell, is how we redesigned and released A/B editor 2.0 but this is still the beginning. We’re continuously adding more features to the editor and A/B testing.

Do get in touch and let us know what you think of the new release.

Thanks so much, and be on the lookout for much, much more!

To get updates from the Freshmarketer team, follow our publication or follow us on Twitter.

--

--

Amrita Ethiraj

Product Manager @freshworksInc, Designer for self and a Wanderer.