The U.S. Web Design Standards are currently being used on hundreds of government sites, with an audience of more than 59 million monthly users. In this eighth post in our series, we met with Jennifer Thibault, visual designer and innovation specialist, to talk about the Federal Election Commission (FEC)’s use of the Standards on fec.gov.
Standards team: How did you find out about the U.S. Web Design Standards?
Jennifer Thibault: We knew of the USWDS project early on since it was kicked off by a team inside 18F. But, we needed to get out a basic set of pages and content models on fec.gov before the Standards team released their first version.
In 2015, we started with a visual identity audit to show our team what the audience was seeing: “Here’s the 12 different ways you’re using your logo and the 25 different fonts and all the colors you probably didn’t know were being used on your site. Here’s the system you had—whether you knew it or not—and let’s make some sense out of it.”
We sent all this research to the Standards team, who at that point, was auditing federal sites to gather all the designs and styles happening across government, and the FEC became an early research participant.
When the first version of the Standards was released, we updated our patterns with components that were similar to what we already had, but kept them styled with the FEC’s new visual look and feel.
Standards team: Which components did you use?
Thibault: The footer was one of the first things we used. Every agency has to customize a little bit, but we followed the information pattern and layout. We appreciated that it was a flexible template with a few different options.
We also used the visual styling of the small search bar, the label and some of the basic layouts around the navigation, and switched to the Standards’ side navigation component once it was released.
More recently, I’ve come to the Standards site for the hero layout, which is a really good way to show an image with text over it. Accessibility is baked right in to the visual approach—it’s a smart way of having image and text and separating them to have high-enough contrast to make it accessible. Many times folks put text over an image and think it’s great until they realize it’s not legible or accessible for people who can’t see color.
I come back to the Standards, because they have easy-to-use, ready-made solutions for many design scenarios the FEC has. No need to reinvent the wheel if this looks good and works.
Standards team: Is there anything the Standards team could do to help you in your efforts?
Thibault: The FEC site has really detailed financial tables and we would love to see recommendations for data-heavy sites. It would also help to have best practices for how to handle long-form content. The FEC, like other agencies, has a lot of compliance guidance, which can result in very long pages of content—no matter how far down you distill it.
Standards team: Advice for other agencies?
Thibault: It’s really helped us to think about the U.S. Web Design Standards as a resource where we can take what’s useful and leave what we don’t need. You have a choice. Take the stuff that makes your life easier, use your agency’s styles, and leave the rest.
If you decide to add more of the components later, you’re already familiar with the resources and the team behind the Standards, because you’ve already been asking questions.
We’re looking to learn more from agencies that have used the Standards; if you’re interested in talking to us about your experience or have any feedback, feel free to send us an email at uswebdesignstandards@gsa.gov. You can also chat with the team in the new public Slack channel for the Standards!