Roby SaavedraProduct Designer
NYC
Design

On Building A Brand Guideline

image

Illustrations by Madeleine Welsch

At the time I joined the company, Flocabulary’s brand was loosely defined; its rules for implementation scattered. On pieces of marketing collateral would be fonts or colors which were clearly not found on some other branded swag or social post. At a certain point individual contributors from product, brand, and marketing all seemed to be creating elements independent of each other. The solution was clear: we needed a single source of truth. We needed brand guidelines.

🌹 Note

To skip all this explanation and just look at the brand guidelines go here.

Planning

Traditionally, at most institutions I’ve worked, brand guidelines took the form of static pdf files made in Indesign, updated once a quarter which were shared through email. The inescapable problem with this solution is that the onus would fall on each individual stakeholder to stay abreast of updates as they arrive and be diligent in referencing the correct document. Inevitably wires get crossed, someone misses the release, a well-intentioned designer inadvertently references outdated data, and the spaghetti monster grows ever stronger.

So, with the initiative to create a Flocabulary brand guideline laid at my feet, I wanted to do it better. I wanted to transcend the issues that come with distributing a static PDF and create a brand guideline which would be accessible to anyone, anywhere who might need it and unburden a user from the worry that the information therein might not be up to date.

My solution was to put it online -- build the guidelines as a stand alone microsite which anyone could access. The upside of this approach is the ability to eschew the pitfalls of distributing static documents and instead centralize the information to a single source. With that centralization, I believed, comes the assurance that information being served is up to date, uncontradictory, correct. The downside, however, is that I would have to build it.

Well the joke is on you, downside: I freaking love building things.

image

Illustrations by Madeleine Welsch

Process

1) Communication with stakeholders

My first order of business was to touch base with those in the org whom I thought would most benefit from the guideline. What do they need? What are they most often looking for? What even is a brand?

2) Gathering assets

After I’ve taken stock of what’s most valuable to the users, I set about collecting assets and information that’ll populate the guideline. These ranged from logo files, color values, font families, and more.

There’s also a rich collection of assets made by our incredible in-house illustrator Madeleine Welsch. Were those to be included? Friend, you had better believe it.

3) Design

Once I’ve spent the time assembling assets, verifying with stakeholders that everything checks out, I start the design process. I put together a layout in Sketch and get some feedback. Iterate, iterate, iterate, until I settle on a layout I’m into.

4) Building the thing

Time to build this thing. As luck would have it, the bandwidth gods smiled upon me during this venture and I had a lot of free time to devote most of my attention to getting this done in a short amount of time.

It was a great opportunity to learn more about how to organize and develop a React project. The 2 week span where I actually did most of the development was a whirlwind of front-end education.

I, of course, couldn’t have made it through this process without the help of a lot of members of my incredibly generous engineering co-workers. Software developers love to help.

5) Shipping

Building something is a great way to validate a design. There’s always a bug or practical issue that presents itself when a layout is actually developed. This was of course the case for me. Subsequently, being both the designer and developer on this project really improved the way I work as a designer.

Over the course of its development, the design of the brand guidelines was able to quickly and easily update as issues arise - no need for rework of designs in Sketch. This is rarely going to be the most practical way to ship a product but it was supremely efficient for this situation.

6) Iterating

The brand guidelines quietly went live before being released to the entire company. A core set of beta users were able to use it for a few weeks and point out bugs which I happily fixed, missing assets which I easily added, or my typos which I graciously corrected.

cover

Illustrations by Madeleine Welsch

Result

Flocabulary’s brand guidelines are now officially enjoying a wide-release and have already proven their value to the company. I’ve received a lot of positive feedback from co-workers across the organization who reference the site regularly. I’ve even began to notice a stronger visual cohesion among branded collateral coming out of the company which I believe is a result of having an easily-accessible, central source of truth.

I’d say the project is a success! 🥂 Enough reading, go look at the finished product!

https://www.flocabulary.com/tools/branding