Expanding upon Taplytics’ existing mobile A/B testing platform we launched the Visual Web Editor in 2021 to allow our users to run experiments on their websites using our point-and-click visual editor. With it, users can run A/B tests on a wide variety of different elements on their sites (involving imagery, buttons, text, layout, colour, positioning, and much more) all with minimal HTML/CSS coding or dev support. As a separate branch of our product offering it was fun to work from more of a blank slate and build everything up from scratch using a design system that I set up specifically for the web editor.
With the Visual Web Editor functioning essentially as a separate tool (connected to, but existing independently from our main product dashboard) it was important to ensure that it still felt like it was an extension of the rest of our platform. I set up a comprehensive design system to help maintain this connection, but more importantly set us up for success with reusable components. Consisting of a colour library, typography index, icon library, and component collection, my design system allowed me to develop new features seamlessly and quickly.
Here are a few parts of the design system (typography index, icon library, and variety of components):
Design Spotlight I
Top Bar & General Controls
The Visual Web Editor is essentially a Chrome Extension that launches a bar of controls over top of a user’s website, allowing them to make edits to their site, preview their changes, set up different experiment variations, and run simple click and page-view goals so that they can track the success of their experiments. They can also change their screen size to test how their edits function responsively, use our DOM selector section to make more granular element selections and bulk edits, inject HTML/CSS/JS code, and view and rollback changes using the history panel.
Here’s a closer look at the top bar and some of the available controls:
Design Spotlight II
Editor Panel
With the editor panel users can select elements on their website and make a variety of visual changes to help them determine what performs best on their site. They can do things like edit copy, change layout, change typography style, edit background colours and imagery, and even get AI generated copy suggestions. The editor is also organized by section and each section is collapsible so users can minimize the sections they’re not using to help reduce clutter and increase focus.
Here’s a closer look at the editor panel:
Design Spotlight III
History Panel
With the history panel, users can see a comprehensive log of changes that have been made to the site (including a handy before and after display of the edits), quickly access the edited element if they want to make further adjustments, and undo a change that has been made.
Here’s a closer look at the slide-out history drawer:
Design Spotlight IV
Goals Panel
With the instant goals, users can set up simple click and page-view goals on their website so that they can track how many clicks specific buttons or links get and which pages of their website are getting the most traffic. By setting up goals on specific elements they can track the success of their visual experiments and determine which changes led to more success with things like sign ups, registrations, downloads, visits, and the list goes on.
Here’s a closer look at instant goals:
Design Spotlight V
Chrome Extension
The web editor chrome extension allows users to sign into their account independently of opening up the main Taplytics platform, allowing users to quickly make edits and updates to their site’s experiments on the fly. They can also turn experiments on and off directly from the extension and easily see which of their experiments are actively running.
Here’s a look at it and some of the different states I put together for it:
Results
New Customer Acquisition & A Scalable Design System
After launching the Visual Web Editor we signed several new customers who came aboard specifically because they had seen a demo of the VWE. Within months of launching it we were helping several notable companies across the US and Canada run experiments on their websites. From a design standpoint, the development of a comprehensive and scalable design system and modular and repeatable components made it really easy to quickly add new functionality to the platform.
Design, Strategy: Trevor Davson Product Management: Taplytics Product Team Development: Taplytics Engineering Team
All work completed for and owned by Taplytics Inc.
