Sarah Dras­ner talks to one of the de­sign­ers reponsible for rev­o­lu­tion­is­ing gov­ern­ment web­sites

net magazine - - CONTENTS - Maya ( www.maya-be­nari.com) is a de­signer and fron­tend de­vel­oper at 18F, which is part of the Gen­eral Ser­vices Ad­min­is­tra­tion (GSA)

Maya Be­nari ex­plains how she helped rev­o­lu­tionise gov­ern­ment sites in the US

SD: You re­cently helped launch the US gov­ern­ment’s new web de­sign stan­dards (see page 47). How did this come about?

MB: I’m part of an or­gan­i­sa­tion called 18F, which is a new dig­i­tal shop in­side the gov­ern­ment. 18F is a grow­ing, emerg­ing tech­nol­ogy piece. The web stan­dards were a huge col­lab­o­ra­tive ef­fort be­tween 18F and the United States Dig­i­tal Ser­vice (USDS), with help from a wider au­di­ence of agen­cies.

SD: Did you use any li­braries to build your com­po­nents?

MB: Go­ing into this, we said, ‘Here’s our chance to start from scratch. How would we build this with­out ev­ery­thing else that ex­ists?’ We really like us­ing Bour­bon, as well as Neat for its grid sys­tem, so those are some li­braries we’re us­ing. Other than that, we pretty much built it from scratch. We did an­other cus­tom grid sys­tem on top that was based on Neat, so you can use classes if you need them. If you want to use more Neat in­cludes, you can.

SD: It sounds like flex­i­bil­ity was really im­por­tant to you ...

MB: The idea was to pro­vide a really solid foun­da­tion for de­vel­op­ers, but to also pro­vide flex­i­bil­ity if they want to change things. We wanted to make ev­ery­thing really mod­u­lar and com­po­nen­tised so you only im­port what you need to use. We started with ob­ject-ori­ented CSS and names­paced ev­ery­thing. That way, if other peo­ple come in with dif­fer­ent li­braries or their own CSS, it doesn’t con­flict with our CSS.

We are mo­bile-first, and we’re us­ing a lot of vari­ables so you can just up­date your brand colours. In my opin­ion, it’s the way you should be do­ing things, but I guess in con­text of the gov­ern­ment, it’s not very com­mon.

SD: Of course, when you put any­thing out that’s go­ing to be this widely used, it’s go­ing to have a ton of feed­back …

MB: I would say, even on a small scale try­ing to bring in more fron­tend devs to work on the project helps. I really needed to find peo­ple to help me out and re­view my code. 18F has th­ese things called guilds. We have a fron­tend guild, which worked on our CSS cod­ing style and lan­guage. Those stan­dards give us a com­mon lan­guage for con­tri­bu­tion.

SD: There have been times where gov­ern­ment sites like Health­Care.gov went down be­cause there wasn’t a strong enough col­lab­o­ra­tion be­tween tech and the gov­ern­ment, so this seems like a big step in the right di­rec­tion …

MB: Ac­tu­ally, the thing with the gov­ern­ment health­care site was one of the light­ning bolts that helped ev­ery­one re­alise this was im­por­tant. We couldn’t just keep do­ing it the way we’d been do­ing it for decades. We’re work­ing on a bunch of projects now, ev­ery­thing from im­mi­gra­tion to health­care and the VA, which deals with get­ting veter­ans their ben­e­fits. The whole idea is to make an im­pact on how the pub­lic ex­pe­ri­ences govern­men­tal dig­i­tal ser­vices, and fix what’s bro­ken.

SD: If you’re deal­ing with a gov­ern­ment web­site, typ­i­cally it’s some­thing you have to do. If that user ex­pe­ri­ence is bad, it can really af­fect peo­ple’s lives.

MB: Work­ing on this definitely touches peo­ple’s lives in a very real way. For pri­vate com­pa­nies, their main agenda is to in­crease prof­its or click-through rates.

For the gov­ern­ment, the cus­tomers don’t have a choice. They can’t use an­other, bet­ter, more us­able thing. A lot of times they’re left feel­ing really frus­trated or help­less be­cause things are not made with their needs in mind and they can’t com­plete the tasks they need to.

SD: What do you think were the main prob­lems you had to tackle?

MB: Things are made to re­flect weird bu­reau­cratic hi­er­ar­chies, and tied into old ways of do­ing things. There’s a lot of fear of change. It’s really im­por­tant work, and I think it’s a new move­ment. This is the first time there’s been a huge amount of mo­men­tum for tech­no­log­i­cal change in gov­ern­ment, and it’s really amaz­ing.

