We've Got Style – The Purpose of Illustrations at Yieldr

Why Is It so Important to Give Yieldr an Illustration Style?

One of Yieldr’s core values is that the user leads. And the purpose of using more illustrations is to help tell a story, capture the user’s attention and appeal to their needs.

Illustrations make visuals more friendly and interesting. When they are combined with other UI elements, they help guide the user and make the experience more fun.

Illustrations also make it easy to understand how a product works and why it might be beneficial. A single drawing can clarify what is intended to serve and the role of illustration became important in both marketing and product design.

Why Illustrations?

In a lot of ways, illustrations can have more personality than photos. When compared to photography, it’s easier to remove race, gender or nationality so that users can imagine themselves in a specific role presented by an illustration.

For example, take a homepage hero illustration that shows human characters interacting with abstract UI concepts in a friendly way. It's a better alternative to unnecessary and boring stock photos.

Illustrations can be a powerful medium to support business goals at key moments with users. For example, illustrations can be used to persuade a customer to subscribe to a service or finish purchasing items.

The Before

I joined the company as a graphic designer in 2014, right after the company’s first rebranding and name change – Yieldr was formerly known as YD. This meant that I got to start with a fresh new logo, new website and new visual assets. All the icons, visuals, style and colors were already defined.

When talking about illustrations and web design at that time, a term that immediately comes to mind is the trendy "flat style". A bunch of illustrations were already being used for the website, and so we kept using this style and color palette for a while until the next rebranding.

In 2016, another rebranding took place with a new logo and a brighter and way more reduced color palette.

With this refreshing change, it was time to change the illustration style and introduce new outline illustrations. These visuals were simple and geometric, and we combined it with a defined color palette.

The Evolving Illustration Style

Yieldr's Design Studio team started the discussion after we got our meeting room’s mural painted by Wallnuts Murals in 2017.

We loved the fresh style of it. Robin, our Head of Design at the time, started questioning – why not have our own illustration style? Something authentic that doesn’t look like any other website templates with the same visual assets.

We had the talent in-house and we just wanted to put together the conditions to make it work. So Robin trusted me to take the leap and invest on my illustration skills. I felt honoured, motivated and excited to start trying it out.

The main purpose with this change was to make it more human and more FUN!

After a long discussion on this topic, we decided to not limit ourselves at the start of the project. Even with the mural as our main inspiration, we also made mood boards on Wake. We spent time studying a lot of images and looking at other illustrators’ work, works of art, magazines and real life.

The illustrations needed to feel consistent – as if they came from the same source, the same company, the same brand, the same voice. It needed to literally look like they were illustrated by the same person.

By this time, hand-drawn graphics had became more popular in the visual design space. It became seen as a way to stay authentic, with more and more brands starting to follow this trend. We were no exception – hand-drawn doodle illustrations were the goal for next level of Yieldr.

Our approach was to use black and white illustrations, with just a few color details to keep it simple. This style could make our website design feel more artistic and fun.

The evolving illustration style of Yieldr

The Execution

We already knew what we wanted. The next step was to make it happen.

We decided to work with vector files for faster editing and easier resizing without any pixelation problems. The best reason? File sizes are smaller and easier to use it online.

After a field trip to a Apple Store to check out the features of the new iPad Pro and the new Apple pencil, we decided that we might have found the perfect tool to put our plan in progress. With Adobe Creative Cloud, it was just a matter of linking the mobile apps on the iPad (Adobe Sketch and Adobe Draw) to the desktop apps (Adobe Illustrator and Adobe Photoshop) and make the magic happen!

We started using illustrations mainly for marketing, in content such as infographics, hero images, animations for our website and company swag. But we also decided to use illustrations for product purposes, such as empty states in the Yieldr Air platform like "Create Your First Segment" and "No Results".

We slowly started trying out the new style, producing all kinds of illustrations and getting feedback on it.

Types of Illustrations

It's important to distinguish between the illustrations and icons, as well as the different types of illustrations we need to consider when updating our style.

Illustrations vs. Icons

It’s a common mistake to confuse icons and illustrations. But while illustrations use metaphors and narrative, icons are much simpler and specific. Icons are normally are much more literal and designed with the use of a geometric grid. Their intention is to clarify an idea.

Hero Illustrations

Hero images are a powerful way to communicate a topic and make the product stand out. These illustrations can be more metaphorical and tell stories that are a bit more complex. They’re normally used as images above the fold and are very popular in website design.

Spot Illustrations

Spot illustrations are simple – they’re normally small and more literal. They’re usually used for empty states in products.

Animations

Animations attract attention and make illustrations more fun. Motion strengthens the brand, makes navigation better, highlights feedback and makes the user experience much more enjoyable. We have the in-house talent of our motion designer Caio, so he has been able to make the Yieldr animations.

Positive Feedback

We started sharing our materials frequently on dribbble, an online community for showcasing user-made artwork. We got some nice and warm reactions that made us feel more comfortable with the decision of changing our style.

What’s Next?

We know why we need illustrations and we’ve created a consistent and recognizable style that works for us. We’re going to use our new illustration style across all branding and product mediums so that all visual communication reflects the true tone of Yieldr.

Rita Ferreira

Rita Ferreira