How Whimsical developed their brand identity

In January of this year, I had the exciting and somewhat intimidating opportunity to design the entire visual language of our new startup, Whimsical.

We were starting from scratch: We needed a logo, a color palette, a marketing site, app design. The list goes on.

What follows is the journey we took to find our unique look and style.

But first, let me give you some important context: Whimsical is a collaborative, visual workspace for creating flowcharts and wireframes. Our team is comprised of myself and my co-founder Kaspars, and we make up a completely new company that, at the time, had never been seen before. We are entirely bootstrapped, and make everything happen on our own.

Because of all these factors, we need to move fast. All the time. There’s a ton of work to be done—you know, small things, like launching a product and bringing in revenue.

So with no time to waste, here’s where we started.

Identity first

One of the most important things to determine as early as possible is the identity of your company: the traits and values that define who you are and set you apart. It’s what everything else is built on top of.

But where do you start?

It may sound strange, but we chose to write ourselves a questionnaire.

I’ve found questionnaires to be really useful in the past when doing branding or visual design projects (I first picked this up at Viget at the beginning of my career). Our questionnaire covers a broad range of questions about identity, brand personality, and the competitive landscape.

Though it felt a bit formal for just the two of us, a little structure can be helpful when you’re designing your own brand. We filled these out independently so that we could see both where we aligned and where we thought differently.

What emerged were a few attributes that we knew should be at the core of Whimsical. Above all, we wanted the brand to be fun, bold, and visual. There was also a strong sense that we wanted to be different. Once established, these ideals guided us through creating our visual language.

The logo: start with words

Words will help you here. Putting your thoughts into words on paper or a screen makes it simple to generate and identify a broad collection of ideas. Personally, I like to do this with a mind map, where I lay out a bunch of ideas at once.

Mind maps can also be helpful in making unexpected connections between ideas as they all mingle together on the page. You can reduce ideas down to their essential elements, or build them up into complex metaphors. I’ve found that I’ll often come back to these word explorations as I’m thinking through and sketching logo concepts.

After mind maps, I head straight over to the sketchbook. Since I’m still trying to generate as many ideas as possible, I keep things pretty loose and rough at this stage.

A few insights came out of the mind mapping and sketching:

1. Our product is inherently visual and contains a lot of geometry.
2. Diamonds in flowcharts represent decisions. They are a fork in the road where you choose your path. They’re also an interesting shape—basic, but a bit more unique.
3. Our product is centered around the early ideation phases of the creative process: the concept of an idea forming, then becoming more concrete.

While reviewing this work with Kaspars, we were both drawn to a double diamond shape. It hit on the main insights above, but was simple and graphical. It also formed an abstracted “W” shape with the bottom edges. We thought it warranted a closer look, so I started working with it digitally in black and white. I was interested in experimenting with the finer details: different stroke widths, scale, spacing, and the sharpness of the corners.

After landing on a symbol, I spent some time pulling together various type options for the wordmark. With fonts it can be easy to get lost in a sea of options, so I find it helpful to ground myself by returning to the core ideas. For us, it was our main brand adjectives: fun, bold, and visual.

Inspired by “fun” especially, I was able to rule out the safe choice of the clean and dependable sans-serif (something like the popular Circular). It’s always a tempting option but we wanted to be a bit different.

After considering many options, we found Din Round, which felt to us like the epitome of whimsical. There were a number of small details that contributed to this; it has soft and rounded terminals that give it a playful feel, while mirroring the curves in the symbol. The double-story “a” felt more mature, and the tail on the “l” gave it some additional personality at the end.

And so with that, we had our full logo in black and white.

Some youthful inspiration for color

Picking the primary brand color was a bit unconventional and not terribly scientific. I had been leaning toward purple; it felt different and fresh, and isn’t used by many companies in the collaboration or design tools space. It also works well with a lot of other colors, which is always a plus.

Around that same time, Kaspars brought up color; he said that he’d been thinking about our main color, and wondered if I had considered purple. The decision was made: we were going purple.

Even with the primary color decided, coming up with the full color palette was overwhelming. There are so many colors to pick from!

Secondary colors can help you stand out or fit in. They have to work well on their own, but also together as a group. They also need to maintain enough contrast with text. It’s not surprising that there are so many tools and websites to aid in the process.

Oddly enough, my inspiration came from children’s books. As we were going through this part of the design process, I was spending a lot of time reading books to my one-year-old. Children’s books are unexpectedly perfect for visual inspiration: they’re loaded with illustrations, color, and texture. They’re fun and creative, and diverse in their style.

One book in particular stood out to me: Giraffes Can’t Dance, illustrated by Guy Parker-Rees. I loved the illustrations and colors so much that it became a loose starting point for Whimsical’s color palette.

After a bit of tweaking and experimentation, we had an initial set of colors that felt like they’d cover most of our needs. From these, we created our extended color palette for use in the rest of the visual design.

Building out the rest of our visual style

With the color palette established, it was time to work on defining our visual style.

For this, I leaned on many of the themes we had already agreed upon. The product is very visual and geometric, and like I mentioned earlier, we knew we wanted it to feel bold, energetic, and fun: values that colors and patterns would play a big role in bringing forward.

When you’re looking for it, inspiration can come from anywhere. As I was picking up some sunglasses at the local Warby Parker store, I was inspired by their wall of geometric patterns. Then, while watching the Duke men’s basketball game (Go Duke!), I noticed the patterns and textures they were using in their motion graphics.

After browsing online, I had a collection of various geometric shapes, patterns, and color combinations being used in interesting ways.

I started by designing the background images to our social pages, which ended up being a great warm-up for developing the big-picture visual style. It’s nicely constrained, and of relatively low importance, but is still a common touchpoint for the brand and its users.

Following that, I began work on the initial marketing site designs, including the homepage and main product pages. When you’re launching, you know that pretty much everyone is seeing your brand for the very first time—presenting you with a great opportunity to be memorable.

I covered the page in vibrant blocks of color, sprinkling patterns and shapes around the edges, and loosely themed each of the products with a different primary color.

Finally, we inserted some of this visual language into our web app.

We tried to be thoughtful and pick our moments here, because the emphasis inside the app is not the app design itself. Since the focal point is really the work that’s being created, the interface recedes and gets out of the way; in a few select areas, however, we brought some vibrancy and boldness into the mix. The most notable of these is the celebration screen after someone upgrades.

A solid foundation for even more

Over the course of a few weeks, we covered quite a bit of ground and emerged with a visual language we’re genuinely excited about and proud of.

It’s a foundation that we’ve already expanded upon, and one that will continue to evolve as we grow. In fact, it’s just about time to start designing the new landing page for Sticky Notes, which will launch this fall.

Now if you’ll excuse me, I need to get started.