Your pattern library is an important tool for connecting customers with your brand.

Why should product designers care about branding?

It seems obvious. Lots of companies get it. But a lot of them don’t, so let’s explore this idea. Branding is about relationships. Helping create a transactional relationship between the business and its customer. This doesn’t change after purchase. If anything, the pressure to deliver on that brand promise is even more important.

How does your business connect with people? Through promotional media? In person? At conferences? On the phone providing support (hopefully not too much)? Through your product? If you run a digital product company, chances are that your overwhelmingly connect with your customer through your product. The importance of delivering a clear and consistent brand experience is long understood within the physical brick and mortar world. It’s time we began to more clearly understand how that extends into the digital world.

So, how does your brand inform your product?

Let’s start at a high level by considering your brand characteristics. If you’ve gone through a proper branding process, you’ve hopefully identified a few. For example:

Engaging

Delightful

Insightful

Helpful

Trustworthy

These provide a rich sense of direction for branding and product design. They inform both the what (what features, tools should we provide) but also the how (how will we design/deliver these)? Obviously, as part of branding, elements such as color, typography, texture, spatial relationships, imagery, and voice and tone would be defined and inform our product design.

Brand designers are skilled at translating brand characteristics into design language. Copywriters are skilled at translating brand characteristics into voice and tone. But the standard brand definition is probably not sufficient for product design purposes. Therein lie the gap and the opportunity.

Expressing your brand through product design

It might be good to start by creating an inventory of brand expressions that are unique to your product. For example:

• Inputs and Datagrids

• Iconography

• Zero states

• Onboarding

• Success and Errors

• Saving and Deleting

• Confirming Intent

Even the simplest of these items is an opportunity to explore and express your brand. Be deliberate in how you choose colors and border-radius for your buttons. Underline or borders for your inputs. Find places to do better than stock iconography. Anytime your product dialogues with the user is a huge opportunity to express your brand. For example:

Grammarly moves beyond standard select list inputs to create a branded onboarding experience

Google implements a branded primary action button

This could be a boring list. Instead, the card format + illustration is information rich and brands the experience.

What does this mean for popular pattern libraries, front-end frameworks, etc? Currently, there is a proliferation of material design implemented straight off the rack with little to no customization. It’s reminiscent of Bootstrap a few years back. It’s encouraging though to see Material Design support easier customization within Sketch with their theme editor. Also, front-end frameworks such as Vuetify allow their patterns and components to be easily themed. This means you can get the benefit of someone else’s effort creating a framework but can make it your own. That’s great news. There’s a world of opportunity to better connect your brand with your customers through your pattern library.