Thumbtack’s Illustration Refresh
A Q&A interview with Illustrator Krystal Lauk on Thumbtack’s fresh new illustration style…
Krystal Lauk is a San Francisco Bay Area based Illustrator who’s done illustration branding for several high profile companies: Facebook, Uber, Google, Intercom, and The New York Times. She’s been recognized by American Illustration, the Society of Illustrators, and 3×3 magazine.
Her illustration style is modern, colorful, and naturally conceptual. I’m using naturally conceptual to describe that, while her work always has the brand story in mind, the concepts are never contrived and seem to evolve naturally. Let’s take a look at Krystal’s process behind the recent Thumbtack rebrand…
How did the Thumbtack illustration rebrand come about?
Thumbtack was really learning about what defined them as a company, and what they really needed out of an illustration style. The original style was created by Ryan Putnam, an absolute heavy weight in the tech illustration industry that I admire, so when Thumbtack approached me I didn’t take the job lightly! The original style was charming, but it was too literal to scale across the platform in a way that Thumbtack needed. So I went in there with a mission to really create a versatile style that’s scalable, clearly communicates in an engaging way, and reflects company values.
How did the process unfold from start to finish?
We started with about a month long design (or illustration sprint as I like to call it) where I was onsite at Thumbtack most of the week, working closely with the brand marketing team to understand who the people are on their platform, and their mission and brand values. One thing that I gleaned from a friend of mine, Michael Jeter, who’s an Associate Creative Director at Dropbox Brand Studio, is to imagine building an illustration style like building a world, where the elements operate like an ecosystem. I really took this to heart when experimenting with different concepts. This way we could ensure a really consistent language across everything we want to communicate.
Once I landed on two strong concepts, I stress tested them on existing screens and different layouts to make sure the two directions were versatile. The two concepts to come out of the door were “Magic of the Match,” which was all about the unique qualities and abilities of pros (the people who find work) and customers, and “Larger than Life”. This one was all about building things larger than oneself, and overcoming obstacles. I pitched the two directions to the team and stakeholders, and in the end, we really loved “Larger than Life.” The structures reminded us of cairns- ancient sculptures that seem impossibly balanced. This felt like a beautiful metaphor for how projects are like- having to balance lots of tasks, but in the end, the result is something larger than oneself. This felt like a really empathetic way to resonate with the people who use Thumbtack.
How did the illustration style span across the platform and how did you get to that point?
So to give you a good example- when we decided to go forward with the “Larger than Life” direction, I created a couple test samples of how the style would look like as icons, or small spots. I had a general idea going into it, but there were still a lot of unknowns. The first icon style was a cluster of one main object, with a couple other shapes. This really felt like part of the family when compared to the larger hero illustrations. The only problem is, some instances called for more complex, single object imagery, like our rocket ship here! But because we had set rules around having a collage like, construction paper style, we were able to break up parts of those subjects to create that cluster effect. So because of that, our “cluster” icons and single object icons can live together as one!
There are definitely some concepts that are tough nuts to crack, but challenging yourself to think metaphorically with a more abstract style like this is key. For example, creating an illustration for “It’s Free” promotion was a tough nut to crack- how do you show the absence of something? But having the dollar sign “trapped” inside a shape, with the two characters able to meet with zero friction was the ticket.
How long did you stay in the lo fidelity mode, or do you immediately go into hi fidelity?
I always start with sketch thumbnails first, and make sure that visual is effectively communicating what it needs to first before starting final color.
Who were your main collaborators and what was their involvement?
The brand marketing team at Thumbtack is incredible, and this project was such a success because of their support and enthusiasm. I worked closely with Andrew Johnson, the Creative Director who provided really great feedback and ideas along the way.
How did you come up with and establish the overall color palette?
It was a surprising result, since the illustration color palette ended up being different to the core brand palette. We opted for softer, more pastel colors to create a more approachable feeling, and it was a nice contrast to the hyper-geometric style.
It looks like you used irregular shapes in a rather purposeful way. How did that come about?
Yes! Composition played a key role in making sure the structures feel balanced precariously, but looked stable at the same time. So in illustrating these, I had to keep in mind what shapes would work best, and how they played into the meaning of the illustration.
I noticed some interesting use of overlap and subtle overlays…
I really wanted to communicate that a lot of what the Pros do on the Thumbtack platform is handmade, and I wanted to extend that quality into the illustrations. The overlay reminded me of colored transparent paper laid on each other, and we fell in love with it!
What were the considerations you and the team at Thumbtack had to make in terms of accommodating multiple platforms and devices?
I collaborated with Jon Kerwin, a product designer at Thumbtack in building the brand style guidelines in Figma. Every illustration has a robust search and size description that a product designer can easily pull into their comps.Thumbtack has this amazing tool called the “image service.” Each illustration gets a unique ID, and the image service automatically serves the correct image size in multiple file types on any platform. Pretty cool.
Were there any particular challenges you faced in the Thumbtack project? If so, how were you able to solve them?
We initially had some trouble with scale—we wanted the people to be small compared to the structures to communicate the idea of overcoming obstacles, and taking on big things. But some stylistic choices in the small scale made the characters feel minion-like. We wanted the characters to feel empowered, confident, and diverse! So I’m super mindful about making sure each character has a personal style, and strong, action oriented poses.
When do you feel illustration might be a better solution for an online brand over something like photography?
I like to view photography as a great companion to illustration, and in some cases one works better than the other. Illustrations work great when you have to communicate something in a small space, like an onboarding flow inside an app. Illustration can communicate in very abstract and metaphorical ways that can help people understand complex concepts, or dry subject matter. Illustration is really a limitless tool in that way.
What things should companies consider when hiring an illustrator?
Traditionally, illustration is viewed as an image that can help tell one story- like one in a children’s book, or article. But when illustration expands as a system, it can tell multiple stories with an overarching message or value, and serve as the connecting tissue to all the major tenants of a brand, product, or marketing campaign. Storytelling and illustration has been at the heart of civilization since the beginning of time because it’s how we can connect with each other. The same is even more relevant in this day and age where so much communication happens in a 5x7” space!
It’s always wonderful to get a glimpse into the process behind an illustration rebrand effort, and I’d like to personally thank Krystal Lauk for sharing her process and so kindly answering all of my nerdy illustration questions 😀
Visit Krystal Lauk’s website to view more of her work.
Rob Levin is a freelance illustrator. Portfolio: https://roblevin.myportfolio.com/ For illustration work enquiries, collaboration, or to say hi: email@example.com.
Also, you may like to read more of the illustration teardowns articles.