Sarah Drasner talks to one of the designers reponsible for revolutionising government websites
Maya Benari explains how she helped revolutionise government sites in the US
SD: You recently helped launch the US government’s new web design standards (see page 47). How did this come about?
MB: I’m part of an organisation called 18F, which is a new digital shop inside the government. 18F is a growing, emerging technology piece. The web standards were a huge collaborative effort between 18F and the United States Digital Service (USDS), with help from a wider audience of agencies.
SD: Did you use any libraries to build your components?
MB: Going into this, we said, ‘Here’s our chance to start from scratch. How would we build this without everything else that exists?’ We really like using Bourbon, as well as Neat for its grid system, so those are some libraries we’re using. Other than that, we pretty much built it from scratch. We did another custom grid system on top that was based on Neat, so you can use classes if you need them. If you want to use more Neat includes, you can.
SD: It sounds like flexibility was really important to you ...
MB: The idea was to provide a really solid foundation for developers, but to also provide flexibility if they want to change things. We wanted to make everything really modular and componentised so you only import what you need to use. We started with object-oriented CSS and namespaced everything. That way, if other people come in with different libraries or their own CSS, it doesn’t conflict with our CSS.
We are mobile-first, and we’re using a lot of variables so you can just update your brand colours. In my opinion, it’s the way you should be doing things, but I guess in context of the government, it’s not very common.
SD: Of course, when you put anything out that’s going to be this widely used, it’s going to have a ton of feedback …
MB: I would say, even on a small scale trying to bring in more frontend devs to work on the project helps. I really needed to find people to help me out and review my code. 18F has these things called guilds. We have a frontend guild, which worked on our CSS coding style and language. Those standards give us a common language for contribution.
SD: There have been times where government sites like HealthCare.gov went down because there wasn’t a strong enough collaboration between tech and the government, so this seems like a big step in the right direction …
MB: Actually, the thing with the government healthcare site was one of the lightning bolts that helped everyone realise this was important. We couldn’t just keep doing it the way we’d been doing it for decades. We’re working on a bunch of projects now, everything from immigration to healthcare and the VA, which deals with getting veterans their benefits. The whole idea is to make an impact on how the public experiences governmental digital services, and fix what’s broken.
SD: If you’re dealing with a government website, typically it’s something you have to do. If that user experience is bad, it can really affect people’s lives.
MB: Working on this definitely touches people’s lives in a very real way. For private companies, their main agenda is to increase profits or click-through rates.
For the government, the customers don’t have a choice. They can’t use another, better, more usable thing. A lot of times they’re left feeling really frustrated or helpless because things are not made with their needs in mind and they can’t complete the tasks they need to.
SD: What do you think were the main problems you had to tackle?
MB: Things are made to reflect weird bureaucratic hierarchies, and tied into old ways of doing things. There’s a lot of fear of change. It’s really important work, and I think it’s a new movement. This is the first time there’s been a huge amount of momentum for technological change in government, and it’s really amazing.
The best of the best digital people are flowing in. 18F started up with just a few people 18 months ago, and we’re at over 150 people today. There are probably over 50 people at USDS, and they have these digital teams they’re injecting all across government. People are really feeling motivated by that. Some of these people are coming from big companies, because this is the type of work that’s worthwhile for them.
SD: Giving designers some confinements to work within means they all start to share the same voice ...
MB: We’ve had a lot of feedback through GitHub, and we’re trying to keep up to date with any issues. Some agencies are prohibited from using GitHub, so the challenge remains how to involve them. We’re thinking about old fashioned email and periodic meetings, so people can come in and hear what’s happening. That’s something I think would be fun going forward.
SD: It’s very impressive that you were able to use government colours in a clean, beautiful design and have it meet accessibility standards.
MB: In the palette section, we have examples of how to use the colours, which have been tested for contrast based on WCAG 2.0. Accessibility is probably one of the key differentiators between what we’re doing and some other frameworks out there. For instance, a lot of developers like Bootstrap because it’s so comprehensive, but essentially you have to rejig the whole thing to make it accessible. Here, you get it from the start, from colours to the code. We have that documentation with each component you’re going to use.
SD: Have you had people adopt it? How has that gone?
MB: It’s a little hard to keep track of. We have a spreadsheet for the different sites that have started using it. There’s about 34, with new websites using it every week. One of the most fascinating to me was usajobs.gov. If you want to work in the government, you have to go through them, and it’s a challenging experience. But they have a whole team that’s been charged to redo it. They blew our minds by taking our guidelines and making their own design system based off it. They clearly outlined where they were going to purposefully deviate from us, because they have different needs, and then where they were going to have new components that they thought could be folded into the main one. It’s been super-cool to see their take on it.
SD: Are most people following these guidelines to the letter, or taking them and going off on their own?
MB: The community has been totally embracing it. Some people are doing amazing jobs, and their implementation of it is better than I expected. Of course, there are a few examples where people just had to make something quickly and I’m cringing a bit. I might want to rein a few things in.
If people don’t see what they want, they’ll just make it anyway or they’ll make it hastily, and then I think, ‘Wait! What are you doing?’ But that’s the beauty of it, it’s flexible and we’re happy to see so many people wanting to take it up.
SD: How will you accomplish updates in the future when a bunch of different websites are using it?
MB: Right now we’re essentially offering HTML, CSS, and Sass for people to add to their site, so one of our next steps is to really think about distribution. We’ve already created a Ruby gem, so somebody can add that and have the style guide on their project. We’re working on publishing this as a package to NPM, so you can just ‘npm install web-design-standards’ and have this on your project.
Then when we do an update, you’ll be able to change what version you’re using from the command line. We’ve started keeping a really detailed changelog that uses semantic versioning, so you can see whether the changes are just patches, a new feature, or a breaking change.
SD: What’s the next step?
“I think it’s a new movement. This is the first time there’s a huge amount of momentum for technological change in government, and it’s really amazing”