Skip to content

1. Build a Website for A|B Testing

Playback Speed:

In the last activity, each member of your group created a movie poster to advertise the movie you chose.

In this activity, you will collect and analyze data to select the most effective poster.

To do this, your group will collaborate to write one computer program to conduct an A-B test. A-B testing is a way to conduct your own experiment and collect data about what an audience likes.

Web designers use A-B testing to find out which features their users like best. Instead of holding a focus group or asking customers what they like, they test the product in action to see which version performs best.

For example, wanted to know if more people would sign up for coding classes if the webpage button said “Learn more” or “Join us.” It would be hard for users to look at both buttons and say with certainty which button they prefer.

Instead, the organization conducted an A-B test. Different versions of the button randomly appeared on their website and they collected data about how often users clicked on each.

The data showed that users signed up for a class 29 percent more often when the button read “Join us” versus “Learn more."

For example, designers of “World of Warcraft, a role-playing video game, frequently run A-B tests and track user response. They create multiple versions of the same quest, or assignment. In one version, you may have to save a character.

In another, you might eliminate a threat. In another, you might find a certain object.

Then, they randomly release different versions of a quest to find different users. They collect data on how long users play, whether they return to the game, and how engaged users are while they’re playing.

The data showed that users spent more time playing the game when they had to save another character than when they had to eliminate a threat or find an object. Designers use the data to create more of the most popular quests.

Your A-B test will present a movie poster at random to your classmates.

Then, users will choose whether or not they want to see the movie based on the movie poster.

Once you’ve collected data from your audience members, your group will analyze the data to determine which poster is most effective and therefore which poster to use in your pitch to the board of directors. To create your program, each member of your group will work on only one piece of the code.

Computer programmers rarely write software by themselves. Lots of programmers work on the same project, all at the same time.

Tech companies often have thousands of software engineers, all working on small pieces of the same program. Your website will display one of your group’s posters at random and ask a user if the poster makes them want to see the movie. The user votes by clicking yes or no. The results are then returned to a spreadsheet where you can analyze the data you collect.

To get started, have one member of your group open the movie poster website starter project linked on this page, make a copy, and share it with the other members in your group.

Then, decide which part of the code each group member will build. Each person will build only one part of the code.

"Render" tells the computer to show a random image in your website.

"Config" adds the movie poster links and names to the website.

"Vote" lets users vote by clicking yes or no.

With your group members, decide which of these three functions each person will write.

There are three other code files Core adds the votes to the spreadsheet Page creates the layout for the website. And tests is a file that will help you test your code while everyone else is still writing their pieces.

Do not change these parts of the code.

When you’ve decided who will write each part of the code, render, config, and vote, open the starter project from your “Shared with Me” file. From the spreadsheet, open the script editor. Then, move on to the video for your part of the code.

Now, it’s your turn: Have one person in your group open a copy of the A-B Test website starter project and share it with all the members of your group.

Decide who will build the render, config, and vote files Open the starter project and the script editor at your own computer.

Then, move on to watch the video for your part of the code.

  1. Have one person in your group open a copy of the A|B test website starter project and share it with all the members of your group.
  2. Decide who will build the render, config, and vote files.
  3. Open the starter project *and* the script editor at your own computer.
  4. Then, move on to watch the video for *your* part of the code.
Shared work

This project will be shared with

  • "A/B Testing" by Optimizely (