If you’ve ever worked with any of the popular conversion optimization platforms (such as Optimizely, VWO, or Google Optimize), you’re probably familiar with their visual editors – WYSIWYG tools that let you build tests without any coding experience.
These tools can be a great way to get started with a small-scale optimization program. They allow easy testing of simple changes, such as altering button colors, testing reworked headline copy, and swapping out images for new ones.
Conquering the Limitations of Visual Editors
1. Use Custom Code to Modify Page Structure
For example, the wireframe on the left shows how we tested a new format for content on one of our client’s mobile product detail pages. Originally, product information was contained in a horizontal row of tabs – a shrunk-down version of the desktop implementation.
Using custom code, we were able to test the design on the right, with an accordion-style layout more suited to vertical smartphone screens.
2. Media Queries Can Save Testing Budget
Mobile traffic keeps increasing over time, but a large percentage of conversions continues to come from desktop devices. For these reasons, it’s critical for many businesses to test and optimize their desktop and mobile experiences simultaneously.
Using media queries in your custom CSS allows you to customize the styling of page elements to be just right for each screen size. Without custom code, you’d need to create multiple tests – one for each screen size.
Bucketing all traffic into one test allows you to reach significance faster (and still allows you to analyze performance across different devices using analytics segments)!
3. It’s Just Logical to Use Logic
Writing custom code opens up a wide range of tests that use logic to conditionally display elements or dynamically alter their contents. For example, you might use a simple formula to calculate and display a product’s monthly financing payment based on the cost displayed on a product detail page.
In these wireframes, the test variation checks each product’s SKU against a list of SKUs with free shipping and displays a “Free Shipping” badge only on eligible products. These tests would be impossible to implement with the visual editor, requiring your company’s developers to spend time coding a variation that may ultimately be discarded.
A World of Possibilities
While the test treatments above are all great examples of going beyond the limitations of a platform’s visual editor, they really only scratch the surface of possibilities for A/B/n testing. Breaking out of the WYSIWYG world of test-building creates a near infinite number of layout and interactivity options.
Where Do You Go From Here?
Find a Partner
If you or your company aren’t able to utilize your testing platform to the fullest, consider partnering with an agency like ROI Revolution that specializes in conversion optimization, UX, and A/B testing. Click here to request an optimization audit of your site to uncover opportunities for reduced friction and increased motivation in your web presence.