A/B testing is one of my favorite research activities to be involved in. I’m always amazed how minor tweaks or interactions can drastically effect the user experience of a product. CodePen my go-to tool whenever the opportunity to A/B test comes up.

I read a post by Chris Coyier and learned that you can include HTML/CSS/JS between pens. Knowing this allows for huge improvements to my workflow!

##Old Workflow

I would get a prototype to a point where it was 100% done and fork it into different pens. Then I’d make the respective changes that were being tested. This worked great… most of the time.

Sometimes during testing, bugs were discovered that got in the way of clear test results. Fixing them meant going through every forked pen and making changes. This was annoying, as things could get really out of sync on bigger tests.

It wasn’t annoying enough to stop using CodePen for testing, but there was room for improvement.

##New Workflow

Knowing that I can include code from other pens, I can work similar to how I would in Git. I can essentially have one pen that acts as a “master branch”. Then my subsequent pens can just include the master and supply different UI or interactions to be tested.

Tweaks to the master pen are reflected wherever it’s included, so any bug fixes or changes cascade to all my tests. Woohoo for efficiency!