It was a sunny afternoon in September on the top floor of our hack space. The team had gathered to work face-to-face to design the new Clearleft.com. I proudly presented a set of Tone of Voice Principles. But then came the question “How shall we use those?” A good question.
What is our tone of voice?
Principle 1: Our clients are the heroes and heroines. We facilitate their journey.
Principle 2: Speak as an individual doing whatever it is you love. Expose lovable details.
Principle 3: Use the imperative, kill the “-ing”.
Principle 4: Be evocative and paint the picture. Show don’t tell.
Principle 5: Be a practical friend.
Principle 6: Be inquisitive. Ask smart questions that need solving.
How does tone of voice work with components and pattern design?
At Clearleft we create design systems, design components and often build pattern libraries to house them in. Simply put, this means we work with individually designed components which can be arranged and re-arranged into repeatable patterns. You can read more about this way of working here and here. If you'd like to see the components we're designing with at the moment, have a look at the pattern library for this site.
Now, more than ever before, your tone of voice, your visual brand and the way you design and build your components (including how they live in the CMS) all work like bonding agents that hold your entire story together.
Within every single component or pattern, the content and the visual design are inseparable. The process demands that the visual designer and the content designer fine tune every aspect of the component, for example: using typical language, words, numbers and typographical nuances.
When you place the components together into a page or a pattern, they need to form a greater story. The more fragmented a design process is, the harder it is for that story to hang together.
In the collaborative process between visual design and content design, you need to be aware of things like:
- Typical character length for headings (and how to cope with extreme cases)
- Other patterns that the language makes (e.g. Quotes, image captions, accreditations etc.)
- The capacity that the content team has to provide content (e.g. will it cost ££s and many hours to produce content or imagery for a field?)
- How an editor might fill in the content in the CMS (e.g. Does the summary space for an index card pull through the top of an article, or have a bespoke summary at a capped character length?)
- How your components contribute to and reflect the entire page story?(e.g does the story flow?)
As you may be able to deduce from the list above, having a visual designer, content designer and a developer in the same space is essential. If the team do their work and then 'throw it over the fence', it’s likely to reflect on your overall outcome. There’s always the risk of Frankenstein Design. Scary.
How do the tone of voice principles manifest in the site now?
Principle 1: Our clients are the heroes and heroines, we facilitate their journey.
As you can see, the imagery and the text are completely reliant on each other in this case. Based on one of our main personas, and the way we work at the moment, we felt this was a key message and something of an 'emotional' proposition statement.
Principle 2: Speak as an individual doing whatever it is you love. Expose lovable details.
This principle is our way of saying 'Show, don't tell'. It was also derived from our research into the things that set us apart as a company (which we call our differentiators). As a team, we're quite proud that we have such a high concentration of expertise in our midst. We wanted to bring out the details and give our prospective clients a strong sense of what it is like to work with us.
Principle 3: Use the imperative, kill the “-ing”.
We’ve always had an undeniable bold streak in our personality, but our previous brand language didn’t make the most of this. This principle injects ‘imperative’ statements into our tone of voice, for example “Feed your curiosity” in the footer. Each heading starts with an action-instruction, which hopefully also speaks directly to our prospective clients’ needs.
Principle 4: Be evocative and paint the picture. Show don’t tell.
The image above doesn’t appear on the site (spot the charming emoticon), but it was a draft sketch which evokes ‘how we work’ rather than telling our audience in words. We want to do more of this on our profile pages. For the moment, this principle has given rise to the direction we took with some of the photography you now see on the site.
Principle 5: Be a practical friend.
In the past, we’ve had a tendency to ‘over-quirk’ our language. That’s ok. But we need to make sure we stay practical as well as friendly and not isolate people in the process. The site needs to offer an equal balance of pragmatism and being personable.
Principle 6: Be inquisitive. Ask smart questions that need solving.
Our clients often report that they like the way we ask searching questions and dig into the strategy. We wanted to bring this out in the site and make sure prospective clients get a flavour of the way we work from our case studies.
How did we get to those principles?
In the discovery phase of the project, I carried out some detective work to gather the raw materials I needed. This meant a deep dive into the strategy of the company, as well as a surface-level assessment of the language we were already using. I also worked to identify opportunities for ways that we could differentiate from our competitors’ language.
These are some of the activities I carried out to help me make informed decisions about our language and tone:
Harvesting language and phrases that people use in meetings, particularly about strategy.
Harvesting the language and phrases that our clients use (particularly in pitches and retrospectives).
Tracking down our origin story by taking walks with each of the founders.
Wrestling with our sense of purpose and vision as an organisation.
Teasing out our audiences’ needs by creating a set of personas.
Taking stock of the things that differentiate us from competitors.
Spying on pitch presentations.
Wrangling our proposition statement, word by word in the dark of the night.
Debating job titles over breakfast.
Creating a mood board of language and how it might marry with imagery.
How will the tone of voice evolve?
Throughout the process we’ve been 'wearing our tone of voice and our messaging in', like wearing in the leather on a new pair of shoes. Sometimes there are bits that rub a little too much and so we make adjustments along the way.
So far, we’re really pleased with the way it reflects our identity, but we’d like to do more testing and research to see how we can adjust our language to speak to our audiences. After all, the mission is to tell stories that are helpful as well as compelling; anything that helps us be more of a practical friend!
Read the next blog post about the new site and rebrand: Our good side: Capturing the characters of Clearleft by James Gilyead.