advertisement
advertisement

Under Trump, WhiteHouse.gov was a disaster. Biden’s team revamped it in 6 weeks

The White House website pulls in new accessibility features and refreshes the Biden campaign branding for a traditional-meets-modern look.

advertisement
advertisement

For a glimpse of how the Biden Administration plans to govern, look no further than the White House website.

advertisement
advertisement

The new site has lots of negative white space and is designed to be accessible to everyone from Spanish speakers to citizens with vision impairments. “WhiteHouse.gov ends up being the front page of the federal government,” says White House director of digital strategy Rob Flaherty, whose team would like users to consider WhiteHouse.gov a digital front door. And it all came together in just six weeks—an unprecedented feat for a government website.

[Screenshot: Whitehouse.gov]
It’s a stark contrast from the previous administration’s site, which used gold accents along with dark blue and white. Under President Donald Trump, a Spanish version of the site was removed (which the Biden administration reinstated). As for navigation: The Trump-era site put zero effort into making content easy to find and visually compelling. On a page about former U.S. presidents, the Trump site opted for a list rather than a visual grid with images.

The design matters because the White House website is a place for people to learn about the administration and its agenda. It’s also a place for people to find jobs. Flaherty says some of its most trafficked pages are about the history of the White House and biographical information.

advertisement
advertisement

“We thought that WhiteHouse.gov is a critical tool and we applied our work through that lens,” Flaherty says. It also fills reference gaps that social media can’t. “For us, social media is critical,” he says. “But that doesn’t mean you can’t get the owned platforms right and that they aren’t part of our system of communication. We are reaching people wherever they are—and then when they want to find more information, when they want to find out how they see themselves in our agenda, they go to WhiteHouse.gov.” The Biden Administration revealed the new, official White House government website at 12:01 p.m. on Inauguration Day.

The Biden administration brought on creative agency Wide Eye in mid-December to handle the site design. Though you may not know Wide Eye’s name, you’ve certainly seen its work: The creative agency has been quietly making its mark on political branding over the past year. It designed the branding for Kamala Harris’s primary campaign, the Democratic National Convention, the Biden transition site Build Back Better, and now the official White House site, in collaboration with Flaherty, White House creative director Carahna Magwood, and senior creative advisor Robyn Kanner. Web development firm 10up was a partner on the project.

The site development was a sprint, according to both Flaherty and Wide Eye founder and creative director Ben Ostrower. The teams had a late start. They first met in mid-December with “literally no branding,” Flaherty says.

advertisement

This was in part because the entire transition process was delayed. The General Services Administration didn’t ascertain Biden’s win and launch the formal transition process until November 24, which restricted the Biden transition from coordinating with the federal government. Even so, “it took some time for gears to turn after that,” says Andrew Nacin, a web developer formerly with the U.S. Digital Service who led the WhiteHouse.gov effort for the Biden-Harris transition team. The Biden team finally gained access to the Trump administration’s WhiteHouse.gov contractors around January 6, according to Nacin. But by that time, they had built most of the site on their own.

The lack of coordination was unprecedented. No new administration had built the WhiteHouse.gov site from scratch before Inauguration—until now, says Nacin. He adds that small changes, like adding pronoun options to the White House contact form, “required us to gingerly work with the Trump administration just days before inauguration to update the backend systems that handle letters to the President.” Ultimately the team built the site in six weeks, a process which Nacin says would normally take six months.

The website brand is itself a contrast to that process. Both functionally and metaphorically, “accessibility was top of mind,” according to Flaherty. Ostrower says, “Our whole pitch, that we assembled in about two to three days, was the idea that the White House is the people’s house.” The people’s house concept formed the foundation of the brand, and from there the Wide Eye team mocked up the site design in 72 hours. That approachability plays out in a renewed emphasis on digital accessibility and in the visual brand, both of which draw a contrast to the previous administration.

advertisement

[Screenshot: WhiteHouse.gov]
The site introduces new features like high-contrast dark mode and large text options, which are both important for legibility and are especially important for users with visual impairments. It brought back a Spanish language version of the site, retired by the Trump administration, and features new details like inclusive pronoun dropdowns for its contact menu. Flaherty’s team also conducted a content audit. “We took down anything that gave the wrong impression of what our administration is about,” he says.

[Screenshot: WhiteHouse.gov]
Ostrower sees the site as an important symbol of the new administration. “That’s why the accessibility and inclusion elements are so crucial. We wanted to demonstrate that there’s a set of values at work,” he says. But it wasn’t just about optics. His team wanted to “demonstrate that the values of accessibility and inclusion aren’t just things that you pay lip service to but they’re hard technical things that are important,” he says.

That includes fast load times, legible fonts, and simple site navigation. “We wanted to reach the widest audience possible and ensure users have access to this information,” says Wide Eye technical manager and accessibility specialist Erica Andersen, who led the design of accessibility and usability features like site navigation and its performance on mobile.

advertisement

We asked an accessibility expert to critique the site. She was largely impressed. “There are accessibility basics that anyone should have . . . so anyone can get through the website,” says Jenny Lay-Flurrie, chief accessibility officer at Microsoft. She checked the accessibility of WhiteHouse.gov using a free tool called Accessibility Insights and found the site to be navigable with assistant technology and found zero issues overall. “It was very clear that accessibility had been considered,” she notes, adding that there is still more that can be done to “continually up the bar of inclusion,” such as introducing sign language for videos.

Magwood, Ostrower, and Wide Eye associate creative director Ida Woldemichael also emphasized accessibility through graphics. Flaherty recalls that during the planning process they wanted the website to convey a sense of warmth and approachability. This plays out in features like the treatment of images, which have rounded corners, and the brand’s expanded color palette, which will introduce what Ostrower calls “earthy and organic” tones to social and print graphics over the coming months. He adds that the colors, with names like redwood and parchment, speak to Biden’s more down-to-earth personality, and draws a contrast with Trump’s gilded brand. They’ll also introduce gradients—a hallmark of Biden’s campaign branding—that they say are symbolic of light being let in and walls torn down.

[Image: courtesy Wide Eye Creative]
Some ideas from Biden’s presidential campaign have been carried through subtly. The team emphasized the idea of “building” from the campaign’s Build Back Better message with blueprint-like line illustrations on the site, Woldemichael says. The site logo, developed with Dallas-based illustrator John Mata, has a flat and architectural style, which Magwood says reflects a “focus on building and our move toward more modern digital communications.” (Of course, most organizations flatten their digital branding because it reads better on small screens.) The digital White House logo is one version of several that will be used in different applications, including print.

advertisement

[Image: courtesy Wide Eye Creative]
The designers additionally carried over the campaign fonts but switched their placement on the page so that the more traditional serif font Mercury takes center stage, and the modern sans serif Decimal is secondary. “It’s all the same typography of the campaign,” Ostrower says. “It’s just inverted to give everything a more official quality and more of the seriousness that’s called for with government work.”

After all, Biden is president.

About the author

Lilly Smith is an associate editor of Co.Design. She was previously the editor of Design Observer, and a contributing writer to AIGA Eye on Design.

More