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. My design technology 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.
The outdated brand guide needs an upgrade.
It was difficult to communicate, use, and maintain the Bixal brand because the elements were scattered in different places, in various levels of refinement, and not entirely accessible to the people who need to use them.
Specific problems include:
The Bixal “brand book,” was a large PDF document sitting somewhere in Google Drive. Not everyone has access to Google Drive and it is rarely used.
Some details about the brand — like copy, colors, imagery — are not easily available for reuse.
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.
Create a primary source of truth in the form of a publicly available website.
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 guidance on how to use it.
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.
Balancing color use.
This image was added to the color section of the brand guide to demonstrate how to balance the use of the Bixal colors.
Accessible color pairings.
A new addition to the brand guide shows color pairings with text that follow accessibility best practices.
New sections were added to further clarify the brand and best practices surrounding accessibility.
The PDF version of the brand had some outdated and sometimes confusing information. To remedy this, the team and I 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.
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 by others at Bixal. The 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.
In future iterations, I’d like to add more templates for business development purposes, such as branded templates for proposals.
The toolbox
This site is currently hosted on Github.
I used Jekyll, HTML, the United States Web Design System, Bixal’s CSS, and Markdown to bring it to life.
My team used Figma to ideate and Microsoft Teams and Github to collaborate.
More about Jekyll and the approach: Jekyll is a tool used for building static web pages. I can add content using Markdown (a simple, readable language), and then Jekyll can help to build the basic HTML structure. It makes building reusable templates and adding content very simple for designers. For this project, I created my own HTML structure and used USWDS to further customize and make it responsive.
Customizing USWDS.
All of the projects I’ve prototyped up until this point utilized USWDS without much customization. This project involved a lot of creative problem-solving in balancing the Bixal brand visual assets with the use of the United States Web Design System (USWDS).