Crafting an Illustration System

July 5, 2019
Ashlee Mckay.

Zibbet Marketplace began as a community for craft enthusiasts to buy and sell handmade goods online. After 10 years, Zibbet pivoted their direction towards helping handmade sellers sell on multiple channels with an inventory management software application. Online creative sellers (myself included!) need as many eyes as possible on our products in order to make sales. But having shops on various marketplaces and channels is a real headache – so much so, that a lot of sellers stop selling on multiple channels after they realise how hard it is to manage. I’m talking about managing sales, returns, quantities, inventory, accounting, shipping costs, taxes the list goes on. The new Zibbet inventory management system will help creatives streamline their online shops – anyone can now manage everything from one place. Creatives can get back time to do the important things like expanding their product line and marketing their brand.

Let me take you through my journey of how I crafted the visual voice and branding for Zibbbet's new product, and give you a little sneak peak on how it all went down.


References & Research

Style References

To kick off the project, I compiled some of the illustration styles that spoke to us as a team. From there, I created a moodboard on all the elements that inspired us. We wanted the illustration voice to be warm, creative and bright – but also polished and uniquely Zibbet. I really gravitated towards the "larger than life" aesthetic where elements of the illustration were out of proportion to our everyday life. As you can see from above, this concept really inspired us – but at the same time – I really wanted to put our own spin on it.

I started the exploration phase by focusing on the hero illustration for the marketing site. Once the team was happy with the initial concept sketch, illustration style and colour palette – it was time to vectorise it setting the tone for the illustrations to follow.

The illustration system for just the marketing site alone has over 20 illustrations. This includes illustrative banners, smaller supportive illustrations, micro illustrations and icons. Along with the marketing site, we were also working on designing the user interface for the inventory management app which had countless more illustrations. I had to consider constraints around our product and guidelines. I had to be conscious of the space allocated to each illustration and quickly convey a story and message with visuals and supporting copy. I designed these illustrations to be Zibbet’s secret weapon to help attract users, convey a message and guide them along their journey.

I was Zibbet's first in-house hire so the illustration team was just me! Lucky for me, my husband is also a designer and illustrator who allowed me to bounce ideas off him and told me straight up when my work sucked. Being new to illustrations at the time was such an experience. I went from having a little experience in illustrations to designing a full illustrative voice and brand system.

On top of leading the Illustration and branding for this project, I still worked on a lot of the product design. As a designer, I felt pulled between the two and I had to be super conscious of giving both projects the proper focus and care needed to succeed. I learned so many valuable lessons along the way. For me, I love illustrations but I also love product design so I have to find a way to balance the two and keep learning and growing as a designer.

Whitespace is like air: it is necessary for design to breathe
Wojciech Zieliński

Just like air! White space has become my best friend when designing. Sometimes I would need to start illustrations without a finalised interface layout – it means really thinking about the space for this illustration without the finished design in place. There’s no right or wrong way to start things when working on an agile design team. There wasn’t always a clear outline or guideline to go off – sometimes it was just a vision in my head of the finished result. I didn't have a lot of time to second guess my work when I started mapping out and conceptualising the illustrations across the marketing site and inventory management platform. Pages would be finished and a card would appear in Asana with loosely defined specs and descriptions that I’d start piecing together. In the end, the approach meant that I got to really exercise my creativity and design strategy.

My design methodology for the project was to treat illustrations like an advisor: they’re there to be a helping hand, designed to aid in a user’s decision making process and to try to understand how our user is feeling at all steps of the journey. The illustrations were also there to establish Zibbet’s overall aesthetic feel, as well as provide a visual blueprint that grows with Zibbet as it changes and develops.


Meet Dottie & Sunny!

Strengthening the brand

The use of our illustration style across the new products at Zibbet helps direct the brand. We wanted to connect with our creative entrepreneur user-base by using characters that dial up the craftiness. Our main character is Dottie who is a pottery expert who loves to show off her cactus collection by creating one-of-a-kind pots to house them in. She’s opened up a shop on Etsy and Zibbet Marketplace, and to her surprise, her pots are selling like hot cakes – especially in Arizona! She has a business sidekick named Sunny who’s a bright yellow Australian bulldog. Both characters are used to evoke our users’ imagination and to visually support an action we want the user to focus on.

