Kidstuff

Responsive Web Design Front-end Development

Kidstuff

Kidstuff isn't your typical toy store. They are passionate about rewarding curiosity and inspiring individuality in children. They believe that although toys should be fun, they should also be tools for education.

The Brief

It was time for a Change

Their existing site was trying too hard to be a toy store. It came across as too playful and generic; it didn't resemble the stores or the brand at all. It was time for a change and they had a few simple requirements.

1. Must be on-brand

Like their many stores around Australia, it had to feel fun without being overly playful. It had to also modern to appeal to parents and adults.

2. Must be easy to update

They didn't have much control of their previous site. Changing anything required a developer which is something we wanted to limit as much as possible.

3. Must be Responsive!

This was a priority. They recognised that they were underserving a larger portion of their customer base by having a desktop-only site.

Kidstuff Lifestyle Imagery
Lifestyle Imagery

Show Character and Personality

They had a library of lifestyle imagery that were used in their printed catalogues. They perfectly captured the playful and curious nature of the brand and we had to bring this same feeling through the new design.

Kidstuff UI composition
Front-end Development

Getting my Hands Dirty

The design process for this project was the stuff of dreams. Design reviews with the client were swift and before we knew it, everything was approved!

What this provided was the opportunity to collaborate with the development team. There was some specific functionality around the navigation which the development didn’t have time to research (and no one wanted it developed as static HTML). So that’s where I put my focus.

Kidstuff Navigation

By default, Bigcommerce displays all of your categories in the menu exactly as it is in the control panel. Prior to the Bigcommerce Stencil platform, you couldn’t control how many categories would show outside of turning off the category completely, or using JavaScript wizardy.

Through a lot of digging through documentation, researching HandlebarsJS (Stencil’s templating languge of choice) and experimenting in my own little local development environment, I was able to push a simple solution to the developers that enabled the client to do everything they needed through the Bigcommerce control panel.

Kidstuff Age Navigation

…Oh and then there was the “Age” category. Our code needed to ignore this and also apply different styling. Because there was never going to be a large number of sub-categories (like “Categories” or “Brands”) it didn’t make sense to have a full-width menu.

UI Overview

Final Designs

Kidstuff Full UI Overview

The Kidstuff website now felt like Kidstuff. It was a clean and sophisticated design which leveraged off the product and lifestyle imagery to inject fun and playfulness. And with the website now being responsive, it was now accessible to a much wider audience.

What I personally enjoyed most about this project was the collaboration between me and my developers. They had a lot on their plate already and I had a bit of time up my sleeve due to the smooth design process. I took the opportunity to get into the code and help out with some of the elements which had specific requirements. It was a great experience!

All done? This next project has some rich content with a strong finish.
Handpicked Wines Feature Image

No. 1

Handpicked Wines

User Experience Content Strategy

Read Case Study