Let’s Redesign the U.S. Government | CIA.gov

In the past few years, 18F and The U.S. Digital Service released the U.S. Digital Services Playbook. I put it to the test, specifically the web design standards, and in the process found out a great deal about the current state of our government’s digital presence.

We the developers, product designers, visual designers, etc. who choose to work in government are often stereotyped. What competent, skilled individual would choose such a bureaucratic deluge of a career? I only need to bring up the horrific launch of “Healthcare.gov” for most people to get the idea. From the charred ashes of a colossal failure, beacons of hope emerged. Mikey Dickerson, of the Healthcare.gov rescue team, became the leader of the new U.S. Digital Service and perhaps even more importantly…

President Obama and the entire U.S. government were forced to invest in creating more effective digital services.

Since then, I have seen a complete turn-around in the development of applications. “Simple user experience”, “intuitive user interface”, and “open source” are now guiding principles more frequently passed DOWN the leadership chain. This isn’t to say that now the system is perfect; that we’re all practicing agile development and we’ve caught up with the private sector. Absolutely not! Far from it. But the redeeming quality is that people in our highest offices now have a stake in creating a better digital government.

The Web Design Standards

Now unless you’re a government UX researcher, you probably aren’t seeing the scope of this undertaking. You probably don’t use federal government websites all that much, and when you do, you probably aren’t interested in or care how it looks. Luckily for us “play 13” of the playbook is “Default to Open”. In other words, 18F will show us their projects they have in different stages of development and provide links to alpha and beta sites here.

18F Site: Extractives Industries Transparency Initiative (alpha)

After going through every site in the various stages of development, I was beginning to get a clear picture of the design standards at work. However, the services and examples weren’t exactly “high-profile” entities.

Easy enough… I’ll test it myself with a household name.

The Design Prompt

Without deeply assessing content and function, apply the U.S. Web Design Standards to CIA.gov.

Screenshot of CIA Homepage

CIA.gov is far from the worst design I have seen, but it isn’t in line with many of the plays set forth by the U.S. Digital Service. I realize that this site doesn’t embody the typical service-based content that 18F is targeting with their examples. However, I wanted to show that this living pattern library can be successfully applied to a static, content-based government website.

The Redesign

CIA.gov Home

As with many redesigns, it was difficult to step away from my natural tendencies to lean towards my current style/trend obsession. However, after familiarizing myself with the Playbook, I found it easier to iterate and build off of the visual standards:

“A typography suite and color palette designed to meet the highest standards of usability and accessibility, while setting a consistent visual voice of credibility, warmth, and ease-of-use across U.S. government digital platforms.”
  • Color — Gradients and excessive chrome make way for bold, flat blocks of color. Rich shades of blue, cool greys, and generous amounts of white space organize content with clear hierarchy. It’s a patriotic, American palette that still harkens to the proud history of the CIA with a sharp eye to the future. Soon, pieces of shared palettes with the likes of NSA.gov, DNI.gov, and DHS.gov only strengthen the motif of the “shared intelligence mission”.
  • Typography — Intelligence agencies tend to gravitate toward mono-spaced typefaces as a primary branding tool. It was offspring of the typewriter age, when intelligence documents were non-digital and easily recognizable in tone and visual style. In an attempt to mimic those same qualities, Courier-like typefaces are often used as the go-to typeface for agencies in their current brand strategy. However, these fonts are often poorly formatted and often misused as headers, leading to an illegible mess of equally spaced characters and confusing hierarchy. Enter the new font stack of Merriweather and Source Sans Pro.
A simple serif and sans serif combination designed to communicate warmth and credibility. Strong Merriweather heading weights offer clear information hierarchy and when paired with Source Sans Pro’s easy-to-read body text, create a clean and professional feel.
  • Layout — The new layout is predictable and familiar. Structural and visual consistency creates an experience which provides users with a high level of familiarity and comfort. Content is divided into familial sections that guide a user down the page.
Featured Story Page

With a little time, some light reading, and willingness to change, the government web can be attractive, useful, and accessible. However, I am just illustrating one piece of a greater whole. User experience experts, developers, and software engineers also need to answer the call and question the status quo in every level of government.

“But this is how we’ve always done it.”… Not anymore.