Adventures In SiteSpect: Create A Seasonal Homepage Theme

By Ruby Brown

March 21, 2019


Many brands find that seasonally updating the look and feel of their site has a positive impact on key metrics like engagement and conversions. If you’re looking to do the same, you may want to update your hero image, change up your fonts or messaging, add new product images, or feature new content. For example, a clothing retailer may change its hero image to feature shorts and spring dresses, move the product images for winter coats down the page, or add in text about a new promotion or sale. With SiteSpect, all of this can be done in a matter of minutes using the Visual Editor. In this blog, I’ll give our website a fresh spring look, and walk you through how to make these simple changes that can have a big impact.

Title, Tag, and Launch Your A/B Test

Just like in any other A/B test, you’re going to need to create your A/B test, title, and tag it. The tag comes in handy when you build up a large library of campaigns and you need to search by category.

Select and A/B test in SiteSpect


Name and tag your A/B test launch visual editor


Redesigning the Homepage Look

Once on the site, I set out to redesign the home page to shout, or rather, scream, “spring is here!” Here is what I did.

1) I changed our classic blue background to a more seasonally appropriate hot pink. To do this you navigate to edit > style > background color. See the images below.


edit style using sitespect

use sitespect to change background color

The “Background Color” code that I input there is the RGB code for a very bright pink, I could also have used a HEX color, this pink is #E60099. But, you don’t need to use codes to get your colors. You can also simply write in “pink.” This doesn’t let you control the exact hue, but it is an easy option.

use sitespect to create a pink background

And we’re pink!

2) I wanted our main image here to be a little more thematic. So, I went over to our lightbulb, selected img>edit>image, and I imported a picture of a friendly goat that I took last summer.

edit an image in SiteSpect

swap and image in sitespect


3) I thought a new header font would spice up the text a little bit and make it pop. For this, you simply click on the header text element, and just above click edit > style. From there I changed the font to cursive.

Edit text style

change text to cursive

4) Finally, I decided to have some fun reordering some of our page elements. Now imagine that you wanted to feature an element that had been on your site for a while — this might be the key to redirect visitor attention. To do this, select your element and navigate to reorder. From there, it’s a simple drag and drop.

select reorder

drag element to reorder in sitespect

reordered elements in sitespect

5) There’s a lot more you could do here. I changed the sub-header text to match the pink background color, and you could edit the text, add additional images and more. But here is my final product.

seasonal homepage

Looks good, huh?

Set Your Metrics and Your Audience

So, just like in previous “Adventures in SiteSpect” blogs, this redesign is purely for illustrative purposes and will not actually go live. The goat politely declined to give rights to use his likeness for anything other than educational purposes.

But, normally, you navigate back to your campaign set up and select any metrics you’d like to track. You can, of course, track any conversions on your page. But, you might also track smaller actions like scroll depth, time on page, site navigation depth, mouse hovers, and more — giving true insight into how your site visitors respond to your design changes.

You would also set your audience at this step. You may decide that you only want visitors in the U.S. to see your variation, or perhaps you’d like to exclude users on mobile and tablets, and only track desktop users. That is all under your control, and will give you great insight into your variation later.

All said and done, this took about 10 minutes, and I’m not even a web designer! You can always go in and edit the HTML directly from the visual editor, and for more complex changes, you can use SiteSpect Search and Replace to edit code. Happy A/B Testing!

To learn more about SiteSpect, visit our website.

Categories: ,


Ruby Brown

Ruby Brown

Suggested Posts

Subscribe to our blog: