Vwo logo

Redesigning VWO.com A/B Testing for Everyone

UI/UX Design Web

In 2012, Wingify, a Delhi-based startup approached us to redesign their flagship product: Visual Website Optimizer, later simplified to VWO.

A/B wha…?

VWO is a visual, easy to use A/B Testing tool. It lets people create several different versions of a website or landing page, and then test those out on live traffic. It then measures desired outcomes, checking to see which version maximises revenue or leads to the highest sign-ups. Barack Obama’s campaign used A/B testing extensively, sending out slightly creepy, but super-effective emails (sample subject lines: “It’s officially over.”, “Join me for dinner”, “Wow”) and raised more than $500 million doing so.

Why did Wingify came to us?

In 2012, the biggest problem for Wingify was that the strength of VWO as a product did not come through. Customers who signed up were thrilled with the power of the underlying web application, but there were far more who were turned off by the mystifying, technical terms, and the dated, plain appearance.

Vwo 1
The old VWO website

Getting the strength of VWO across

Most of VWO’s competitors required their customers to manually use HTML or JavaScript to create different versions of their websites. VWO’s strength was the simplicity of it’s interface: it was possible to create multiple versions of a website just by dragging and dropping. Since VWO’s primary customers were primarily in Marketing or Sales departments, this simplicity was a key differentiator. We looked at ways to bring this story out: and we decided that the best way to do was to let the product shine through.

Starting off from a simplification of the brand, from “Visual Website Optimiser by Wingify” to VWO, we introduced an extremely bold purple, orange and pink colour scheme. The home page started with a clear value proposition, along with a super-simple video educating not just existing consumers of A/B Testing tools, but also potential customers who might not know about it’s benefits.

Vwo 2

Custom Illustrations

We designed a series of illustrations to help the website become lighter, friendlier and easier to understand. Strong visual cues help the user find and understand complex concepts better.

Vwo 3

Native, in-browser video

We wanted to show off the underlying web-application without making potential customers sign up, log in and get set up. We created short screencasts showing specific features in action and let the product do the talking.

We took advantage of the nascent HTML5 Video standards to display video natively within the browser. As the snippet of code below shows, multiple video formats are required as different browsers support different video codecs, but apart from that, it does away with proprietary plugins and technologies (ugh, Flash).

<video autoplay="autoplay" loop="" width="620" height="390"> <source src="/images/screencasts/reports_new.webm" type="video/webm"> <source src="/images/screencasts/reports_new.mp4" type="video/mp4"> <source src="/images/screencasts/reports_new.ogv" type="video/ogg"> </video>
Vwo 4

Navigation

Large, explicit navigation menus surfaced content that might otherwise be hidden away. VWO had a deep library of content, including detailed case studies, entire e-books and webinars — it didn’t feel right to hide that in an infrequently-accessed “Resources” section, so we brought those front-and-center with a generous drop-down menu. Similarly, several standalone tools that VWO had made for free use — an A/B Testing Duration Calculator, a Significance Calculator, a Landing Page Analyser and Ideafox, a repository of marketing and testing resources — were all given increased visibility with their own custom pages.

Vwo 5

In Conclusion

VWO for us epitomises the promise of technology: it allows someone without technical knowledge the ability to manipulate tools and technologies to do things that they could not have imagined doing. Here, it allows small-business owners to build better-performing websites and drive more online sales or conversions without needing to be conversant with the underlying technologies of the web.

Our friend Sunit Singh, who leads Design at Cleartrip had this to say about VWO:

We redesigned our entire website and VWO helped us set A/B tests to gauge the performance of the new site. We used it extensively.
— Sunit Singh, Lead Designer at Cleartrip

Part II: Redesigning the web application

Stay tuned for Part II, where we explore how we redesigned VWO’s web application. Dashboards, graphs, different ways of representing hundreds of thousands of data-points and much more!

Vwo 6

Want to work together?

Looking to simplify a complex product and drive sales or conversions? We love simplifying complex products, and building web-based Software-as-a-Service tools. Write to: [email protected]