The best of the best dig­i­tal peo­ple are flow­ing in. 18F started up with just a few peo­ple 18 months ago, and we’re at over 150 peo­ple to­day. There are prob­a­bly over 50 peo­ple at USDS, and they have th­ese dig­i­tal teams they’re in­ject­ing all across gov­ern­ment. Peo­ple are really feel­ing mo­ti­vated by that. Some of th­ese peo­ple are com­ing from big com­pa­nies, be­cause this is the type of work that’s worth­while for them.

SD: Giv­ing de­sign­ers some con­fine­ments to work within means they all start to share the same voice ...

MB: We’ve had a lot of feed­back through GitHub, and we’re try­ing to keep up to date with any is­sues. Some agen­cies are pro­hib­ited from us­ing GitHub, so the chal­lenge re­mains how to in­volve them. We’re think­ing about old fash­ioned email and pe­ri­odic meet­ings, so peo­ple can come in and hear what’s hap­pen­ing. That’s some­thing I think would be fun go­ing for­ward.

SD: It’s very im­pres­sive that you were able to use gov­ern­ment colours in a clean, beau­ti­ful de­sign and have it meet ac­ces­si­bil­ity stan­dards.

MB: In the pal­ette sec­tion, we have ex­am­ples of how to use the colours, which have been tested for con­trast based on WCAG 2.0. Ac­ces­si­bil­ity is prob­a­bly one of the key dif­fer­en­tia­tors be­tween what we’re do­ing and some other frame­works out there. For in­stance, a lot of de­vel­op­ers like Boot­strap be­cause it’s so com­pre­hen­sive, but es­sen­tially you have to re­jig the whole thing to make it ac­ces­si­ble. Here, you get it from the start, from colours to the code. We have that doc­u­men­ta­tion with each com­po­nent you’re go­ing to use.

SD: Have you had peo­ple adopt it? How has that gone?

MB: It’s a lit­tle hard to keep track of. We have a spread­sheet for the dif­fer­ent sites that have started us­ing it. There’s about 34, with new web­sites us­ing it ev­ery week. One of the most fas­ci­nat­ing to me was us­ajobs.gov. If you want to work in the gov­ern­ment, you have to go through them, and it’s a chal­leng­ing ex­pe­ri­ence. But they have a whole team that’s been charged to redo it. They blew our minds by tak­ing our guide­lines and making their own de­sign sys­tem based off it. They clearly out­lined where they were go­ing to pur­pose­fully de­vi­ate from us, be­cause they have dif­fer­ent needs, and then where they were go­ing to have new com­po­nents that they thought could be folded into the main one. It’s been su­per-cool to see their take on it.

SD: Are most peo­ple fol­low­ing th­ese guide­lines to the let­ter, or tak­ing them and go­ing off on their own?

MB: The com­mu­nity has been to­tally em­brac­ing it. Some peo­ple are do­ing amaz­ing jobs, and their im­ple­men­ta­tion of it is bet­ter than I ex­pected. Of course, there are a few ex­am­ples where peo­ple just had to make some­thing quickly and I’m cring­ing a bit. I might want to rein a few things in.

If peo­ple don’t see what they want, they’ll just make it any­way or they’ll make it hastily, and then I think, ‘Wait! What are you do­ing?’ But that’s the beauty of it, it’s flex­i­ble and we’re happy to see so many peo­ple want­ing to take it up.

SD: How will you ac­com­plish up­dates in the fu­ture when a bunch of dif­fer­ent web­sites are us­ing it?

MB: Right now we’re es­sen­tially offering HTML, CSS, and Sass for peo­ple to add to their site, so one of our next steps is to really think about dis­tri­bu­tion. We’ve al­ready cre­ated a Ruby gem, so some­body can add that and have the style guide on their project. We’re work­ing on pub­lish­ing this as a pack­age to NPM, so you can just ‘npm in­stall web-de­sign-stan­dards’ and have this on your project.

Then when we do an up­date, you’ll be able to change what version you’re us­ing from the com­mand line. We’ve started keep­ing a really de­tailed changelog that uses se­man­tic ver­sion­ing, so you can see whether the changes are just patches, a new fea­ture, or a break­ing change.

SD: What’s the next step?

MB: Right now we’re at the al­pha stage, and it needs a lot more time and TLC be­fore we can say con­fi­dently that this is a 1.0. We don’t plan on chang­ing the markup too much. The goal is that it’s go­ing to be solid, which is an­other thing that can help mit­i­gate some up­dates mov­ing for­ward. The idea of en­cap­su­lat­ing some of the markup into a JS frame­work is in­ter­est­ing, but on the flip side, that could make things more com­pli­cated be­cause we want our sites to be able to work with­out JavaScript. We’re definitely think­ing about it, but only time will tell.

“I think it’s a new move­ment. This is the first time there’s a huge amount of mo­men­tum for tech­no­log­i­cal change in gov­ern­ment, and it’s really amaz­ing”

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.