News

The design process of Jolena

posted by Veerle Pieters
03 November 2011

People who follow me on dribbble might have seen a bit of the work I've done for Jolena, a Belgian online shop that sells natural and durable toys. Since this project was absolute fun and a challenge to work on in every way, I thought it would be perfect to write about it.

The briefing

For this project, we were assigned the task to redesign both logo and website (CSS/HTML has been done in-house). Jolena sells special toys, backpacks, treats & party favors for kids. Just like their old one, the client preferred to have a logo consisting of a symbol; something playful, hip and special. The old Jolena logo used to be a woodpecker, referring to the wooden toys, one of Jolena's major products. For the new logo the client preferred something totally different as symbol or icon. In terms of colors, we had total freedom.

The logo design

Sketches
Sketching and doodling for icon ideas for the logo

First we did a lot of sketches and doodles of some basic ideas. The subject for the creation of this logo is rather fun and we could think of many different cute little icons that would suit well. As usual, we decided to show most of my doodles to the client first as that has helped us saving time and misunderstandings in the past. One of the ideas we had was to create an icon that could also serve as a mascot, something that people would relate to toys. So we tried out a few funny little characters that looked iconic and abstract at the same time.

Colors
Color combinations for the logo and housestyle Other color combinations for the logo and housestyle

At the same time we also started experimenting with some color combinations, where we tried to find 4 colors that would suit as a color palette for the site consisting of 2 primary colors and 2 secondary ones. For each of the combinations we made sure there was enough contrast to play with. At first we were a bit afraid we would present too many choices to our client. In our face-to-face meeting here at the office, we felt the client really knew what she was looking for, and we had good faith that we weren't dealing with the kind of client that couldn't make up his or her mind when being offered a lot of choices. The colors at this stage were of course just presented as possible ideas, and it wasn't my intention to let them choose the final colors at this stage. In fact it would be rather hard to do so without seeing a actual logo design.

Typography
Suggestions and ideas for Jolena's new typeface

Another element besides, the icon and the colors is choosing a typeface. Here we also had a couple of ideas. We were looking to find a solid typeface, but script styled. Kevlar seem to fit the bill for us. The other typefaces had a few good qualities that we liked as well, but Kevlar felt more solid.

Feedback

The client liked the sketches numbers 7, 8 and 25 a lot. They also found number 5 interesting, though it made them of a little robot or something space like, which wasn't so good. A lot of the sketches reminded them too much of baby stuff, like 17, 33, 34, 35 and 36.

First design proposals

First we worked further on sketches numbers 7 and 8. One of the ideas we had in mind here was to try to make the spring of the icon the letter 'e' of the name and have the icon in a central position of the name. We thought of using a script typeface of our own creation.

Second Jolena logo design proposal

Number 25 of the sketches was a bit of a special one as the client saw 2 different things in the 2 circles of the icon: feet or wheels. Other people however, saw something else… :) Not sure if you see it? My client didn't see it at first either, and so it was only when we posted a modified version based on our client's feedback on dribbble that we found out we had to alter the design. As for the typography of this logo, we decided to use Kevlar as typeface but with the alternation of connecting all the letters, and change the capital J and the letter l.

Second design proposals

Since the global idea and the typography was already approved, the only thing left was to find a way to create a new icon. In other words we had to go back to the drawing board and try to come up with another little character.

Jolena icon experimentations

This time we found it most useful to just experiment directly in Illustrator with a few basic ideas that we had in mind. One thing we tried out, but didn't seem to be successful, was to just change the shape of the feet so they looked more like real teddybear feet. For some reason that didn't do the trick. Then we thought we should try to see if we could start from some other kind of toy such as a car, or maybe a ring toy that has the look of a cute animal. While my fantasy was on a role, I drew a ton of funny looking fantasy creatures, some with horns, and some with 3 legs. I don't know exactly how many were drewn, but a lot of them for sure. Only a few are shown here.

Final design

When we looked back at all the experimentations of toys and creatures, the ring toy's rabbit ears gave me the instant idea to create a cute rabbit. It's the kind of toy that a kid usually remembers from his childhood, and we felt strongly that this type of icon, which was our initial idea, would create the effect that fits Jolena perfectly. After a few iterations, the final logo was born. The experimentations image shows some of the steps we made to get to the final version of this logo (last 3 icons with the rabbit ears on the 2nd row).

Jolena's final approved logo design

In the end we all felt that the final result was way better than the first design.

The web site design

The color palette

The initial preferred color palette for Jolena was the very first color palette proposal, the one that had yellow included, but once we've started with the design for the site, it was clear that the yellow would cause trouble for readability in case we would use this color for buttons or text links. We decided to change the palette a little and we added some sort of pink, that has a lot of brightness and that deviates a little from the typical pink, as that color contrasts well with the other colors in our palette and it would be suitable for text links and highlights.

Jolena's color palette
The look & feel

From the briefing it was clear that the site should feel very inviting and evoke a certain feeling of cozy and cuteness, but in a well-balanced way. Small ornaments and subtle textures would definitely play an important role to set the right mood. The site should appeal to both young mothers, and have this inviting kids feeling, without resorting into a typical pastel colored baby website. That's also why we felt a bright and bold color palette would suit perfectly. Together with an eye for details, it would give the site that extra bit of a punch that we hope would set it apart.

Homepage design

Since the client already gave us the basic wireframe documents combined with an extended description of the content and functionalities for each page, we could easily jump right into the design, starting with the homepage.

Jolena's homepage template design

As for the typography, we thought Proxima Nova would be suitable for body copy and main text, and Bree for titles and a few other smaller elements, like action buttons and sidebar menu items.

Product category page design

Once the homepage was all set and approved we worked out the other template pages. We designed a whole bunch of pages, such as the check-out and shopping cart pages, but also general ones like FAQ and the about page. Two major important ones were the product category page and the product detail page.

Jolena's product category design

The challenge in this page was to make sure the visitor would get a good overview of what's available within this category, and which are the new products. To spark that little extra confidence and interest we decided to add a curator who explains why he or she loves these toys or other items.

Product detail page design

For the product detail page it was important that the visitor could easily add the product to their shopping cart to buy the item. Price and other detailed info would be there in a logical and clean way, plus the user should still get a good overview of where he is in the site and which products he already had a look at. Easy access to the shopping cart at all times and knowing how many items there are in the cart was also important, plus the social aspect.

Jolena's product detail design
On a final note

This project has been a joy to work on from a designers point of view. Not only was the subject fun and challenging, also the fact that the client really understood what makes a good online shop experience, and that he understood perfectly that design matters to make the circle complete for an optimal customer experience. We truly hope our design didn't miss its effect. So make sure to check out Jolena.be to see the design in action.

Meanwhile...

Apart from Jolena, there is another website managed by our client, called Suikerdraakje, which is currently still in process. Suikerdraakje (translated to English Sugardragon) is an online shop, where you can buy presents, and other baby goods for when friends or family bring mom and the baby a visit in the hospital. Here in Belgium it's the tradition to go to the hospital to visit the newborn, and the parents give their guests sugar beans or what we call baptism sugar. Some sneak peeks of the logo and web site creation can be viewed on dribble.

Comments

  1. 1 Chiara Mon Nov 14, 2011 at 04.59 pm

    I love all the process to get to the final result.
    I found it quite familiar.
    Really great site, great palette and choose of typography!
    Definitively I love the details!

    Finally a children site where parents have fun and pleasure shopping!

  2. 2 Gilles Gallico Mon Nov 21, 2011 at 10.49 am

    Really really nice. Both typo and icon. I love the way you explain your steps of creation. It enables us to “try to” do the same !