Maya gives us an overview of the work she’s doing with 18F on a set of standards that are improving the usability and accessibility of US government websites.
United States


00:00:10hi everybody welcome to another episode of the style guides podcast a podcast dedicated to all things Design Systems style guides pattern libraries and all that good stuff my name is Brad Frost and today we're absolutely thrilled to have with us Maya ben-ari Maya how are you
00:00:32I'm doing very well thanks so much I'm happy to be here a little bit of rain going to get all of all of our schedules sort of in line but I'm glad we are finally having a a chance to chat
00:00:47yeah me too I'm I'm excited for for this conversation and see what comes up absolutely Alice a bit about your background and sort of you know where you're at and what you been up to these last couple years and sort of how you got into this whole so do if you know design system world
00:01:12shirt so my background is as a web designer and I started just him making websites for nonprofits mom and pop shops in different Design Studios and things like that it is in the work with a non-profit was really exciting to me and I and I kept thinking about how can I use technology for good and some that I did a fellowship attitude for America meaning of using technology to help improve cities of governments and from that I thought to myself you know why me why not no expand this to the Federal in 18s was a new organization that was forming a new new office in the general Services Administration so I applied for that and got into to that rule as a front end designer and have been there for the last two-and-a-half years and from my time there than working on a wide array of
00:02:12projects from touch a lot of people in the public to things that are more internal as well as this little thing you may have heard called the u.s. web design standards
00:02:21that's awesome and I'm just running like what is 18 F what kind of what's a scope what do they do what do they do
00:02:31sure so 18f is an office inside of the general Services Administration and we're sort of like a technology shop inside the government that other agencies can hire to help build buyer understand how to use different aspects of new technology in and websites and web app so we're trying to bring a lot of him water and best practice informed design and development into the government that's fantastic what a fantastic resource to have available I think a lot of organizations you're so to seeing in the private sector for sure are like starting to so they get the hint that oh yeah we need to invest in this in technology and I'm in a much bigger way you know historically sort of external agencies you know should have played that that role but it's I think what we're seeing as is and I think 18f is a
00:03:30is a testament to that this sort of you know investment in in technology so I getting getting those people a lot closer to to the the organization self
00:03:44yeah exactly in the lot closer to the the root of the problem is well rather than coming from outside well speaking of the root of the problem about how you been sort of working over these last couple years to establish easy these u.s. web design standards what what what was that born of where did this where did this whole initiative come from the sirta Creative Design system for the u.s. government
00:04:16sure so you know as many people might not think of any government websites it's not typically you know thought of is like the best experiences right now in terms of usability 770 yeah but I mean there is a tremendous amount of government Digital Services out there that touched you know millions and millions of people from you know having to try to get your benefits after your view in the armed services or trying to apply to be a US citizen and immigration office so there's really touches a lot of people and I think collectively a group with ATF and the US digital service used Adult Services thought that we could be doing better even within ourselves how we work on projects as well so we asked ourselves you know this question you know could we create you know a set of tools and resources to help you know transform and drive you know.
00:05:16websites for word and really see if we can we could help make something that kids could make a difference and improve you know the experience for the public as well as developers and designers within government so we we started working together on on this initiative to do that at all
00:05:38that was in the starting point of ATF as an organization it kind of started From a sort of another kind of fellowship program that was inside the government and the people there decided that they wanted to continue working on these projects and in insulating up was established to kind of be a bit more long term as well as instead of just coming in and out that's great would you say that that you know this this whole notion of a toolcat or something it is like some of the battered likes scaling yourselves a little bit and it's just so massive in an 18ft so far as my understanding of it is is a little you know not that many people right so there's there's only so many of you and there's so much ground to cover you said it had to destroy the scale yourself in your brains is that a fair assessment or is that is that how you were thinking about that or is that off the mark
00:06:37do that. Stuff definitely fair I think a lot of it is also sort of like not wanting to try to recreate the wheel every time we have to eat at work on a new project a lot of it is like going from Project one project to another lyrics to making sure like there is some kind of thing of consistency and how how things are how things work and just you know hopefully just trying to make things easier for people in and make this process happen a bit faster for actually creating these web sites and services so people can you know Focus their time and energy on more more vital problems boat why you talking about I think I like different components that you're wack you and one of them was a date pick up and you were looking at other examples on other sites of what they were doing and maybe you found I like the fact that you can't they pick her and you talking about like the pros and cons of that and you taking some of that researches while I know it's like it's so awesome that there is like two governments
00:07:37the kind of sharing resources and in trying to make things better for everyone. Just it was such a nice example
00:07:45yeah it's been amazing and they're they're very supportive of us we are big fans of them there other governments from Canada to Turkey who are in a reaching out to us to try to get involved so it's like this whole kind of global community of trying to move you know public Digital Services Ford for are in a respective government so it's really really fun really exciting encouraging and I think just even so they're taking a step back from that I mean I got Obviously good enough governments have are such you know Mine Fields And there's a lot of sort of red tape to sort of move through but like really at the end of the day these you eyes are you know text images Farm Fields datatables it's like Vari Vari you eyes are are are fine that you know if you could serve wrap your wrap your hands around I'm so it's like and so much of this stuff like a date picker like a form
00:08:45location and stuff like either is settled science or or should be settled science so it's like I love how you said it's like a let's let's just sort of extract that those sort of best practices are a set of codify those best practices so that the team considered focus on you know maybe like yeah lopping off you know five different form fields from from a flow or something like that rather than going oh how are we going to handle validating this email address or something
00:09:17yeah right that's that's exactly right and you know by doing that it just it saves a lot of time so you don't have to think of it you know how should this required label sitting next to next to it like is it something that we've already you know tested and make make sure that you know it's the best in most usable pattern so you don't have to worry about you know thinking that through again right so I would love to hear from you just sort of like so okay so there's this idea of like let's make a toolcat let sort of go down this path and you've written this grade article describes this some sort of story of of the design system and not just like totally like rehash it here but it looks like you talk to lots of users in inside of the creation of that sin what I'd like what I'd love to hear from and and this is her something that I seen in my own work with Design Systems is that users
00:10:17design system they're sort of multiple set of sets of users right there's the end-user is the actual certificate in your case the citizens on the other end of the screens that are actually instead of using using the ui's in order to get something done but then there's sort of like the users that are that the People Like Us right the designers in the developers that at that will ultimately be so you know ingesting a design system instead of making you sad that can you talk about like how at the beginning of this sort of process like who are you talking to in like what were you talking about instead of how did that those who have conversations shaped what tools you are going to put in the tool kit
00:11:02sure so I think in the beginning of the project one of the first things that we did is that we all just decided to meet together with other designers and developers from other agencies in Washington DC and from there we did it we did a few workshops including just like you know what patterns and components do we all need what do we all use to make our our websites are services and that you know we just started writing on Post-its and throwing things on walls and seeing from that you know what kind of pattern started to merge where do the commonalities kind of a line and we use that to kind of help inform you know what we were actually going to start to build and and through that also from from my perspective is a front end developer I was very curious about you know what what should the coding standards be for this in in how do you potty please everybody and the thing is you really can't so it's sort of this this territory of of wanting to to to just create Ruiz
00:12:02and understandable you know ideas are decisions for for when you make things in know cuz I'm in one hand if you are too prescriptive you can turn a lot of people off and but if you know you're too loose and you know what's the point of it anyway yeah but anyhow so after we kind of started to come up with some you know patterns of what we actually wanted to build our team looked at sort of the the top 10 top level. Gov domains using analytics. Usa.gov and just you know what are the most visited US Government site and through that kind of didn't interface inventory of what what we also saw in common they're so from that was heard of combined that side with the in person at a workshop to cut determined what would our first sort of limited set of components be and you know we had in the beginning of this understanding was that we had 3 months to kind of put out an MVP if not just know what the system is
00:13:02but you know the website for the system so everything all together and so it was it was definitely a tall order and I think that time frame also you know created a limitation that maybe helps us kind of Canada still what were the most important you know elements and patterns and and things that we needed to just build something and we knew that we could we could always continue and expand from there but it really helped us figure out you know what were the things we wanted to kind of you know make sure we had our things that we know maybe weren't as necessary and such a nice price that you could get together and do that and just sit things on pie sit nights and kind of decide how you how you want to go about building it testing eat each kind of component before you publish in Nebraska testing and accessibility to stay off like how how do you go from building a component to make a show that
00:14:02it meets audio standards
00:14:04sure so from like the very beginning of this process we had you know ux designers and researchers visual designers and then you know front end people so at the end of this process we kind of went a little bit step by step and we had sort of the ux designers kind of come up with you know patterns and wire frames as well as usability and some accessibility guidelines and confirm that and if they did that also using a lot of kind of enough third-party research like Nielsen Norman group in a lot of things because it was 3 months you know we didn't really have so much time to actually test each component in each piece with users and then from there you know we that got passed on to the visual designer who you know made sure that it in here taking it whatever right into the brands in the visual aesthetic that we had as well as you know things like contrast and making sure the colors in are accessible and then from there I would get passed on to another friend and people are your people like me and to make sure that I mean I'm starting
00:15:04very semantic HTML and then let me know later and things on as I go and then we also at 18 of have sort of an excess ability expert and at the time we we just went through with with him and his kind of hundred Point checklist of of making sure each pattern was with accessible but you know we also rely on a lot of tools and disability checks I kind of just give us a first pass to make sure that you know yeah things you know things are all automated that we can check that we know and and Visually for that as well I know right onto the develop its that your old kind of thinking about this whole thing
00:15:58yeah and then I think so so I think and then in the use of these patterns when other agencies are using it on their products that sort of when they can get into the nitty-gritty of of oh how is assessing users and then hopefully bring bring that knowledge back to us too so we can continuously improve how we're doing this feedback loop in a bit but just like friend that is so sad like from that from the very from the get-go you had this would a 3-month window till I really get something stood up and and I love how you are saying about like how the that constraint really surf force you to focus on what sort of the that the most of it like high-impact soda patterns and stuff would be instead of just saying okay like what's like the Venn diagram of like what what's in the toll cat and like what you know I'd like the top government sites like what are they actually sort of consuming and creates like a nice little so that I
00:16:58yeah here's what are meat and potatoes patterns could be in that if we got those in the tool cat then boom you you you know you solved 80% of the pain or something like that and I think that's really important I think like just in my own work I think a lot of people see like I talk to it loads and loads of different designers developers organizations and they'll look at something like Salesforce is lightning design system where they look at something like material design and Kel my God like this is so comprehensive and this is so like I was so well done and so thorough and thoughtful and whatever and and I think that a lot that intimidates a lot of people you know that's a set of presented prevents them from ever getting started so I think it's great to hear from you from you like
00:17:49that like 3 months is is enough to sit and stand something up in like knowing knowing that it's going to be an evolutionary process but you know that's that's still tiny yeah that's still tiny compared to a lot of especially for months is let you know you can have a couple conversation I feel like I don't have it maybe I've been working with big organizations too long but it's like some things that you can you can really move at a glacial pace so cool so you started so it's stopping out these patterns you started building them out you you were also sort of building like a home for for these patterns so like a style guide that that sort of would like Zara Rangel them and present them and to two users like what throughout that process like how are you
00:18:47set of communicating with the outside world or the you know the potential users of the system and stuff like hey this is happening this is going on you know you should be informed of this and you should be getting excited about you know so does this thing existing like I found that that tends to be something where it's like if you just would have liked you know doing work in isolation or whatever and then going hey surprise here is like a thing like it didn't did you do anything so they communication wise like to just sort of you know increase the visibility of of this work
00:19:22yeah I mean that's that's a great question and I think you know the outside Communications part is something that you know where continue continuously learning from a trying different things I think from the onset of this project in on one hand like everything that we do at 18 f is open from day one this wasn't on a private repository it was public from the first the first line of code but and throughout the process like we did engage in a with with those partner agencies like I mentioned before from like a Department of Education and you know usa.gov so we had sort of like a set of of Partners through this process so if you would kind of come up with patterns me with you to post this as an issue I'm going to get Hub and kind of draw the attention to get collect feedback from but I will say that when we launched you know there 30,000 people working in government technology that work for the government so it's you know there was a lot of people that you know maybe didn't know about this or felt left out so weird
00:20:22definitely heard this response you know after when we initially launch stand and since then and I think I've been thinking about like how do we you know engage more people and make sure that that folks feel heard throughout this process and can give back so I think since then you know we've opened a public slack channel that people can join in and just talk to us about anything around us the standard see you know done more you know emailing to the government specified listservs that you know we just learned about after after launching you know this this wealth of information that that get sent through those very specific government listservs and through that it's it's still an ongoing process would you like to know blog about our work in and we've been doing these Q&A interviews since then around around people using the standard to really showcase the folks using it in and share that story with everybody so that's sort of you know how it's been going into
00:21:22what's involved in a minute I'm sure it will continue to evolve this exists in this is useful this is helping like real people and and it can help you too so like that that's sort of Design Systems and in marketing and we don't like to think of ourselves as a soda web designers and developers unless you work at like a marketing agency like we don't tend to think of ourselves as marketers but but like these initiatives Tire require all the things that go into marketing a brand new sort of product you know here here's what this thing is here's why it's getting you know why it it'll make your life easier and oh by the way here's other people that I've used it and testimonials from them and stuff it's like it's it is very sort of strange to find ourselves in those shoes but but that's what's required in order
00:22:22got something like this to take Route especially if you're dealing with like 30,000 people marketing of it doesn't end with just like you know very public you know declarations and stories that's one piece of it but I really think that part of the marketing is something you do on an individual level and I had the opportunity you know. My time here too kind of work with you know folks that you know have been in government for many more years than me and maybe have different ways of doing things and it was really sort of The Learning Experience for me to figure out how do I even position these standards you know and sometimes the way isn't by going straight at it it's about you know focusing on the problems and then what's your least cool things that can help us do that a lot quicker but it's sort of like a given take of trying to figure out how to do that cuz a lot of people will be a little bit resistant to know you coming in
00:23:22something completely new and it's sort of like how do you kind of freaked break that down and just allow the communication to happen and make sure you're on the same page of the same goal Ya Allah aligning it with with their pain is is I think a great way it's like here's what's painful to you and oh by the way here's how this thing might be able to help you
00:23:45yeah and sometimes you have to also just break it down a little bit so it's not like you have to use this whole thing but you know maybe you want to use some of these colors or Styles and fold that into your process rather than having to completely transform how you're doing things so it really depends on on each situation but I think being open-minded and flexible it's definitely been been helpful so how do people typically can see the mountains today that you suffer like an IPM package or something or or today Germany so pick and choose which parent they want
00:24:20yeah I mean there's like a huge array of of ways that people consume this know we do have an npn package so you can do it that way you can simply just download the the CSS files if you like just add that onto your side if you don't use SAS or anything like that you can consume it just by copying some some hex codes and in using putting that into your your you know your website that you're using this to get some visual design field into what you're already using and you know at 8 at 18 ft like a lot of us really use Jackalope. Which is a static site generator you check the amount of prototyping that we have to do it's it's a really great tool so we actually have liked a of a u.s. web design centers decal theme that that's been really really useful for a lot of us and then folks you know outside of government you don't have been making Drupal themes and WordPress themes and that's something that they've kind of Taken there at the initiative to do on their own and have really
00:25:20went with it and it's been a really really great to see other also other groups have made their own design system base of our design system so it's a very kind of metal thing but it's really exciting to see kind of where where they're taking it in in in and pulled some of that back in and see see what we can learn from how they're doing things to help move it forward together that's what that's fantastic I think that your touch I got something that's that's super super relevant and you know it specially the bigger the organization and specially you know the more technology that's in play it it can't be so in order to consume the design system you have to use mpm are you have to use Jack or you have to use SAS or you have to use this technology or the other and what would probably one of the biggest pitfalls ICU with organizations sort of establishing Design Systems that they hitch their wagon to like one technology like right now right
00:26:20react is huge and so a lot of people are going yeah we're going to like build our design system and we're going to build it with react and it's like that's great but like what about the like 98% of your sort of you know software that isn't right now in order to get these like button Styles you have to like 3 platform your entire thing which like Chris's big barrier to entry so it's not love like hearing like I was at like very deliberate like on your part to just go like here is as far as like we're going to take people are like it you know we're going to serve you know put out these sort of Unisom HTML and CSS and then like some of that the the tools that we were using disorder build them but like this is like meant to be sort of interpreted in in whatever way people people need to interpret it
00:27:12yeah I think I think that happened from also the initial thing of having like a big time crunch of really having to focus on what was important and that was at the HTML CSS and that was one reason with it but also you know we can't we don't have the resources to create and maintain all of these different use cases we would rather kind of stay focused on what are are you know greatest benefit is to to others and allow them to kind of take it where they need to take it but at the same time like I think you're very aware of what are the systems in platforms that people are using an in how can we help this be sort of a leverage to kind of magnify or spread in a faster through through the standard so we even have like this product that that's created inside of 18 Apple Federalist which is sort of like a static site generator thing but it is no use is Jekyll just static site generator
00:28:12click a button basically in and happiness you can have a website with a URL and in the government that's it might sound like a small thing but I think that's pretty easy button government it's like a big deal cuz there's a lot of security involved so just to have that you know very easily it's it's it's very important and we have like seems like the whole thing could be plugged into that and then people can can leverage that so it's like a big kind of web also trying to be aware of what can we wear our like the greatest benefits that we can we can leverage strengths Kasich that's so cool story of all of that sort of process of the like getting a domain so to set up like is like so you can sort of spin this up a lot quicker than you used to be able to an end and you can have that the design systems are patterns baked into that is that did I hear that right or no
00:29:09so so cool so so this thing's now been live for for how long like that like how long has the air like what versions at now and stuff like your didn't know we've been sort of mostly talking about this so I first three months but like like where is it at now in like like who's using it and insert a few know how have you been sort of managing like the sort of like you mentioned this earlier you not like the feedback from the people on the ground they're actually consuming this on sort of like getting that that's for the feedback and those thoughts would have back into the system in like how it how are you so dumb like managing that the ongoing evolution of the of the system
00:29:51sure so to answer your first question like it's been we just I just celebrated our 2-year anniversary at the the end of September I think September October so so yeah eating a lot of cake to celebrate that and I'm tired and I'm so so we're excited about that we're at version 1.4.1 we launched officially in a version 1.0 earlier this this year so it was actually tree 1.04 for a while which kind of allowed us to you know I moved a little quicker for that time so so so that's that's where we're at with that and we have to date over in 120 of projects in the government that have used this probably more that we don't know about it's just like ones that we know about
00:30:51that's touching around I think 60 million and users of the public users from don't just the last quarter like if you just count like how many not using Google analytics like how many users actually touches it's around 60 million wow that's so cool and that ended so so you know it's all these different sort of agencies are sort of you know visiting it they're consuming the system like what what happens like what does a process look like if a it is a pull it in and they live there like obvious pattern gets me like 90% of the way there 95% of the way there but I also need it to do this or or if they encounter a bug or something or it's like I've noticed that you know I I use this pattern and then you click on the label and it doesn't Focus the field or something like that like and I'm sure you have that stuff covered but let's just
00:31:51as a hypothetical like like how do people who are actually the using that the system like how did they should have noticed how to get back in touch with you and like how does that sort of how did the solutions extensions or whatever is going to make their way back into the system like how are you managing that process
00:32:11sure so they were like a few ways to communicate with us and to report those kinds of things we have like an email that people can just you know send this to to let us know certain things we are whole repo repositories on GitHub so a lot of times you know we liked folks to sort of open issues when they find bugs and and have requested and things like that so we have a very extensive list of issues I think we're at just we just went under 200 work and calling them telling me download that we have around in a 200 issues to kind of sort through and then and then lastly we also have that sort of slack group that we created so people can just chat about different things are different ideas with us as well and then actually the real lastly is that we've we started doing these calls with beds once a month where we kind of have somebody you know chat about what they're working on with the standards or their experiences with it so we can all just kind of get together once a month in in
00:33:11here out you know what what everybody's up to I started sweating when you said 200 if she's heard of the new effort around the standards recently and we're we're working on Kali know you know working through them so closing some old issues and in in trying to fix ones that have been hanging out for a while I heard that number I was like it's no big deal like that reaching 60 million people that's it that's awesome though but like you know I asked a question with like you know very specific sort of a Min mine just because I said of another one of the pitfalls that we see is is sort of you know you can create all these tools and stuff and you know if people can use those tools but if there isn't that sort of feedback loop there if there aren't aren't sort of channels in
00:34:11inaccessible channels for people to survive you know you know some Cher back then it becomes a Serta what very like assertive one-way Street and so I think that's really awesome to hear like that's what I like regular like monthly meeting you're saying I think is it is really cool to be like all this is like a time everyone knows that we're going to get together and talk about this stuff I think I like I'm starting to find that it in my own work that is like sort of really setting that stuff up early as it is a great way to sort of get it you know get that instilled in the in the culture I guess
00:34:48cool so what's what's next for the system like what what's the answer to squashing bugs
00:34:59yeah it's funny are Sprint actually these next two weeks it's called Sprint bug squash that sort of like our kind of hoping to really take another look at the standards you know after back up here 2 years of being out there and trying to understand you know what will it take to make it a more mature stable and throw bus system in platform and there's a lot of new things happening in the Design Systems Lands End and I think that you know is things around perhaps utility classes that maybe we can leverage as much as that we could happen as we could have is something that we might be dipping our toes into in the future but yeah we sort of have the new effort to kind of look at things very holistically and in kind of decide what what kind of comes next next so I would just say say to and so some some good things are going to be happening
00:35:59great yeah those utility classes are at are real nice it at I had a system level I think that they really provide a lot of value to be able to go I need this but then I just need to tweak it a little bit inside like a systems way of doing that rather than feeling like you're hacking the crap about 5 minutes but I've got one more question. And these kind of based on what you were just saying how do you measure the success of the design system like how do you know that you're doing the right thing
00:36:37I mean that's that's a very good question maybe even in a philosophical a little bit but I think that I think that the sum of the results sort of twofold you know we wanted to ensure that we are kind of creating better products or facilitating the creation of better products for the American public and that's going to be done in a way through the people using it and so I think that's the other part of the fold it's like are we are we successful are are peanut people using it how many how many projects are taking this up you know what is what is their experience of of using this and I think that's another reason why this system is still here it's because it's it's definitely helped a lot of folks kind of do their job so I think that just continuing to help people do their jobs and make their jobs in their lives easier and minimum speed up development and in what not and make sure that we have
00:37:37what more high-quality accessible code being produced is sort of like a measure of success if you will. Do you like you can started like measure that stuff right he is a like all this many people likes it floated up these accessibility bugs and has the system matures maybe you see less of those
00:38:02yeah and yeah there's different ways I think it's like you know automating some some checks on on websites and in making sure those in those come down but also that no more holistically it's it's more except accessible for anybody using it would be I would be a great thing to do man that's so cool I think that's fantastic wow what a project I can't I like reading your posts and stuff and I heard you talk at clarity about the stuff and adults are the whole time as so shaking my head it just started that the magnitude and after talking to you further about it I'm still shaking my head at the absolute magnitude of of this initiative but I think that you know it sounds like you've just really executed this thing brilliantly and it's Standing On Solid Ground and end so I guess all that's to say is as you can
00:39:02gratulations to you and your team
00:39:05thank you so much and definitely a great project to be a part of and I'm and I'm really grateful I got to kind of go on this ride and we had a you know a numerable amount of people that have been you know so helpful and in a lot of credit to along the way so very very grateful for them as well and thank you again for first set of sharing and for all the 18-ft Min stuff to continue so sharing you know these findings and sharing the actual so if you know standards themselves and all that sort of Open Source work I just think that and you know it. I think it's very much in this in the spirit of the web and and like you're saying earlier just you know government's helping governments and people helping people and designers helping designer is sort of do you know do better work in and help more people so thanks for that too
00:39:59awesome thanks so much you said very hyper and running from the things that you put up and said picking through a coyote as well and thank you anywhere I mean we're learning from all you as well so keep keep it up in the spirit of sharing love it so thank you so much for for sharing your experience with Austin and yeah let's keep it going looking forward that to start seeing what's next and and thanks for being on the show
00:40:30awesome thank you so much for listening and we'll see you next time

Transcribed by algorithms. Report Errata
Disclaimer: The podcast and artwork embedded on this page are from Anna Debenham and Brad Frost, which is the property of its owner and not affiliated with or endorsed by Listen Notes, Inc.


Thank you for helping to keep the podcast database up to date.