When Trademark Productions (TM) and Kids Creations, a subsidiary of Backyard Products, LLC., began their relationship the Kids Creations website was outdated and slow. TM completed the first Kids Creations website rebuild in early 2013, dramatically improving the design and functionality of the website. Liquid Pixels* technology was included, in order to allow shoppers to build and customize their dream play sets directly on the website.

Since then, TM and Kids Creations have enjoyed a productive working relationship, spanning from website maintenance to PPC advertising. Always pushing the envelope in order to remain the top choice for customers, the idea for the newest Kids Creations came to fruition almost two years ago. Officially kicked off in 2015, much thought went into the rebuild in order to work out specifics, as well as waiting for the right opportunity to build it- specifically during their off-season.

Kids Creations has always understood what it takes in order to stay front and center in the competitive e-commerce world, and they knew it was time for something new. Their website needed to be completely refreshed and modernized. Over the years, many features had been added to their original website in order to improve the user experience, but those pieces needed to be cleaned up in order to keep the website running smoothly and effectively. Their ultimate goal? Create one, cohesive website that would knock their competition out of the park. TM stepped up to the plate ready to hit a home run.

In order to create a smooth viewing experience for all screens and sizes, improvements were made in responsive coding by taking a mobile first approach. TM completely refreshed the design of the entire website, modernizing it at every turn to create a cleaner look. TM wanted to make the customer’s experience a full-screen one, so we utilized larger text, larger photos, and more screen real estate.

Before. When we first developed the website, it was in line with web trends at the time.
Before. When we first developed the website, it was in line with web trends at the time.
Kids Creations
After. We still wanted to capture that playful element, while providing a more modern, clean, and refreshing design.

Technically Speaking

As stated, TM used some of the latest technology available in web development to make the new Kids Creations site responsive. We took responsive coding down to a granular level so that we could provide a great viewing experience on any device of any size. Some of the technologies that we used are:

  • Bourbon – A simple and lightweight mixin library for Sass.
  • Neat – A lightweight semantic grid framework built with Sass.
  • Node & Bower – Used to manage the website’s JavaScript & front-end dependencies.
  • Gulp – Used to run Build tasks on the website’s assets.

Together, these tools offer several benefits to allow for an exceptional viewing experience.

Combining Bourbon and Neat keeps breakpoint management simple. Placing layout adjustments and style changes under a set of defined breakpoints allows for a very clean, responsive user experience.

Utilizing Node and Bower, TM also employed DOM-based routing for the bulk of the JavaScript utilized on the website. DOM-based routing ensures that scripts only fire on the pages that require them. This results in a faster loading time.

TM utilized Gulp to help improve loading time. This concatenates and minifies all the scripts and stylesheets within the site into a single file, which reduces the number of render-blocking assets used on the site, meaning a quicker load time for mobile users.

Kids Creations
Before. With various parts and pieces being added throughout the years, the site’s speed decreased.
Kids Creations
After. Utilizing new technologies, we were able to create a smooth viewing experience regardless of device size. We also increased site loading times, and designed a cleaner simpler layout. All the important information is there without overwhelming the user.

Immediate UX Improvements

The brand new Kids Creation website launched on July 7th, 2016. Large improvements were immediately noticed. We’ve reduced page load time by an average of 33%, reduced bounce rate by almost 20%, and increased time on site by double – all very great results.

The number of assets needing to be loaded has been reduced, as well as the size of said assets by quite a bit. We’re expecting to see improved search rankings, especially as we continue to modify content, too. Kids Creations already ranks high in the SERPs and the new website will not only retain that, but also allow us to expand and focus on different target markets as necessary.

The user experience (UX) has also been improved with the larger text, easy-to-use navigation, brand new filtering options on all of the category pages, and less bloat on each page.

Kids Creations
Before. When we first developed the site, we utilized Liquid Pixels technology, which is still in place today.
Kids Creations
After. Liquid Pixels technology remains a defining piece on the Kids Creations website, but we softened the look and provided a more streamlined user experience.

What’s Next?

From a coding perspective, the website was completely rebuilt. TM used the same products and much of the same content, with relatively minor cleanup. We’re looking forward to diving deeper into the website’s content and SEO now that the project has launched, in order to keep rankings high and push the envelope in every way possible. Additionally, we plan to add new functionality and extra improvements along the way that will continue to hone the experience for the user.

Kids Creations operates in a market that sometimes proves difficult. In order to sell the value and quality of their swing sets, especially their redwood swing sets, Kids Creations knew they needed a boost in order to push those value sells and promote their higher-end products. TM has accomplished all of those things and will continue to work toward their continued success in the future.


*Learn more about Liquid Pixels technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts