Mailwave — how we designed a brand voice
Maybe you have been working on a product but you haven’t got the chance to work on its branding, and you are looking for ways to shape your own brand identity, or you have an existing brand that you want to enhance its outlook. Then you are in the right place. This post talks about one of the ways you can approach such a challenge.
In our previous post, we shared how we developed Mailwave — an AI-enhanced communication tool that tracks the engagement of mass emails within the enterprise. When you build products from scratch like Mailwave, you have the exciting challenge to define its voice, a.k.a. brand identity.
From day one, when we began shaping the Mailwave concept and flow, the design team was thinking about its brand voice and ways of expressing it successfully. Reflecting on how we designed our brand voice, we see the following steps: 1. Flaring and metaphor hunting, 2. Vetting for the most balanced metaphor, 3. Visual identity exploration and refinement, 4. Humanizing the brand voice. 5. Storytelling.
1. Flaring and metaphor hunting
When our tool’s MVP (minimum viable product) was taking shape, we began thinking about the tool’s origin story. We needed a metaphor that can scale well in an enterprise setting, especially when the product grows in a 75K+ people organization and is adopted by lots of users.
That’s when we decided to open up the floor for co-designing and invited friends and colleagues from other teams. We did a couple of brainstorming and voting rounds. We later realized this phase is like a metaphor hunting phase. People come up with all sorts of metaphors, ranging from literal to abstract, call to action to descriptive nouns and adjectives. Literal metaphors have the advantage of being direct, but lack the spark. Abstract metaphors are good for openness, but fall short on specificity. Calls to action are good for inviting people to jump on the product.
2. Vetting for the most balanced concept
From these flaring and vetting discussions, Mailwave stood out the strongest by balancing the metaphorical and the literal, call to action and descriptive. The wave metaphor partially gets its inspiration from the cheering crowds who engage with each other through a wave in big stadium games like soccer. It represents excitement and an engaged audience. It can further represent a brainwave — a clear idea of alignment between inspiration and engagement.
3. Visual identity exploration and refinement
The next step was to explore the visual expression of the metaphor. One of us took the lead and generated ideas on representing the wave. Afterwards, the design team got together and discussed what certain forms, colors, and compositions might mean. We wanted to go after approachable and optimistic; that led us to go towards rounded shapes. We wanted the logo to be fluid; that led us to go toward a dynamic and slightly asymmetric composition. At the end, we settled on wave stripes that are in motion.
Then came the more refined explorations, this time with color and logotype. We generated lots of alternatives of the same moving wave stripes. Alternatives show variations of logotype, color, and composition. Having vetted the alternatives, we decided on a more asymmetric version of the stripes, with ardillo as the logotype. To support the approachable and optimistic, we chose lowercase and three lively colors.
4. Humanizing the brand voice
As we asked ourselves how we can manifest approachable and optimistic in the product, we dug deeper into the core aspect of a communication tool and defined conversational as the driving principle for visual and writing style.
We also looked at industry best practices and how they manifest brand tenets. From Twitter’s famous whale to Dropbox’s stick figures, we realized the subtle power of characters in humanizing a product. With these discoveries, we worked on mailwavers and their office life. Mailwavers represent the fluidity of work and approachableness.
5. Storytelling
Finally, as we began to design our landing page and craft a value proposition for the product, we felt the need for a video story explaining Mailwave’s value proposition. We worked on a video pitch story and gave the floor to the mailwavers.
Reflecting on our brand journey, we have a couple of takeaways.
If your team is neutral about branding and leaves it in the hands of the designers, you can involve your team in a couple of ways. First, you can brainstorm with them and let them work with you. You can either organize a session with them, or, as we did, create a board with instructions so that people can post their ideas as they think of them. Later on, you can vet those ideas with them.
Humanizing a brand can mean many things, and the idea can get easily derailed or overdone. The subtleness of its use is key to success. When we worked on mailwavers’ lives in the UI, we thought them more like your peers that you see when you accomplish something, like when you are onboarding to the product, about to launch a campaign, or launched a campaign. This mentality helped us to stay on course.
Many thanks to Leslie Mackay and Rachel Reynard for the editing! Big thanks to Rachel Reynard, Alex M. Wu, and Ben Boeser for co-shaping the visual design language over the course of the product development. Finally, many thanks to our videographer friend Serge Berig for helping us creating the video.
