Introduction

A brand is the essence of a company and a brand guide is a document that captures that brand. It’s useful for many reasons — checking the company touchpoints, onboarding new employees, showing friend/family/customers what your company is all about, etc.

When I first joined UpGuard it had no brand guide, and the result was some brand confusion and muddling. When our lead designer joined (around the same time I did) one of her first major goals was to rein in, define and document the UpGuard Brand. Thus, we began the undertaking that I have documented here.

Interviews

Since both myself and the lead designer were new to the company, we had to jump in with both feet and get our heads around what the company was to us and to others who had helped shape it before us. The lead designer, Ann, conducted interviews with leadership and key stakeholders to find out how the company was built and what the brand was and should be to them.

Once we had amassed notes on what the company was to leadership, we took that information and key words we picked up and put it to the entire company in the form of a survey. We posed multiple choice questions, both literal and abstract, asking employees what the company meant to them.

The State of the Brand

We also filled the wall of the office hallway with images of different kinds of brands, asking employees to drop green stickers on images that they liked and believed were on-brand for UpGuard or what UpGuard should be.

We filled another wall of the office with samples of our most recent collateral, reviewing with their creators and stakeholders to find inconsistencies and off-brand collateral.

Narrowing it down

Based on our own sense and feedback from the company, we built a mood board of images and colors that we believed were on-brand — trying to hone in on the attributes that make up the UpGuard brand.

We tested color palettes, each member of the brand team coming up with and print out their own palettes to hang for review. The same was done for type, testing different combinations of fonts, although ultimately we ended up deciding that Lato for both title and body text was the most on-brand, citing simplicity and consistency.

Each review was done in well trafficked areas of the office and opened for feedback to passers-by. The goal here was to actively and continuously socialize the brand while it was being developed.

Finalizing the Brand Guide

With the brand colors decided and the type chosen, we laid out the brand guide, being as detailed as possible with our potential users in mind — new designers, contractors, partners, and ourselves.

Here is a sample of the typography and color section, in which we layout the proper typeface, most common weights and primary and secondary color palettes. We included both the hex code and the nearest Pantone for web and print.

As I left UpGuard, we were getting ready to do another update in which we included the weight of the text as a number for web development and expanded/refined our color palettes. A brand is always shifting and evolving and it’s important to capture it as it happens. Updating the guide and distributing it effectively post-updates is key.

Proper logo use

A company’s logo gets thrown around a lot by many different people that, despite the best intentions, fuck it up. Blurry, squished, cutoff and other ways of mangling the logo are sloppy and unprofessional. This negatively impacts the brand. We tried to think about the most common abuses that the logo might receive and document them as “no-no’s” here.

Illustration and icon usage

Illustrations and icons are a major part of any visual design work. The Design team developed a few different styles, but always sought to strip an icon to its most essential elements and restrict color and line-weight variation. Simplicity is key.

In this section, we documented the different kinds of icons we use and the proper treatments to apply when creating them (color, line-weight, etc.).

Photo selection

Photos are also a central portion of a company’s visual design. When it comes to stock photos, there is a lot of crap out there, and even though it might convey your message perfectly it can still be a bad image that reflects negatively on the brand.

For the photo section, we laid out a number of good and bad examples, along with the rules that one should follow during photo selection. The copy in this particular section (of which I am the proud author) was a fan favorite amongst employees.

CSTAR rules

A portion of UpGuard’s offering was the CSTAR score — a number resulting from a variety of checks and data points that was indicative of a company’s security. CSTAR has its own logo and colors, so it was important to lay down guidelines for consistent usage. If we want to tell people how trustworthy a site is, it’s essential that we display an attention to detail that conveys our own trustworthiness.

Charts and graphs

As a highly data-driven company, UpGuard has numerous opportunities for data visualization in the form of graphs and charts. Consistency in chart type, look, and spacing is important within and across documents and webpages. The look of charts and graph can also make or break how trustworthy that data appears. Inconsistencies and general crappiness in a chart can queue a reader that the data might not be precise or trustworthy.

We do not want UpGuard’s charts and graphs being lumped in with and lost amongst the endless swamp of bullshit floating around on the internet.

Content Consistency

The Content team added some great pages to the brand guide, making sure that Voice and Tone were properly represented and conveyed to potential UpGuard copy writers. The guidelines span from the more general tone all the way down to proper punctuation. Consistency and attention to detail are an important part of the brand on all levels, something we want to convey in every customer touchpoint.

Email style guide

My final contribution to the latest UpGuard Brand Guide was to work with Demand Gen to create email style guidelines. Email is a huge genre in which a company can communicate directly with potential and current users. It is also an easy thing to mess up. The user experience of an email has many facets and is an important thing to rein in to prevent emails from getting caught in spam folders or annoying recipients. That is not a good look for a brand.

Conclusion

The Brand Guide was a fun, continuous project. It made the Design team’s jobs easier as a reference guide for ourselves and others. It was also resulted in other, fun side projects, playing with ways to expand the UpGuard brand.

Occasionally we would have Brand Workshops where we got together and just played around with different ideas and styles that would fit within or stretch the boundaries of the brand. It also serves as a reminder of how important and all-encompassing design is or should be.

The brand is the company and the company is the brand. If your brand is muddled or unprofessional, that is how your company looks, and that is why it’s important to have brand guides and guardians.

‍