Work

Amplience

Brand Redesign, Web Design

Amplience’s visual brand identity challenges the status quo for its specific vertical, disrupting the safe zone where most of the competition resides in. It is bold, distinct, and takes risks to stand out and get noticed. The messaging formerly spoke “at” the customer, with the “what” robotically exclaiming feature after feature, we began to start with “why” putting the customer story at the center to speak experientially, naturally, and conversationally.

Role

Creative Director

Responsibilities

Concept Development, Design Direction, Graphic Design

In the Beginning

Up until May of 2021, Amplience had been contracting out to 3 different 3rd parties to handle their creative work. The state of the brand was a bit half-baked, where in 2020, they had started a rebranding effort but were cut short by Covid. They made it to an updated logo, colors, typography, and some basic lockups and layouts, but not much past this point.

With the 2020 rebranding effort not fully realized, things were in a bit of an incomplete and stale state for the brand by 2021. This, however, made for a fun and challenging opportunity for me when I was hired on as Creative Director in May of 2021.

The first order of business was to survey, digest, and assess all of the media going out across touchpoints and prepare to bring all of the 3rd party efforts in-house.

Soon after I was hired, Steve Uren was formally brought on as Chief Experience Officer (CXO), providing executive creative direction. Another creative director, the very talented Nick Booth, was also brought on, and we had a solid senior creative core to take the Amplience brand to the next level. Nick and I started interviewing and building a formal creative team consisting of a senior designer, a visual designer, two digital designers, a head of copy, a copywriter, a motion/video designer, and a project manager.

With a team in hand, Nick and I began to significantly develop and advance the brand to revitalize the end-to-end visual design of all Amplience media and enable our designers with a solid toolkit to work from.

Expanding the Brand Design System

Leveraging Figma, we began building a design environment using atomic libraries to not only create a modular UI framework for addressing the web design aspect of Amplience but also as a tool for brand design elements, creating a collaborative environment and libraries to efficiently create within and build forward.

This set up a scaleable system for success and team growth – as we were flying the plane, we could build it simultaneously, growing the system as a toolkit full of new brand elements and ideas. This system also provided a single source of truth in terms of standardization and consistency in an efficiently deployable and exportable system that extends out to all digital and offline marketing design for Amplience designers.

Color

The previous branding effort used 4 bold primary brand colors that were very similar to each other ranging from magenta to purple, quite chromatically, without any hierarchy. We devised a reformed and focused color pallet, jettisoning three of the 4 colors. We retained the most iconic color for the brand, magenta, paired it with a complimentary mint green, and rounded out the set with two primary light and dark neutrals.

From our new primary set, we came up with a secondary set of colors that are tints and shades of the primary set, a set of neutral greys that contained hints of the primary colors for harmony, and a tertiary flesh tone set. With these additional pallets, we could explore more delineative, human, and living colors within the brand.

Typography

WHY ARE WE SHOUTING? We can make a greater impact with a conversation. The brand typeface is Caslon Doric, which is quite an expressive and diverse family. However, only a limit set of the family was in use – extra bold condensed (ALL CAPS) for headlines and regular for paragraph copy. There wasn’t much hierarchy to the scaling; it was all very arbitrary. With all headlines in all caps, it seemed as if the brand was shouting all the time and trying too hard. It was hard to make a point when it was necessary – where do you go beyond all caps to make a point?

To refine and advance the brand typographically, we moved all headlines to Title Case, except keeping the all-caps headline only for titles/h1s – this was our brand legacy tie-in so that there was a degree of familiarity with the past. Relaxing all other headlines made the brand much more conversational and informative, and less combative.

We instituted a modular scale system to govern the size hierarchy. Finally, we added a medium, bold, and italic weight to the mix for some diversity of expression and foundation.

Dynamic Geometry

The nature of the “headless” technology that Amplience produces is composable in nature, where it seamlessly connects disparate technological platforms into one streamlined experience. We devised a system of geometrical elements using the reformulated color pallets that representationally simplify and reflect the representational aspects of Amplience technology.

This enabled a suite of elements that are abstract expressions rooted in fundamental truths about the brand and its software product.

Photography

Short of having original in-house photography, we set about curating libraries of stock assets that we deemed “on-brand.” There’s so much bad, cheesy, and cliche imagery on most stock sites, so we had to comb through and make choice selections, creating buckets based on our target audience personas.

This made life much easier for our design team to efficiently execute designs leveraging photography that makes the right on-brand expression.

Icons

