The design process of Jolena

26 Oct 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, I was 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, I had total freedom.

The logo design

Studies

Sketches
Sketching and doodling for icon ideas for the logo

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

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

At the same time I also started experimenting with some color combinations, where I 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 I made sure there was enough contrast to play with. At first I was a bit afraid I would present too many choices to my client. In our face-to-face meeting here at the office, I felt my client really knew what she was looking for, and I had good faith that I wasn'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 I also had a couple of ideas. I was looking to find a solid typeface, but script styled. Kevlar seem to fit the bill for me. The other typefaces had a few good qualities that I 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 I worked further on sketches numbers 7 and 8. One of the ideas I 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. I thought of using a script typeface of my own creation.

Second Jolena logo design proposal

Number 25 of the sketches was a bit of a special one as my 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 I posted a modified version based on my client's feedback on dribbble that I found out I had to alter the design. As for the typography of this logo, I 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 by my client, the only thing left was for me to find a way to create a new icon. In other words I had to go back to the drawing board and try to come up with another little character.

Jolena icon experimentations

This time I found it most useful to just experiment directly in Illustrator with a few basic ideas that I had in mind. One thing I 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 I thought I should try to see if I 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 I drew, but I drew a lot of them. Only a few are shown here.

Some of the 2nd design proposals

Final design

When I 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 I felt strongly that this type of icon, which was my 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 I 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 the client and I 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. I truly hope my 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 my 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 Heather 26 Oct 2011

    Beautiful work… and a great article on your entire design process. I’m wondering if you know what eCommerce software the Jolena site is running on?

  2. 2 Phil 27 Oct 2011

    That’s a really nice logo and website. Great article as well… I always find it interesting to learn about other designers design process.

  3. 3 Toon 27 Oct 2011

    So wonderful how well balanced this whole project is. Goes to show how important proper product descriptions, photographs and overall IA are to make a design really pay off.

    One critical note, though: I think you’ve let yourself go in the use of <section> elements a bit. Your #content section should be a div, I think.

  4. 4 Veerle Pieters 27 Oct 2011

    @Heather

    Beautiful work… and a great article on your entire design process. I’m wondering if you know what eCommerce software the Jolena site is running on?

    Thanks :) I have no idea, I’ll have to ask my client.

    @Toon

    One critical note, though: I think you’ve let yourself go in the use of <section> elements a bit. Your #content section should be a div, I think.

    Like I mentioned in the article the coding has been in-house.

  5. 5 chris 27 Oct 2011

    AMAZING work* It´s so much fun to see the progress from the first doodles to the final product. I love it! Keep us updated, if it´s online. :) LG*

  6. 6 Guy van der Kolk 27 Oct 2011

    Wow, this is awesome work!

  7. 7 Gino 27 Oct 2011

    @Heather

    I’m wondering if you know what eCommerce software the Jolena site is running on?

    We don’t use any eCommerce software. I’ve developed (code, html, js & css) the app myself.

    @Toon

    One critical note, though: I think you’ve let yourself go in the use of <section> elements a bit. Your #content section should be a div, I think.

    That also means that I’m to blame for the excessive section usage :-). And I agree, the content (and some others, maybe) should have been (and will be after the next update) a div. I guess I got a bit carried away on my first html5 implementation…

  8. 8 Toon 27 Oct 2011

    @Gino

    That also means that I’m to blame for the excessive section usage :-). And I agree, the content (and some others, maybe) should have been (and will be after the next update) a div. I guess I got a bit carried away on my first html5 implementation…

    Which is exactly the situation I’m facing. On my third HTML5 project at the moment, and I’m slowly getting the hang of these new-fangled semantics. Only practice makes perfect, I guess.

  9. 9 Tom 27 Oct 2011

    Leuk om weer eens werk van je te zien :) het ziet er prachtig en heel erg “Veerle” uit! Heel veel leuke details ook op de website!

  10. 10 Heather 27 Oct 2011

    @Gino

    The shopping procedures at your store flows really well, which is why I was interested in the software.

    @Veerle

    Your graphics and colors make it both a fun and whimsical shopping experience.

    Congrats to you both!

  11. 11 Sizar 28 Oct 2011

    Thanks for sharing this. Couple of questions:
    - How do you present the first drafts to your client (like the doodles for example) do you print them or just show them on your computer?
    -Do you code the website or just focus on the design and you have a programmer who does that for you?

  12. 12 Sue Gomez 28 Oct 2011

    Veerle - your work on this site is absolutely beautiful, and inspiring. I think it fits your client’s products perfectly.

    I also really appreciate the writeup.

    Do you mind if I ask… what is the budget for a project of this scope?

  13. 13 dinesh 29 Oct 2011

    awesome as always!
    Bookmarked, just scanned for now will read later.

    Best

  14. 14 Chris Wright 31 Oct 2011

    Lovely stuff.
    What was the budget and how long did the complete process take?

  15. 15 Nora Reed 01 Nov 2011

    Brilliant work process, love the ideas used and created a very remarkable logo for Jolena. I appreciate your creative work behind it.

  16. 16 Ron 02 Nov 2011

    Great looking website. Thanks for sharing the process and insights. You always make beautiful things!

The Deck

Ads via The Deck