Bixal Brand Guide

Overview

Bixal’s brand guide was transformed from a large PDF that was difficult to access and maintain, to an interactive website. The Rapid Response Team worked closely with Bixal’s new brand designer to update the brand guide, add more guidance around brand assets, and create shareable templates for others at Bixal to interact with the brand.

View the Brand Guide

Problem

It’s difficult to communicate, use, and maintain our brand because the elements are in different places, in various levels of refinement, and not entirely accessible to the people who need to use them.

Some of the specific problems include:

• The Bixal “brand book,” the primary source of truth, is a large PDF document sitting somewhere in Google Drive. It contains helpful narrative and background, but is lacking in practical usage guidelines. Not everyone has access to the Google Drive so some can’t find it or don’t even try.
• Some details about the brand — like copy, colors, imagery — are not easily available for reuse.
• In some cases, there are inconsistencies, errors, or lack of information about the details.
• There is no clear way for people to ask questions or give feedback on brand elements and usage.
• There is not enough information about how to use brand elements in ways that follow accessibility guidelines.

Audiences and use cases:

• Designers who are working on the brand itself (maintaining source files, creating templates, updating guidance, etc.)
• Designers who are working with the brand, working with internal stakeholders to create unique expressions of the brand for various marketing and communications purposes.
• Non-designers who are working with the brand, primarily using templates and other provided collateral for various marketing and communications purposes that do not require a designer to be directly involved.

Solution

A publicly available website that will organize information about the brand in a clear, accessible, and useful way so various stakeholders can find what they need and get guidance on how to use it.

The brand guide is split up into the following sections:

• logo
• color
• typography
• imagery
• templates

All of the sections were created with updated guidance and information, as well as new graphics that demonstrate and help visualize how to use the brand.

New additions to the brand

The PDF version of the brand had some outdated and sometimes confusing information. To remedy this, the team created new assets and content that better supports the brand.

• New guidance showing how to use the colors in ways that align with accessibility best practices was added in.

• New guidance on how to use Bixal’s ‘B’ monogram was created as a template for social posts. The template was made in Figma and includes a bleed guide with instructions, examples of various social posts, and downloadable frames that people can edit and post.

• A Bixal branded presentation came highly suggested from others at Bixal. So our guide includes presentation templates in both Powerpoint and Keynote.

• An Adobe asset library was created. Now, any Bixalers who work in the Adobe Creative Suite can have access to the various brand assets within whatever programs they use.

Results

View the new brand guide

If you have any questions or feedback, feel free to contribute to the discussion in Github by creating a new issue.

Tools

This site is currently hosted on Github. We used Jekyll, HTML, the United States Web Design System, Bixal CSS, and markdown to bring it to life. Our team also used Figma to ideate and Microsoft Teams to collaborate.

Reflection

This project focused more on customizing the HTML and a little less of a focus on the use of Markdown, although it was still somewhat utilized. It challenged us to use creative solutions in code to get the look we were going for, without straying from USWDS and accessibility best practices.

This project also heavily involved a brand designer. Adding this new teammate meant that we had to balance another vision for the project which led to more creative problem-solving, more collaboration, and more transparency about what is possible in code to achieve the appearance that our brand designer had in mind. We started to get used to working in our bubble where we all had a mutual understanding of the UX process and UI. Adding someone to the team who was less familiar with those concepts allowed us the opportunity to teach each other along the way and gain new perspectives.

Overall, this project was very well received by the other designers at Bixal who previously had many poor encounters with the old brand guide.