Expanding Clubhouse’s Illustration Style ✨

It’s easy to create an icon style, but how do you go about pushing it to its limits? How do you create a style that is consistent and scalable across all aspects of a brand identity.

Design at Shortcut
Published in
7 min readMay 28, 2019

--

A little over 3 months ago I started a new role as a Senior Visual Designer for Clubhouse.io. Clubhouse is ‘A fast, lightweight and powerful approach to project planning and product creation.’ The way I was sold the product was that if you think of Photoshop being Jira, then Clubhouse is Sketch or Figma. It’s basically a more focused, lightweight project management tool that caters directly for product teams who love to move fast. That instantly attracted me to the position as I hate Jira. I know hate is a very strong word, but as a designer I have always shied away from Jira. To be honest, it’s always scared me, and I never really needed it other than to drop in images and then run away with my arms flailing in the air.

There were many reasons why I moved to Clubhouse. It’s a remote role with HQ being in Manhattan 🇺🇸, the product itself (everything just clicked when I dug a little deeper) 🖥, but the main reason was that they had just finished going through an extremely successful rebrand with Ueno 🌈. I’ve always loved Uenos work and I was already very aware of the Clubhouse rebrand through their shots on Dribbble, so when I saw a visual designer role open at Clubhouse, I felt I had no choice but to apply to get my chance to take control of the beautiful rebrand that they had created.

Ok, enough of the intro, I’m going to use this article to breakdown how I went about taking a pretty simple, minimal icon set that Ueno had created as part of the recent rebrand and explain how we got to a fully fledged working illustration style. I have to call out now, that I’m obviously only in the role a few months, and things are still evolving, but I’ll go through the areas I focused on to create a more sustainable, adaptive style that will help enhance and solidify our brand identity.

Some of the killer work Ueno created in our rebrand

The Review Period.

From the get go, the team were very aware that Ueno had only created a pretty simple icon style in the rebrand. Saying that, I loved the direction, but it was very obvious it needed to be expanded on to make it more functional.

Some of the icons that Ueno created in the recent rebrand project

We, as a creative team, have huge plans, so we set out exploring the areas where we felt needed our attention.

1. Spot Iconography
2. Scene Illustrations
3. The Human Factor
4. Mascot Design
5. Blog Illustrations

Each category will feed into various different areas of the company, from the Marketing Site to the Blog to our Swag Store

The Overall Style

Luckily there was already a tonne of work done by the team before I started outlining our brand values and core principles so I was able to hit the ground running. It was clear that the style needed to be fun, colourful, and focused. We needed our illustration style to inject personality and joy across every touch point. My goal is to create a style that, over time, people will say to themselves, ‘Oh thats a Clubhouse illustration’. Not an easy thing to achieve in such a cluttered market, but it’s always good to aim for something.

I’ll outline the different areas we focused on and how we’ve made a start on the direction:

Spot Iconography

So, Ueno had already nailed this, albeit only scratched the surface with a simple set of basic iconography, so we wanted to push it further and expand the library of assets available. The key was to start building up a collection of similar icons to allow our wider team to grab them on the go and inject some personality and brand identity into presentations and various other areas when needed as well as creating a white version so the icon would work on darker backgrounds.

Spot Iconography — a small detailed icon used to help add life to paragraphs of text: https://dribbble.com/shots/6005234-I-m-joining-Clubhouse

Scene Illustrations

What would a more pumped up illustration look like? Something that could hold its own to help explain and project the product. The style needed to be an evolution of the spot icon set, working with similar traits, the same stroke weight, the same use of our colour palette. Basically like a spot icon on steroids.

Scene illustration based on a more detailed spot icon: https://dribbble.com/shots/6021393-Clubhouse-Notepad

We plan to use the scene illustrations across touch points of the company. Within the product on empty states and onboarding etc, through to on the marketing site to new features. These illustrations should be used to easily inject colour, personality and joy into our branding.

Scene illustrations — used to help educate the user as well as add a burst of colour and joy to our brand: https://dribbble.com/shots/6463345-Icon-Set

The Human Factor

What do humans look like in our illustration style? Are they fun, corporate, abstract? A visual style needed to be locked down to allow us to add a human touch. Our product is used by humans, so obviously we need to use illustrations of humans at some point.

Our Clubhouse human style for our Clubhouse Community: https://dribbble.com/shots/6362078-Our-Community

The question is, how would they sit in our illustration style? I took into account our brand values. Young, carefree, happy folk were the way forward. Obviously, it’s still early days, so these characters will evolve as our brand becomes more established, but you have to start somewhere!

Mascot Design

This is an area that is new to me. I’ve created various characters before, but creating a character that would be integrated into our brand identity, a character that would somewhat become a face for our brand was something different. The more I thought about it though, this was the main area where we could really start having some fun. It wasn’t to be an integral part of the branding, but we want it to be used sporadically across our marketing and swag store, so it needed to be solid.

The original Dot that was created by Ueno.

Ueno had helped create a simple mascot, the problem being it was not very scaleable. He was too flat and didnt have enough detail to start using him across different scenarios. We needed to evolve our mascot, Dot. More detail such as legs and arms were added to allow us to place him in various situations.

Dot is starting to live a pretty exciting life! https://dribbble.com/shots/6445778-Introducing-Dot

So far Dot has taken the form of an astronaut, a ninja, a rockstar, used across posters, stress balls and t-shirts. And don’t worry, we‘ve plenty more ideas for our spherical little buddy.

Space Dot, used as our 404 page

One thing we need to assess is how exactly to utilise Dot across our material. It can’t be too integral, but we want to be able to use Dot to inject some fun and personality into certain situations. We’re currently in the process of setting up a swag store that will allow us to pump out stickers, posters and various other material to bring Dot to life.

Blog Illustrations

How would our blog illustrations sit with our product illustrations? It was a slightly different medium so I felt we could push this area in a totally different way. I wanted to give this area a lot more creative freedom. Obviously it needs to sync with the rest of our branding, but I felt this was an opportunity to loosen the reigns and push a more artistic direction. No specific direction was set down, the only rule being to use our brand colours. For this creative process, I chose to use Procreate to create more hand drawn illustrations, to give us more of a personal direction. Again, I’d like to think the style may settle in a specific direction as I become more familiar with, but for now I feel it;s about creating some funky art that will go alongside our blog content. Go check our Clubhouse Blog to see them in action 🙌

You can see a full collection of the blog illustrations here: https://www.behance.net/gallery/79089777/Clubhouse-Blog-Illustrations

The Wrap Up

Obviously I’ve only been working on this direction for a few months now so doubt it will evolve over time. It’s important to ensure that we have a solid foundation in place to allow the different areas to expand. Make sure to keep an eye out as we expand our style as we have some really great things coming up from both a marketing and product perspective.

You can keep an eye out on our Dribbble page or go straight to our site to learn more about Clubhouse!

Feel free to pick my brain (or whats left of it) over at:

// Twitter // Dribbble // Behance // Portfolio site //

--

--