BugHerd

/

Blog

/

Custom Illustration and The Art of BugHerd

Custom Illustration and The Art of BugHerd

Sher Rill Ng is the artist behind our visual brand. Find out how her illustrations & processes have evolved over the years & the impact on BugHerd...

Chanie Hyde

|

July 1, 2020

Follow

How illustration has helped to evolve a visual brand and make this SaaS product stand out.  

Custom illustration for SaaS products is neither a new design trend nor a unique one. This is by no means a judgemental statement, as the BugHerd brand is almost exclusively illustrative and has been for more than half a decade.

It is very easy to see why illustration is so widely used in SaaS.

Custom illustration allows brands to add visual personality without using common stock imagery and easily includes their colours, fonts and style. An illustration can be quicker and cheaper to create than arranging lifestyle image shots of humans, yet can still achieve the human element through brand avatars and characters.  It can be used to show off the complexity of a product without detail that would need an update with each feature change.

There are many great custom illustration libraries to sift through online. We prefer to work with an in-house designer, artist and illustrator to ensure that our imagery is always fresh and that our visual brand is definitely one of a kind.

Sher Rill Ng is the artist behind our visual brand. Find out how her illustrations and processes have evolved over the years and how that has impacted BugHerd…

Do you need an Illustrator, a Designer or an Artist?

Illustration as a skill was an added bonus that Sher Rill possessed when she was hired to work with BugHerd as a web designer more than 5 years ago. Being a jack of all design trades is definitely a plus when working with a small, agile team, where many employees find themselves working on tasks outside of their job description (and perhaps comfort zones).

“My role has always been flexible, even though I originally specialised in UI design. If the team needed UX design, I could do that. If they needed a video edited, I could do that. Every skill I had picked up at University came in handy,” Sher Rill reflected.

Interestingly, design work that takes up the majority of Sher Rill’s time with BugHerd is no longer on the product but is on the marketing, website and communication assets, which are almost entirely illustrative.

How illustrations can enhance a SaaS product.

It’s important that your visual brand is easily distinguishable from the competitive landscape.

BugHerd doesn’t look like other products, even in the cluttered environment filled with custom illustrations in SaaS. The BugHerd illustrations lend a depth of character to the product that brings customers along each step of the product journey. This is what we aim to achieve with each design concept.

Custom Illustrations in SaaS products
A peek into the visual state of the SaaS landscape in 2020

“If my illustrations are making BugHerd memorable, then I can confidently say I did my job right”

– Sher Rill, Designer and Illustrator for BugHerd.
BugHerd Custom Illustration
How custom illustration makes BugHerd unique

How the BugHerd brand illustrations have evolved.

Much of the core BugHerd visual brand from early 2014 actually still exists today. The colour palette and logo for example. However, the brand illustration has evolved significantly since then.

Screenshot of old websiteScreenshot of edited old website
Same, same but different.

The illustrative artwork has evolved as Sher Rill’s own proficiency in creating them has. Which is a rather unique and special journey which Sher Rill explains as “In the beginning, a lot of the illustrations were restricted by my own limited skill. The monochrome colour palette (example below) meant I didn’t have to use colours, the line/inking meant I didn’t have to do any shading. Both of which I was not confident in. Use what you’ve got, I suppose.”

BugHerd Custom Illustration
2015 BugHerd

“I was given a lot of freedom to define the illustration style from there. Colours, shading and all. I spent hours and hours working on designs (example below). Most of it was experimental, just to see if I could draw scenes I’ve been wanting to try. How I got away with doing that, I’ll never know. And in the space of a year and half, BugHerd’s art changed quite drastically.”

BugHerd Custom Illustration
2016 BugHerd

If you jump to 2020, there have been further refinements. “The three characters I had created for BugHerd needed an upgrade (more diversity, more relevant to our customers), and I felt that I could develop a style that could help refine the brand a little more,” Sher Rill said.

BugHerd Custom Illustration
2020 BugHerd

The only way a visual brand evolution like this can occur is within a workplace that encourages individual growth and fosters trust. It would be near impossible to nurture this kind of trust with a freelance artist or an agency and certainly wouldn’t be available in an illustration library.

“For me personally, I very much doubt I would have been able to work and learn as freely as I have if I wasn’t part of the BugHerd team,” said Sher Rill.

The process of creating SaaS custom illustrations.

The process that has been fostered at BugHerd almost always starts with a very loose design brief. It may be a request via Slack, a BugHerd ticket or a Trello card, but most of the time it’s a verbal request. Really simple, probably flawed, and definitely something that can only work with internal team members.

Here is Sher Rill’s creative process in her own words…

Step 1: Inspiration

Most of the time the personality of our team affects the illustrations. Especially if it’s a blog written by them. If I’m stuck for ideas I’ll look around the office and pick a scene. I also head to Pinterest where I have a board that I refer back to. This is useful if I ever feel like the artwork is moving in a direction it’s not supposed to.

BugHerd Pinterest board

Step 2: Thumbnails and reference images

I’ll then draw thumbnails and find some reference images. I try not to settle for my first idea, and I always do a google image search to see what generic images have been used and then avoid that as best I can. Personally, I find research to be the hardest part. But once the idea is set, the process is a lot smoother.

inspiration for BugHerd custom illustrations
Time lapse of creating a custom illustration
Time lapse of creating a custom illustration

Step 3: Image refinement

From here it’s refining the images, and making sure it doesn’t deviate from the existing BugHerd style. My ‘workspace’ always looks like this [example] because I am constantly referencing images for colour, and composition.

Bugherd Custom Illustration process

Step 4: Final

Most digital artwork will have a lot of layers and in BugHerd’s case, it’s for easy editing. More often than not the artwork is to be reused on different platforms, or displayed at different sizes. It could be a blog header, a square within an email or the tile for a display ad. Most designs will need to be shuffled around to fit various dimensions.

Photoshop interface showing the many layers used

“The illustration process comes to an anticlimactic end in which I need to optimise the artwork for it to be web-friendly. AKA… quite small,” Sher Rill lamented.

The artist’s favourite custom illustration.

Every artist has plenty of older pieces they probably cringe at, and almost certainly have their favoured ones. Sher Rill has created hundreds of images, so we wanted to know which one she personally loves the most…

“My favourite piece so far is probably was created for a blog post about customer support. I was experimenting with a warmer colour palette than I’m used to, and I’m pretty happy with how it turned out.

I usually only like my own pieces when I think I’ve managed to make a technical achievement. But in this case, I also like the subtlety in the characters’ poses, who are giving our little retro computer (who we’ve dubbed MAX), some moral support.

It was also the piece where I started to feel like the style was becoming my own as opposed to emulating someone else’s.”

customer support
Sher Rill Ng’s favourite Custom Illustration for BugHerd

Recent articles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

Text link

Bold text

Emphasis

Superscript

Subscript

Want more resources like these? Subscribe to the BugHerd Blog 📥

✅ Subscribed!
😕 Oops! Something went wrong while submitting the form.