Add Using custom logos guidelines to Design System, Components Section

[KevinMHoffmanUSDS]

Suggestion: add page entitled Using custom logos to the design section, after Typography at:

https://design.va.gov/design/using-custom-logos

Proposed content, with @jenniferlee-dsva's second round of edits and the lovely images from @rtwell incorporated:

Using custom logos

Using custom logos for VA departments, offices, teams, sub-groups, special programs, initiatives, or events is not supported on VA.gov. This practice aligns with the requirements in the VA Graphic Standards and the Web Governance site.
In user research, Veterans told us that VA’s multiple brands are confusing and complicated to understand. By being consistent with our visual branding, we can reduce Veteran confusion from “logo clutter.”

Custom logos for the following use cases are not supported on VA.gov:

• Pages that list VA programs, such as a list of benefits
• Benefit detail pages
• Within a software application, such as an application form or tool
• Search result listings for VA departments, offices, teams, sub-groups, special programs, initiatives, or events

Use the name in place of a logo

Use the name of the department, office, team, program, initiative, or event. Do not use graphical elements in place of names, such as logos, photographs, or custom illustrations that don’t meet VA branding guidelines and that are not part of the VA.gov Design System.

About VA branding guidelines

VA provides specific examples of how to execute a logo or word mark within VA brand standards. This helps us appear as a “branded house.” See pages 9 and 46 – 49 of the  VA Graphic Standards .

Like this

This is based on page 9 of the VA Graphic Standards, seen below:

Veterans recognize VA

They don’t care about our many sub-brands. It confuses them and creates feelings of mistrust about which is the source of truth for their benefits and services. Based on this Veteran feedback, VA has taken a “branded house” strategy.

Branded house vs. a house of brands*

• Branded house. An example of a “branded house” is the company Apple. Every Apple device and service appears as part of a single, unified visual ecosystem.
• House of brands. An example of a “house of brands” is the company Johnson & Johnson. This company includes many sub-brands that are more recognizable than the company itself. Think of Tylenol, Neutrogena, Listerine, etc.

About VA’s Digital Modernization and Web Brand Consolidation

To improve Veterans’ customer experience, VA initiated a cross-agency collaboration for Digital Modernization. We learned from extensive research that:

• Veterans and service members struggle to navigate benefits and services.
• VA gets 140 million phone calls annually, and 10 million people per month visit a VA website. Many of these people complain about having a fractured, frustrating experience.
• Veterans think of VA as a single entity, but we deliver services in silos, forcing Veterans to figure out which phone number to call, which website to search, and which office to visit to get what they need.

As part of this enterprise-wide Digital Modernization strategy, an intra-agency Web Brand Consolidation Working Group is working across VA to consolidate and simplify Veteran-facing web applications and services into a single, consistent, and unified experience on the VA.gov platform.

[jenniferlee-dsva]

@KevinMHoffmanUSDS @rtwell @lalexanderson-dsva @jaredcunha-usds - attached as word doc revised, streamlined text. I (Easier for me to format and track changes in Word.)

• Shaved about 100 words.
• Also tried to up level the more action oriented items, putting the brand education stuff lower.
• Kept Digital Modernization and WBC capped, so it appears 'official Veterans Affairs programmey thing.'

I think that stuff is relevant and helpful, but to keep things in line with the usage orientation of the design system -- rather than the 'governance' oriented side of things.

@chrisj-usds FYSA - I think you should review the Digital Modernization/WBC section to make sure that the messaging is not in conflict with overall DM strategy.

custom-logos-design-system.docx

[KevinMHoffmanUSDS]

@jenniferlee-dsva Thank you so much for getting to this so quickly!

[KevinMHoffmanUSDS]

@chrisj-usds I've incorporated all of @jenniferlee-dsva's edits on this page, as well as @jaredcunha-usds's suggestions on where to place this page in the IA. @rtwell, if you're able to get to creating and adding that image this week, this page will be done and ready to move into production. If I can get to it sooner, I will, and I'll let you know that it's done so you can take it off your plate.

[jenniferlee-dsva]

Let me know before it goes live, so I can give it a proofread. A couple of mistakes ^. RE adding sub-brands section to the content style guide section, we have a topic (in hidden draft mode right now) called 'naming.' I prefer to add it there, where we can talk about naming products, programs, and features in general.

Are you okay moving forward with just the ^ design system page for now? We (I) will get to the content style guide page later, and right now, the content team is working furiously to close out as many in-flight Veteran-facing work before contract ends next week.

[KevinMHoffmanUSDS]

@jenniferlee-dsva I'm fine with moving forward with just this page for now! Thanks for all of the quick turnaround on this. Feel free to edit the original issue if you like, or just post another Word file update and I'll update the final copy and let @jaredcunha-usds know when it's done.

[rtwell]

non-GH compressed images: VA-sub-brand-guidance.zip

I think it might be good to include the page 9 as well? here it is if we want it:

[jenniferlee-dsva]

Hi @KevinMHoffmanUSDS - updated - fixed some minor grammar issues and capitalizations.

RE @rtwell's example images, I recommend making it clickable and linked to the Web Governance url for the VA Graphic Standards, so it always points to their up-to-date version: https://www.va.gov/vapubs/viewPublication.asp?Pub_ID=683&FType=2

custom-logos-design-system-071419.docx

[KevinMHoffmanUSDS]

OMG thanks for doing this on the weekend, @jenniferlee-dsva, and thanks for the images, @rtwell!

I'll make these changes, add the links you reference, and work with Jared to push it into prod. Cheers, y'all!

[KevinMHoffmanUSDS]

@jaredcunha-usds Hey Jared! The above issue is ready to go. I'd love to do this myself, if you could give me a quick pointer on how to add the page and update the navigation. I'll make sure the images are in the correct folder now.

If you don't have a chance to give me a quick pointer (or point me to where you've already written this up) feel free to push this into production.

[rtwell]

small detail, but i think significant—I would recommend changing "Using custom logos" to "Custom logos". I don't know why, but the former feels too…permission-y to me. am i crazy?

[KevinMHoffmanUSDS]

Logos.md has been moved into production.