ToucanBox Case Study
ToucanBox approached Authentic Style to create a fresh new logo and website design for it’s fantastic service. Here’s a quick case study.
So, what is ToucanBox?
Before I launch straight into the case study, I’ll give you a little background about ToucanBox and what it offers. Put simply, parents pay a subscription to receive monthly activity boxes for their children through the post each month.
It’s all about spending quality time as a parent interacting with your kids, whilst the activities, arts & crafts and games inside each box are actually aiding your child’s development at the same time. Many of the books and activities in the boxes have actually been designed by child development experts with that purpose in mind.
If you’d just like to view the designs, then click the button below. If not, then please read on to find out how the project was approached.
Stage 1: The Logo
The first step was to start by creating a revised logo for ToucanBox. The old logo looked good as a starting point and I could see it had potential, but myself and the client agreed that the box in which the Toucan character was sitting was too formal, and didn’t really fit in with the rest of the “feel” that ToucanBox was aiming for. We also felt that the Toucan character itself could be refreshed significantly and have a classy children’s story book illustrated feel, rather than being really bright and glossy.
With that in mind I enlisted the help of a fantastic illustrator, Vicki Gausden. Not being an illustrator myself I knew that whilst I could have created something good, having Vicki (whose style was exactly the vision myself and the client had for the new logo) would get the best results.
Below you can see the old logo versus the new logo. Myself and the client were really impressed with the finished result. It was vibrant, but in a more professional way than the existing logo and we could see it being instantly recognisable to children when printed on a box arriving at their home. The new character had personality, but at the same time it was giving a much more professional feel of a trustworthy company, which we hoped would appeal to the parents of those children.
Stage 2: Information Architecture / Wireframing
Moving on, the next stage was to think about the information architecture and produce wireframes for the main page types of the site. With this particular ecommerce site there were no limitations imposed by the platform that the site would be developed on. The development company the client was using were going to develop the site in Ruby, meaning that I had a totally free reign when producing designs for the checkout process and the site in general.
The ToucanBox homepage needed to get across several things:
1. What ToucanBox is – e.g. a subscription based service
2. Pricing / Info on how to get started
2. How it actually works
3. Whats in the boxes that get delivered
4. Some info about the boxes actually being beneficial for child development
5. Credibility (press logos)
6. Social Interaction (Facebook / Twitter)
Having made a list pretty similar to the one you just read, I set about creating a wireframe which you can see below. One other element that was important to include was a nice big sliding banner, showing kids actually playing with the product itself.
Some of the other main page types were the
- ‘Boxes’ page, which needed to clearly outline what activities were inside two example boxes that the client wanted to showcase.
- The ‘Get Started’ page, which had to quickly convey the different subscription options in a clear and concise way.
- And also the ‘How it works’ page, which obviously needed to show in three simple steps how the ToucanBox service works.
Here are some snippets from wireframes for some the other main pages:
Once the wireframes were all signed-off it was time to move onto the design. Thanks to Vicki’s great work on the logo I had a fantastic, vibrant, playful colour palette to work with.
Stage 3: The Design
The key element which I knew would impact greatly on ToucanBox’s success would be to achieve a design that was:
1. Professional enough to give trust to parents to commit and subscribe to the service, and;
2. At the same time be playful and exciting enough to appeal to parents and show that ToucanBox would be a fun product and also beneficial for their children.
Font choice was crucial to help achieve this. I wanted to use a playful typeface, balanced out with something a little more serious. After searching Google Web Fonts, I settled on Terminal Dosis and Neucha, which I think really complement each other well in the design.
Another element that would help get across the playful and less formal look and feel would be the use of hand drawn / erased lines. I felt that having lines in the design that weren’t straight and formal would help get across the playful, child-like feeling. I also tried to achieve this feel with some hand drawn sketches on the homepage to help illustrate the ‘How it works, What’s Inside, and Child Development’ content blocks. I took it a step further by doing something similar with the hangdowns on some of the other page designs, the banner area on the homepage and on other parts of the design too.
The checkout design was a crucial page to get right. The process had to be easy to use and the form had to be easily understandable and easily usable.
With that in mind I set about breaking the form up into various sections and laying the fields out in a way that would allow users to work their way through it with ease. I also wanted to eliminate all distractions during the checkout process, so I removed the navigation and created a minimal layout that simply focused on the checkout form – nothing else.
Below is a link to view designs for the entire ToucanBox project as images in your browser. I’d love to hear your thoughts in the comments below.
Now that the project is finished I’ll be offering advice to the development company and providing them with any additional graphical elements that they might need as they build the site.
All in all ToucanBox was a fantastic project to work on, and Virginie (the client) was an absolute pleasure to do business with. She trusted my judgement, offered up great suggestions and fed back concisely and promptly. Pretty much the perfect client!
Here’s her take on the project and working with Authentic Style:
“I found Will after a careful search process and I immediately liked his style: simple and elegant. Will was a pleasure to work with, he laid out the plan at the beginning of the project and stuck to it. He managed to turn my vision into an engaging, professional looking website, all with very little directions from us. I’m extremely pleased with the result and looking forward to working with Authentic Style again on future projects.”