U.S. News Brand Guidelines
Design Systems, Figma, Branding
Synopsis
To create greater brand consistency, I pitched building new brand guidelines to create alignment across the organization on aesthetics and messaging. I created a cross-functional group to accomplish this, and did much of the writing and design layout for the final product.
Whose in Charge?
Nebulous ownership made it difficult to gain consensus on updating or creating brand documentation.
Quality Taking a Hit
Democratized design work (via freelancers, Canva, and AI) frequently bypassed design team review, leading to fragmented branding and misalignment, even within the marketing and design teams.
Mixed Messaging
Inconsistent terminology and a wide variety of voices reduced the overall quality of written content.
Brand Morale
A lack of internal buzz and pride around the brand missed an opportunity to boost employee morale.
The Problem
Without centralized guidelines, the branding for U.S. News was handled independently by siloed verticals.
This created aesthetic and messaging misalignment since teams did not have guidance when starting a project, and when misalignment was addressed, there was not enough organizational capital for brand stewards to request changes.
Consistency and alignment across an organization are incredibly important for a brand experience. While branding direction can be communicated in a number of ways, it’s important to have a shared artifact that everyone in an organization can refer to for aesthetic and messaging direction.
Badge Production Issues
Licensed badges, a critical revenue stream, were difficult to mass-produce and prone to quality and formatting errors. Badges would be present on recipient marketing with messy typography or spacing.
Inadequate Vendor Docs
Existing documentation for external partners and vendors was bare-bones and needed aesthetic updates.
Off-Brand Web Assets
Without proper training or easy asset discovery, web producers and social media teams frequently used off-brand photos and illustrations.
Other Challenges
Outdated, inaccessible or non-existent guidelines had knock on effects around the organization.
A recent article from another publication featured a version of the U.S. News logo from the 90's, since the U.S. News branding documents are squirreled away on inaccessible internal drives.
I pitched creating a cohesive brand guideline
Since I was leading the designers and we had a new marketing team lead, I believed it was a good time to address this glaring issue with the organization's brand.
Creating a central document would give brand stewards what they needed to enforce brand consistency, as you cannot expect teams to align with the brand without guidance and rules.
Bespoke product and event logos were a very common issue. There was not guidance for them so every logo was different. One goal was to add this with clear rules and dimensions to create consistency for these common use cases.
Guidelines Should Follow Precendence
Guidelines should use existing documentation and recent brand-aligned work as a foundation.
Enhance Democratization
There was little capacity for brand oversight, so guidelines should make it as easy as possible for lay-people to understand and follow.
Communicate New Guidelines
Guidelines should be introduced to the organization in an all-staff meeting, and should be easy to find and covered in new employee onboarding.
Cut Down on Brand Intervention
Better brand alignment within teams means the design and marketing teams need to intercede less frequently on projects that are not quite branded correctly.
Goals
Now that we had consensus it was time to look at what we had and were we were going, and what our goals for this project were.
Totally overhauling the brand was out of scope for this project, to avoid as much dissonance in previous work as possible, my main goal was to synthesize existing documentation and fill in the blanks where there was no existing guidelines.
Audit Existing Guidelines
Audited existing documentation to extract and preserve relevant legacy guidelines.
Keep Momentum
Initiated biweekly meetings with Marketing and Design to build a benchmarked framework and set a launch target for the upcoming quarterly meeting.
Group Effort
Incorporated feedback from cross-functional stakeholders (photo, video, and lifecycle marketing) to address recurring issues like tonal mismatch.
Legal Review
Partnered with the legal team continuously throughout the drafting process, concluding with a final copy review.
Pen to Paper
Co-authored the new guidelines by integrating the legacy materials, the active design system, and core brand identity elements.
Preperation
Now it was time to get to begin preparing the content for the guidelines. I collated existing documentation and started taking what was still useful from it. Since this effort should include the voices from several departments, I engaged with individuals in charge of those groups to include best practices from their work. I delegated creating an outline to a designer skilled at branding efforts and then I began filling in the copy.
Badges
Badges are an important part of U.S. News' business model. In addition to documentation improvements and guidelines for labels, I created a new workflow for batch building badges consistently.
To assure badges stuck to the same layouts, the guidelines include instruction for badge sizes and order of labels. These guidelines were baked into the Badge template.
Badge Options and Labels
I workshopped new standards with the Marketing team to match badge designs to the appropriate level of accolade, rolling these rules into the overall Guidelines.
Optimized Batch Creation
Badges required both RGB (web) and CMYK (print) formats for licensing, making Figma a poor choice. Illustrator's batching tools are poorly designed. I identified Affinity as a good option to overcome both issues and created a template that allowed batch badge creation and exports.
Make it Easy
The standardized Badge options and labels are built into the new batch template, which seamlessly adapts to text variation.
Some examples of incorrectly utilized logos
Accessibility
Selected Figma over InDesign as the primary layout tool to prioritize team accessibility, collaboration, and version control.
Make it Easy to Update
Structured the guidelines using custom Figma components for headlines, body copy, and diverse visual-aid layouts.
Flexibility
Engineered a suite of design tokens that automatically adapted single page assets for both digital presentations and print formats.
Visual Aids
Designed illustrative components to demonstrate various design motifs and comparative "do's and don'ts" for messaging, branded assets, and imagery.
AI Guidelines
As AI tools became more accessible, guidelines were integratied into the brand document.
Final Reviews
After initial layout, other stakeholders were given another opportunity to provide feedback.
Design and Layout
Getting close to the finish line, the next step was to actually layout the final guidelines document.
Findability
While making brand updates, I had created a unique branding section of the company's Confluence intranet to house this document and other incidental material.
Communicate the Guidelines
Guidelines were communicated in major meetings after they were completed and uploaded.
Guidelines in AI Tools
Guidelines were integrated into markdown files to assist in remaining brand compliant in AI tools.
Wrap up and Results
I left the organization as this project was completed, but had prepared some marketing and next steps ahead of this.
Final layout visually aligns with the brand itself and features easy to scan details and illustration