Generally speaking, I’ve found that not all users read platform copy and tend to skim over the words instead. In fact, I’m this person 90% of the time! It’s why I think supportive illustrations are so valuable to a brand. Take a look at the image below – even if you glance at it for a second, most people notice it right away. Dottie is a bit confused or puzzled so hopefully you’ve already put it together in your head before reading the small print.

Illustrations that support the copy

Were to start

Before I finalise my illustrations, I would start the concept planning phase. Sometimes this meant doing some UI design first I could begin the illustrations, and other times it was simply designing illustrations for an interface that was ready. No two days were really alike and the process was anything but conventional.

I usually turn to my trusty iPad or a piece of paper to sketch out rough illustrations with concepts. Sometimes coming up with the concept takes me longer than the actual illustration, especially because I’m collating ideas from the CEO, lead designer, lead marketer and my own head. I believe that being unique but not confusing your audience is really important – there is a time and place for humour or quirkiness, but the bottom line, visuals should be a tool to support the action we want the user to take, and to aid in the overall design.

The goal for this phase is to wrap up the many illustrations for the marketing site and start diving into the inventory management platform design.

Register Illustration

Our Mascot

Illustrations are amazing tools – they add clarity to complex ideas. In my opinion, they can be more powerful than stock photography at conveying a message or telling a story. I’ve showcased our registration page for the inventory management application above. I've pulled Dottie out a bit from the UI to show her off a bit more, but in reality, she sits nicely beside the form elements, patiently waiting for you to fill out your information and sign up to our platform.

The use of a fictional brand mascot in product design is a popular marketing strategy to personify the brand. A strong mascot like Dottie and my other characters represent an everyday user is symbolic to the brand. They are all super handy in communicating on a personal level, breathing life and creativity into the product, while working simultaneously between the interface and user. This idea stayed in the forefront of my mind throughout the design process. In the end, I designed these characters to enhance the overall experience but not distract them.

Various Illustrations from the system

Designing for the grid

Building on Zibbet's visual illustration system, I also had to think about how these illustrations would transition from the big screens down to the littlest of mobile screens. Smaller screens tend to be stackable or vertical so I had to think of ways that would help the design shrink down from desktop to mobile.

Mobile Optimize

When designing for mobile, my approach is to keep things as simple as possible. After doing plenty of design explorations and illustration iterations I’ve learned that you need to think about edge cases and constraints that these illustrations will eventually sit within – it's like finding the missing pieces to a puzzle. I also make it a goal when designing to keep things balanced by allowing the illustrations to breathe within the overall design while keeping in mind that it should house neatly within the interface. This adds a unique balance and strengthens the overall design.

Illustrative UI components

It’s all in the details – small communication tools

These are just a few of the Illustrative UI components I designed – all of these are valuable in explaining narratives and the concepts behind the features that Zibbet’s inventory management platform offers. One thing to keep in mind when designing an Illustration system is to think about all the size constraints within the interface. These little guys are great because they can be sized down quite small and are all monotone in appearance – they blend in with the interface when necessary. When designing micro icons like the ones above in Illustrator, I like to place in the design so I can visualize how these will look on the finished design. It saves me time testing it later only to find that I have to resize them various times in order for the ratios and sizes to work correctly.

Product Icons

Custom icons

While designing the Illustration system we decided we wanted to also design our own custom icons so those too where added to the list. Custom icons are often over looked, but creating a unique user experience was one of our goals for this project so we worked to find the time to add these in. These Icons helped us communicate a stronger message with our users because instead of looking for something that would "work" and adding it to our designs I actually had the chance to design exactly what we wanted our users to think of helping to point them in the right direction and strengthening our brands voice. These icons might not look too different from other icons you've seen but they do have slight differences that work for our brand like the rounded edges , and the flexibility that these can grow with the product and will always match each-other.

If you would like to check out more of the illustrations from this project please check it out at www.zibbet.com

No items found.

Interested in working together?

Let's chat.

get in touch