Project - charles

Context:

Charles is a WhatsApp marketing tool, it allows businesses to send newsletters to their subscribers. But since WhatsApp is a very interactive medium, the type of campaigns that can be done are very appealing for customers and very useful for businesses to further improve their targeting.

The results:

A new logo, an entire new website, more consistent tone of voice, a new custom made font, better defined content direction and a whole lot of color.

BUT

it also entailed the creation of methods to maintain the brand in line across all communication and in better ways of implementing content onto the website.

Also an insane increase in SEO reach, brand perception, interest, and best of all, copycats!

a web browser with the charles website inside, elements of UI and 3D renders surround it

B2B is BOOORING (?)

The main idea with the redesign we wanted to make with charles was to step away from the usual B2B approach, step out of that lane, and let us build our own way of doing B2B marketing.
The usual B2B space is muddled with royal blue and overly optimistic stock images. And within the marketing space the competition aimed to appear very professional but falling into staleness and sameness.

1st step: design the logo and visual language

The idea of a character came up pretty early, based on lots of surveys across the company and from clients, this was also the prevalent perception.

Some logo ideas needed to be pushed far away from our initial assumption. In the end the logo needs to be able to encapsulate the brand rather than explain it.

While looking for the logo I was developing the visual language, which I struggled for a bit trying to give it some 💫 oomph 💫

The main concept of the companion / character was the strongest across all our reviews and the most distinctive.

The logo:

An unlikely collab

We contacted Kulture Type and asked them to build the voice defining aspect of our brand: the font. They gave us charles sans and charles inktrap:

a figma preview of how a component is built

Check their case study about this fantastic font on their Behance profile

See on Behance

a preview of Figma on how to build a component

2nd step: A new home

I had already done an entire redesign of the website early when I joined charles, now I needed to redesign the website (again!) and lead the implementation of the brand and new features.

We wanted to talk directly about the hard numbers and the direct benefits of using WhatsApp marketing with charles. Also to better explain what the product does and how easy it is to implement

3rd step: Create, document, distribute

I did some guidelines, if you're interested to see more and we're interviewing please click on the button below!

If you want to see more details and take a look at the prototype click here:

View more guidelines

A library not only for designers

I built a comprehensive library of components that fulfilled:

Faster website sketching

Better and more in-brand sales and client presentations

Faster and more cohesive content creation for website and social media

Increased communication across teams in terms of brand assets and overall content production

Product team adoption for their own needs

I aimed to build components that didn't need any designer overview. Any user should be able to pick and choose and edit what they needed directly through the component options.

A view into Figma

Aside from the branding guidelines, I built a method for everybody in the company with the need of brand assets could find and implement them without any help from the creative team.

a design composition being dragged with a mouse cursor

Users can drag and drop directly from the Asset sidebar or Resources section on the top bar.

Figma sidebar where you can see the style of fonts

Templates and components had text styles to easily define hierarchies

The figma sidebar with information about components

The easiest method allowed for users is Instance Swapping. But booleans, variants and other component properties were available as well.

Flexible components

With auto layouts and variants the sketching, production, prototyping and handover of new sections of the website were optimised exponentially.

a collection of UI elements in different colors and shapes

These are some of the components that are part of the library, it allowed other team members to test and iterate very quickly on usability and readability.

Also social media and ads!

We took some liberty from the usual guidelines, but this is how we pushed the brand to evolve and to bring in extra ideas.

These are a few of the assets used across all charles channels

Check out some of my other projects:

WWF - Tree of Hope

Branding. marketing & product

Galactic Garrison

Design System on steroids