A picture paints a thousand words

We’ve been talking a lot recently about our visual identity and how we’re applying it to our designs. Over the last 18 months, we’ve changed our approach at least 3 times. This has been the result of going through a complete company rebrand and the resulting effort of applying these changes.

Previously, Pusher hadn’t had anyone dedicated to this, either out of necessity or due to a lack of time or resources. As we’re scaling, we’re now in a position to bring visual communication front of mind and align all of our efforts in a much more unified way.

These views had been widely held in our team, but hadn’t been documented; it became obvious when onboarding a new hire that we needed to better communicate our process.

Painting

When you start a new piece of work, how do you go about determining the message and the feeling you want your users to be left with when experiencing your product?

Anything a user experiences on your site will be communicating something—what users see, hear, and feel can drastically change their perception of your brand and your product.

So how do we make sure we’re doing our best to communicate the right thing at the right time?

In a post by Stewart Scott-Curran, he talks about thinking in terms of a sliding scale:

“It’s useful to think about your visual identity on a sliding scale that you can dial up or down depending on what you’re producing.”

For us, that means deciding where we sit on a scale from serious to playful for a given project. We’ve taken this a little further and started articulating our visual identity across three possible points on a scale. Level one is articulated as more serious and less playful; level two as a balance between the two, and level three as more playful.

So starting with level one—our core message—what impression do we want our customers to be left with, and how do we articulate this on our sliding scale?

Start with the customer—what is their primary objective when visiting our site? We articulated it using job stories, starting with the below:

When I visit Pusher.com, I want to feel as though the products are suitable for creating professional, scalable, and reliable applications, so that I’m confident it will provide value to my customers faster than if I were to build it myself.

*yes this is only one JTDB, to keep the post readable 😉

We created a list of words that came to mind when thinking of the above:

• Hosted
• Ambitious
• Delightful
• Reliable
• Premium
• Scalable
• Secure
• Simple
• “Just works”
• Fast

This helped shape our thinking about our constraints/position on a sliding scale for “level one”:

• More geometric than organic
• More contemporary than retro
• More serious than playful
• More realistic than abstract
• More calm than energetic
• More simple than detailed
• More bold than subtle
• More obvious than clever

None of these are absolute; as they exist on a sliding scale they can be explored throughout the work, whilst ensuring that the above statements stay broadly true.

Critiquing the painting

By articulating our visual treatment like this, it has helped us have more fruitful discussions. No longer are we debating every piece of work in its broadest sense; we have some constraints that help us align our visual communication in a way that we’ve not done before.

This has lead to faster turnaround times and greater consistency in our visual design, interface design, and animations. Too often we discuss these things, but rarely document them, or share and refine them. Doing so enables much greater collaboration, shared understanding and alignment. Like most companies in a similar position we have more work than people available to do the work, so less time re-debating and more time executing is a good thing in my book.

Full disclosure: we still need to articulate our other levels, and will do so when we have work that doesn’t require “level one” type treatment. But as an example: non-transactional marketing emails and newsletters are probably much closer to levels 2 & 3 (more playful than serious) than a level one.

A picture really can paint a thousand words—and because it can, we should be as rigorous with our “pictures” as we are with our words.

Feedback

How do you think about your visual communication? Have you ever thought about it? If you do—or don’t—I am really interested in hearing about your experiences or processes.