Product, branding and designops

charles

Two redesigns of the website, one complete rebranding, a new font specifically built for the brand,  lots and lots and lots of presentations, templates and component libraries, and LinkedIn ads. This is the most comprehensive brand and product project I've done.

See it live
Team:

Maxine Hess
Andrey Frolov
Etienne Kiefer

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

a picture of four post it notes each one displaying a sketch for a logo
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.
5 sketches of logos
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.
A moodboard of different brand explorations
While looking for the logo I was developing the visual language, which I struggled for a bit trying to give it some 💫 oomph 💫
two logo ideas with a friendly face
The main concept of the companion / character was the strongest across all our reviews and the most distinctive.

The logo:

charles logo on a black background, a yellow three eyed character sits next to the charles text
a display of the logo in different contexts and shapes
a display of the charles logo in different contexts, shapes and backgrounds

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
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 I cannot show.
But if you're interested we can discuss this in a call!

For now you'll have to believe me I had to take it down.

A brand is only as strong, as you're confident in showing it.

‍

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 figma preview of how a component is built
a preview of Figma on how to build a component

A view into Figma

a picture of four post it notes each one displaying a sketch for a logo
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
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.

Check out some of my other projects:

WWF - Tree of Hope
Branding. marketing & product
Galactic Garrison
Design System on steroids