A crucial form of expression that distills concepts into a visual form that communicates in the shortest amount of time necessary. Until this point, there was no ratified set of icons; they were a hodge-podge amalgamation of royalty-free sets. We set out to unify the existing (and new) icons into a brandified library of icons that are consistently weighted each in a standardized 4-variation set (light and dark modes of mono-linear and filled versions). They are kept to the simplest form of themselves for the most reduced cognitive load on a viewer.

Like the photographic buckets, the icons are topically organized based on the audience personas, making it fast and easy for the designers to zero in on the right icons for the design topic. Scalability was in mind with the output formats, so where possible, we leveraged the SVG format, using the non-scaling stroke property to regulate stroke widths so that in a mix of sizing, the icons look consistent in any combination or composition.

Diagrams

The previous diagrammatic expressions of the brand were very rudimentary text in boxes within boxes style of visual explanations that were quite ambiguous, lacking in orientation, starting point, and end point. Oftentimes, the point of origin was at the bottom, with no indication of a starting point.

To make diagrams more intuitive, we refined these models to naturally orient start points at the top or left to be familiar with most Western communication styles. They also feature flow marks and icons to be much more expressive and indicative of their action/result.

Visual Explainers

This category of brand elementation is particularly interesting and powerful. They enhance marketing touchpoints and are very useful in customer educational purposes as well. We devised this as a system of components that can be assembled to make more complex yet still simplified expressions of concepts of Amplience as a whole.

They are assembled from type, icons, colors, geometry, and abstracted interfaces of the Ampleince platform, simplified and brandified and quite unique. For example, a unique combination of photography representing personas can be combined with the abstracted UI components and framed within the brand geometry to bring people and the use of the technology together that help to visually explain a concept with a brand-focused expression–they visually explain who, what, and/or why in a brand context.

These are powerful combinations of representations of what the product essence is and combining them with branded elements to begin to tell a product story that starts addresses the “why” of the customer user or evaluator connects with and turns into a marketable brand story and a natural part of the brand visual lexicon.

Web UI Library

The web design of Amplience was somewhat in a vacuum, with no solid framework for generating and expressing future concepts for website designs beyond one-off layouts where component work was largely repeated and component designs varied from design to design. This caused many variant code sets and content types with much development debt.

We standardized an on-brand UI design system using Figma in its traditional form. We generated new ideas and formalized approved designs into an atomic modular system of reusable components centrally administrating libraries of atoms, molecules, organisms, templates, and layouts. This created an efficient design workflow and a much-improved format for handing off designs to our dev team, where our UI system had parity with the content types and code library of our developers.

Copywriting

With our head of copy Jack Simpson at the copy front, a tone-of-voice framework came to be for the brand, giving much-needed guidance to who and how we were speaking as a brand. Instead of speaking “at” people with the “what” exclaiming feature after feature, we began to start with “why” putting the customer story at the center to speak experientially, naturally, and conversationally.

One More Time With Feeling…

Too many B2B brands let their B2B label define them. Their tone of voice is too formal. Self-serving. Full of words but empty of soul. Stuffed full of jargon and clichéd phrases trying to pass as original thought.

Our audience aren’t businesses. They’re human beings working for businesses. They need to make rational decisions, yes, but never without a touch of gut instinct (even if they won’t admit it). And our tone of voice reflects that.

We keep things grown up and professional, of course, like anyone should in business. But we write the way we talk. And we’re not afraid to raise a smile or even a couple of eyebrows while we’re at it.

Loosen Up

Let your personality shine and never shy away from (tasteful) humour. Relax, there are no set rules for B2B writing (there’s no such thing as ‘B2B writing’). Our audience often have stressful jobs – let’s give them a little bit of joy in their day.

Be a Good Therapist

Talk to and about our audience and their problems more than ourselves. Nobody cares about how great we think we are. They care about their job and all the things that keep them awake at night.

Say It Like You Mean It

Always write with passion and optimism, no matter how dry the subject matter feels to you in that moment. If it’s boring you, it’s boring the reader. Everything we write should inspire an action, shape an opinion or both.

Talk Normal

Explain things simply using everyday language and avoid clichés or industry jargon. Imagine your reader has zero knowledge of this thing you’re writing about – are they frowning in confusion or nodding in understanding?

Bringing it All Together

Armed with an advanced and elevated brand design and brand element design system, we applied the system across all digital and offline touchpoints, redefining the look and feel of media with a unique, distinct, and vibrant energy across all communication.