Optimizely Open-Sources Guiders.js, a Library to Help You Guide New Users

Today we’re open-sourcing a JavaScript library for visually enhancing your web application with guiders, available at https://github.com/jeff-optimizely/Guiders-JS.

A guider is a dialog box that guides a user through your application.  This improves the user experience of a web application by visually introducing the user to important features.  Enough text, let’s show you what we mean.  Here are a couple examples:

This example guider is not attached to any element and has an overlay between it and the page.

Screen_shot_2011-06-22_at_6

An example guider attached to the “Add Variation” button in Optimizely.

Guiders can be attached to an element on your web page, or they can be centered on their own.  Attaching a guider to an element on your page is as simple as using the appropriate jQuery selector and a position value 1-12.  The position value determines which direction the guider attaches to the element, according to the numbers on an analog clock.  For example, the following guider is attached with a position value of 2.

Two_oclock_guider

Developers can attach a guider to an element on their web page at any of the clock positions.

The motivation for guiders on our web app was to ease new users in to the service.  Optimizely offers website A/B testing software-as-a-service.  New visitors can try the service with either a 30 day free trial, or by testing it out without even registering.  Rather than drop new visitors into the editor on their own, we wanted the ability to take them on a guided tour of the product.  So we implemented a series of guiders to introduce visitors to the application.  You can see it by entering a URL on the Optimizely homepage and clicking the call-to-action button.

We ran an A/B test using guiders on Optimizely.  Half of the traffic saw guiders upon first use, the other half didn’t.  One of our goals, user engagement, saw a statistically significant increase with guiders.  This makes sense since the guided tour causes users to click something on the page.  Another of our goals was triggered upon successful user registration.  We’ve seen an increase in that goal too, however at this point in time the increase is not statistically significant enough for us to declare it a success.

The Guiders library can also be used to introduce new features to existing customers.  For example, Google Apps often uses promo dialogs in this way.

Promo_gmail

Example of a promo dialog in Gmail.  The Guiders library can be used for these, too.

You can check out Optimizely and Guiders right now by clicking this direct link to the Optimizely editor.  A link to the start the “Guided tour” is in the top right corner.  Enjoy!

Posted in SaaS | 20 Replies

Optimizely Increases Homepage Conversion Rate by 29%

Our home page, www.optimizely.com, has a red call-to-action button letting people test their website in the Optimizely editor.  

The Optimizely.com homepage with the winning variation, “Test it out!”.

 

We wanted to see what effect the button call-to-action had on conversion rate, so we ran an experiment changing the button text to the following three variations:

The Original Page used “Get Started!”

The first variation used “Try it out!”

The second variation used “Test it out!”

The third variation used “Give it a try!”

For this experiment, we’ll look at the get_started goal, a tracked element we created in the editor to track when a visitor clicks the button.

Here’s what the results page looks like, with the dates (x-axis) redacted for confidentiality:

The Experiment Created goal on the results page.

Let’s break this down.

First, note that we’re looking at the get_started goal.  There are a number of other goals we were measuring on the results page, but this is the one we want to focus on for this discussion.

Winner

In the top right corner, you can see we know there’s a winner.  It says that the “Test it out!” variation is beating the original page by 29.6%.  This means that the conversion rate of  this variation is 29.6% higher than the conversion rate  of the original page.

Test it out is the winning variation.

Conversion Rates

The statistics tell us exactly how many visitors converted per variation and the total number of visitors who saw each variation.  Calculating converted visitors / total visitors gives the conversion rate , in the second column.

Conversion rates calculated from visitor data.

Error Bars

The error barsshow you a visual representation of the original page’s observed conversion rate. The narrower the error bar the more likely the conversion rate falls within the range. The wider the error bar the more uncertain of the conversion rate. 

The fourth variation beats the original page, even when taking in to account statistical error.

As you can see, both “Test it out!” and “Give it a try!” are winners.  Their conversion rates  are higher than the original page’s conversion rate, even taking in to account the statistical error.  Visually, you can see this by the fact that the green box (representing the variation) does not overlap the gray box (representing the original page).  Additionally, the rows of winners are styled green.  (Technically, we style a row green whenever the chance to beat original is greater than 95%)

Graph

Finally, the graph shows us the conversion rate for each variation over time.  You can click on the graph to change the scale, as well as toggle which goals are shown by clicking on the line in the legend.

The graph shows you your conversion rates over time.

We hope that you like the new results page!  And if you’re new to Optimizely, well, why don’t you test it out 

Posted in Case Studies, Product & Features | 6 Replies