{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - August 2022 |Digital.gov",
    "description": "USWDS Monthly Call - August 2022",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/08/18/uswds-monthly-call-august-2022/index.json","item" : [
    {"kicker" : "USWDS Inclusive Design Patterns","title" :"USWDS Monthly Call - August 2022","summary" : "Join us to learn more about design patterns and how they fit into the design system.","date" : "2022-08-18T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2022-08-18T14:00:00-05:00","end_date" : "2022-08-18T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://www.eventbrite.com/e/uswds-monthly-call-inclusive-design-patterns-aug-2022-tickets-397267256057","captions" : "https://www.streamtext.net/player?event=BIS-GSA-JY","authors" : {"dan-williams" : "Dan Williams"},"topics" : {
        
            "design" : "Design",
            "emerging-tech" : "Emerging tech",
            "user-experience" : "User experience"
            },"primary_image" : { "uid" : "uswds-august-2022-monthly-call-title-card", "alt" :
  "Title card image of USWDS logo, a multi-colored pentagon shape consisting of five triangles, centered on a black background. In white text, the first line says, USWDS Monthly Call. Below that in yellow text, the second line has the date of the event, August 18, 2022.", "width" :
  "1200", "height" :
  "628", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"content" :"\n\u003ca\n    href=\"https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-august-2022.pptx\"\u003eView the slides (PowerPoint presentation, 7.8 MB, 83 pages)\u003c/a\u003e\n\n\n\u003cdiv class=\"usa-accordion accordion\"\u003e\u003ch3 class=\"usa-accordion__heading\"\u003e\n    \u003cbutton\n      class=\"usa-accordion__button\"\n      title=\"View \"\n      aria-expanded=\"false\"\n      aria-controls=\"accordion-1\"\n    \u003e\n      \u003cspan class=\"icon\"\u003e\n          \u003csvg\n            class=\"usa-icon dg-icon dg-icon--standard margin-bottom-05\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          \u003e\n            \n            \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#content_copy\"\u003e\u003c/use\u003e\n          \u003c/svg\u003e\n        \u003c/span\u003e\u003cspan class=\"src\"\u003e\n        \u003cstrong class=\"kicker\"\u003eSlide by Slide\u003c/strong\u003eUSWDS Monthly Call - Presentation Script for August 2022\n        \u003c/span\n      \u003e\n    \u003c/button\u003e\n  \u003c/h3\u003e\u003cdiv\n      id=\"accordion-1\"\n      class=\"accordion-body usa-accordion__content usa-prose\"\n    \u003e\u003cp\u003e\u003cstrong\u003eSlide 1:\u003c/strong\u003e Hi there and welcome to the U.S. Web Design System monthly call. For August 2022 — the dog days of summer — which we\u0026rsquo;ll celebrate with some classic dog colors of browns and whites in the USWDS logo. I\u0026rsquo;ve been away from home recently, and I miss my dog.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 2:\u003c/strong\u003e My name is Dan Williams, he/him, and I\u0026rsquo;m the USWDS product lead and this is my avatar, dark hair, casual office wear. Keen observers will notice that real me got a haircut, and a bit of sun over the last few weeks. How ’bout that? Thanks for being here!\u003c/p\u003e\n\u003cp\u003eFirst, I\u0026rsquo;d like to mention that we\u0026rsquo;re recording this monthly call, so please refrain from turning on your camera. We will manually turn off any cameras to ensure the recording doesn\u0026rsquo;t show us on camera. Unfortunately, while we are recording this call, we currently aren\u0026rsquo;t able to share the video publicly.\u003c/p\u003e\n\u003cp\u003eI’d also like to remind you that all attendees must abide by the \u003ca href=\"https://handbook.tts.gsa.gov/code-of-conduct\"\u003eTTS Code of Conduct\u003c/a\u003e, which is available at handbook.tts.gsa.gov/code-of-conduct. We’ve posted the link to the code of conduct in the chat.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll be posting other links and references into the chat as we go along, and I encourage you to ask questions in the chat at any time. If any member of our team can answer your question in the chat, we\u0026rsquo;ll do so, otherwise there\u0026rsquo;ll be some time for questions and answers at the end of the hour. Also, be sure to introduce yourself in the chat as well — it\u0026rsquo;s nice to know who\u0026rsquo;s here. It\u0026rsquo;s good to have you here today.\u003c/p\u003e\n\u003cp\u003eFor those of you who find the chat distracting, you’re welcome to close or hide the chat window during the main presentation. You can reopen it later during the Q\u0026amp;A session at the end of this call.\u003c/p\u003e\n\u003cp\u003eSo thanks! And, with that, let\u0026rsquo;s get started!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 3:\u003c/strong\u003e So what\u0026rsquo;s our agenda for today? First we\u0026rsquo;ll look at a couple new site launches. Then I\u0026rsquo;ll highlight some product updates. And then we’ll introduce a concept new to the design system: inclusive patterns! We\u0026rsquo;ve got a full show today, so let\u0026rsquo;s get right into it.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 4:\u003c/strong\u003e With site launches\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 5:\u003c/strong\u003e Today we\u0026rsquo;ve got a new one from the Census Bureau, \u003ca href=\"https://bias.xd.gov\"\u003ebias.xd.gov\u003c/a\u003e, a toolkit to help teams in government understand and mitigate bias in their data and algorithms. The homepage shows shows a large field of blue, with text reading \u0026ldquo;Introducing the Bias Toolkit.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e And we\u0026rsquo;ve also got \u003ca href=\"https://goodjobs.gov\"\u003egoodjobs.gov\u003c/a\u003e, from the Department of Labor — The Good Jobs Initiative, is focused on providing critical information to workers, employers, and government as they work to improve job quality and create access to good jobs free from discrimination and harassment for all working people. The goodjobs.gov homepage shows three images. Labor Secretary Marty Walsh talks with a member of the AFSCME union, and in front of a carpenters union. And two baristas look over a cash register. Text reads \u0026ldquo;The Good Jobs Initiative.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e Congratulations, and great work! Be sure to let our team know when a new site launches, either with an email or a note on the USWDS public Slack channel!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 8:\u003c/strong\u003e So now, a few product updates.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e First up, USWDS 3.1.0 —an accessibility-focused release with a couple changes to how we handle buttons that might be considered breaking changes on your project.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e\tSo what’s new in USWDS 3.1.0?\u003c/p\u003e\n\u003cp\u003eAll non-form buttons now include \u003ccode\u003etype=\u0026quot;button\u0026quot;\u003c/code\u003e to prevent unintended and undesired behavior. We\u0026rsquo;ve been preventing the default button behavior (which is \u003ccode\u003e\u0026quot;submit\u0026quot;\u003c/code\u003e) with JavaScript, but we feel it\u0026rsquo;s more reliable to explicitly declare \u003ccode\u003etype=\u0026quot;button\u0026quot;\u003c/code\u003e on all non-submit buttons. So when you bring in USWDS 3.1.0, look for any buttons that do not declare a type, and give them \u003ccode\u003etype=\u0026quot;button\u0026quot;\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ve also made a number of good non-breaking changes as well.\u003c/p\u003e\n\u003cp\u003eElements that use \u003ccode\u003earia-disabled\u003c/code\u003e are now styled as \u003ccode\u003edisabled\u003c/code\u003e. \u003ccode\u003earia-disabled\u003c/code\u003e can be a good option anytime you want to have a disabled element, but make it visible to screen readers (and perhaps provide a tooltip explaining why it\u0026rsquo;s disabled).\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ve also fixed mobile menu appearance for layouts using flex or CSS grid.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e Unstyled buttons in a button group now have proper baseline alignment.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ve added a LinkedIn icon.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ve also updated our social media icons to remove custom circle outlines. So if you use USWDS social media icons, expect them to change a little bit. This change helps format our icons exactly as they\u0026rsquo;re provided from social media companies.\u003c/p\u003e\n\u003cp\u003eAnd lastly, this isn\u0026rsquo;t a breaking change since we have backward compatible styling, but we\u0026rsquo;ve updated the markup of the usa-password component to use a \u003ccode\u003e\u0026lt;button\u0026gt;\u003c/code\u003e for the \u0026ldquo;Show password\u0026rdquo; functionality instead of an anchor.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e And that\u0026rsquo;s USWDS 3.1.0 — it\u0026rsquo;s out now, and if you want more information about what\u0026rsquo;s inside we\u0026rsquo;re posting the \u003ca href=\"https://github.com/uswds/uswds/releases/tag/v3.1.0\"\u003elink to the full release notes\u003c/a\u003e in the chat.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e And now let\u0026rsquo;s move on to introducing inclusive patterns. We\u0026rsquo;ve been working hard over the last few months to bring patterns and pattern guidance to the design system. And if you don\u0026rsquo;t know what a pattern is, or what we\u0026rsquo;re talking about when we talk about patterns, you\u0026rsquo;re not alone and you\u0026rsquo;ve come to the right place, I hope.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e So to help me talk about this new work, I\u0026rsquo;d like to introduce a couple members of the inclusive patterns team. First Meghan O\u0026rsquo;Meara (pronounced MEE-gan OH MAIR-ah), a Content Strategist and a contractor on the inclusive patterns team. Meghan, can you say a bit about yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eMeghan: Hi, I\u0026rsquo;m Meghan O\u0026rsquo;Meara, and I\u0026rsquo;m the content strategist on the inclusive design patterns project. My pronouns are she and her and I have shoulder-length brown and gray hair.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e Thanks Meghan, and I\u0026rsquo;d also like to introduce Mitch Moccia (pronounced MOE-sha), an Engineer, and a contractor on the Inclusive Patterns team. Mitch, can you say a bit about yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eMitch: Hi, I\u0026rsquo;m Mitch Moccia, and I\u0026rsquo;m the front-end developer and engineer on the inclusive design patterns project. My pronouns are he and him and I wear dark glasses and have short brown hair and brown eyes!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e Thanks Mitch! We\u0026rsquo;ll hear a bit more from Meghan and Mitch a little later, but I\u0026rsquo;d like to start with an overview of what we\u0026rsquo;ll discuss today.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eFirst, what are patterns and why are we including them in USWDS?\u003c/li\u003e\n\u003cli\u003eThen we\u0026rsquo;ll talk about how we developed our pattern guidance.\u003c/li\u003e\n\u003cli\u003eThen we\u0026rsquo;ll talk about a few new or improved components we\u0026rsquo;ve developed to support these patterns.\u003c/li\u003e\n\u003cli\u003eAnd finally, we\u0026rsquo;ll talk a bit about what this means and what\u0026rsquo;s next.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eThis is only our first monthly call focused on Patterns. This month we\u0026rsquo;ll introduce the concept of patterns and what we did to build out this new content. Next month we\u0026rsquo;ll look at the new patterns we\u0026rsquo;ve documented in depth.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e So let\u0026rsquo;s get going, and talk about what USWDS provides today: What we might call the building blocks of websites.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDesign tokens\u003c/strong\u003e — elements of style like color, typography, and spacing.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eComponents\u003c/strong\u003e — the functional units of a website, things like buttons, form fields, alerts, and cards.\u003c/p\u003e\n\u003cp\u003eAnd \u003cstrong\u003eUsability and Accessibility Guidance\u003c/strong\u003e — Advice on how to use these components in ways that users expect, and make site functionality easy to use on any device, or by users of any ability.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e\tIn order to understand what a pattern is and how it fits into the design system. We might use a food metaphor and think not of the building blocks of a website, but the building blocks of a meal.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e\tTokens are our flavors and textures. Like the colorful words we see illustrated on this slide. Flavors like sweet, salty, savory, and sour. Textures like melty, dry, crumbly, and bubbly. Tokens are what give a design its character.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e Components are like the raw ingredients in a pantry. They\u0026rsquo;re more like the different types of food we see here in this illustration, or you might see in a market or in your refrigerator. These are things like mushrooms, corn, and cheese. Food like eggs, chicken, soy sauce, and rice. Each of these have a character that you could describe with tokens — with flavors and textures. But we build a dish not with flavors, but with the ingredients that express those flavors. Components are grocery items.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e Usability and accessibility guidance are like techniques: how do you use a specific ingredient. This illustration shows an onion, and different ways to cut it up. Techniques might also include safe ways to use a knife, how to cut an onion without irritating your eyes, and any potential allergies related to onions. Usability and accessibility guidance affects how you work with specific ingredients.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e But you might notice that in the preparation of a meal, the items we\u0026rsquo;ve just discussed are missing something important. They\u0026rsquo;re teaching us about flavors, helping us collect ingredients, and guiding us through working with our ingredients, but you don\u0026rsquo;t always make a meal just by going to the grocery store. And a design system is more than a store, it\u0026rsquo;s the story of how we do design work. And just like a website or service is more than generic buttons and form fields, meals are not typically just a collection of chopped up vegetables, and a pile of raw ingredients.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e They need Recipes. You don\u0026rsquo;t always get repipes at the grocery store, but you do often need them to make a meal. And if you don\u0026rsquo;t need them now, you surely used them — by book or by experience — as you learned how to cook.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e In our metaphor recipes are patterns. It\u0026rsquo;s a little bit of a weird word, particularly if you aren\u0026rsquo;t familiar with how it\u0026rsquo;s used in the context of experience design. But pattern is a word coined by an architect named Christopher Alexander back in the 1970s to describe people\u0026rsquo;s patterns of behavior when they live in their homes. What are the kinds of things that people do again and again in their homes (or expect again and again from their homes) and how might homes be built to support these needs — needs that often go beyond the prosaic needs of shelter and sanitation, but emotional needs: what can a home do to make you feel at home. In an important way, Alexander reintroduced human-centered design into the design practice of architecture, and the concepts he developed are just as relevant and practical to any designed experience.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e At USWDS, we think of patterns as \u0026ldquo;things users do again and again on our sites and services.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e A good way to think about a pattern is as a common interaction. When we say pattern, a reasonable synonym is interaction.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e But this can seem a little abstract, so we\u0026rsquo;ve chosen a specific rubric for how to think of a pattern. A pattern completes the sentence, \u0026ldquo;Help a user to (blank).\u0026rdquo; And if you\u0026rsquo;re thinking that this sounds a lot like a user story, it sure does. Patterns and user stories have significant conceptual overlap. Let me give some examples of how we\u0026rsquo;re thinking of patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 28:\u003c/strong\u003e Help a user to enter their name.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 29:\u003c/strong\u003e Help a user to review a complex form.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 30:\u003c/strong\u003e Help a user to refine search results.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 31:\u003c/strong\u003e Help a user to recover from an error.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 32:\u003c/strong\u003e Help a user to make an appointment.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 33:\u003c/strong\u003e Help a user to upload a document.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 34:\u003c/strong\u003e Help a user to provide their race or ethnicity.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 35:\u003c/strong\u003e Help a user to select their preferred language.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 36:\u003c/strong\u003e Just as a pile of raw ingredients does not a meal make, we see patterns as a missing link between components and services — a human-centered link between components and services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 37:\u003c/strong\u003e So tokens build components. Components are built from tokens.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 38:\u003c/strong\u003e But components alone don\u0026rsquo;t build websites and services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 39:\u003c/strong\u003e Components and content are what address a pattern.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 40:\u003c/strong\u003e And patterns are what our websites and services are really built from. Websites and services are made of patterns large and small. So we should begin to address them.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 41:\u003c/strong\u003e You might be asking yourself, \u0026ldquo;Where do templates fit into all of this?\u0026rdquo; Templates and patterns are very similar. But a pattern is a description of a user need, and a set of constraints and conditions that describe how it can be addressed. A template is a specific solution to a pattern. The pattern describes the problem and the conditions for its effective solution. A template is a single solution to a pattern. USWDS will continue to build and develop templates in service of patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 42:\u003c/strong\u003e Patterns and pattern guidance have the opportunity to describe important user needs, and to give any designer a head start to understanding their own specific audience and how to solve for that user need. Cos this is what it\u0026rsquo;s all about for us: The USWDS vision: Government teams sharing solutions and practicing effective human-centered design. USWDS has never been intended to replace designers or developers, but to give them the tools to do their job more effectively, to provide important context, and provide well-researched solutions (often shared by other government designers and developers!) that help any government designer and developer start their process further down the path.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 43:\u003c/strong\u003e Patterns help us push vision and the USWDS mission of making it easier to build accessible, mobile-friendly government websites even further. It can be easier to talk about the accessibility of a form field than about whether a form field is fair and equitable. And that\u0026rsquo;s because a form field — on its own, in the abstract — is not much of an experience. It\u0026rsquo;s only in the context of a pattern, when a user is trying to actually do something, that a form field has the responsibility to be part of a fair and equitable experience.\u003c/p\u003e\n\u003cp\u003eWhen we talk about patterns we have that responsibility to consider what it means to be fair and equitable.\u003c/p\u003e\n\u003cp\u003eSuccessful patterns have a responsibility to be fair, equitable, respectful, and inclusive experiences for broad, diverse audiences.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 44:\u003c/strong\u003e Patterns have a responsibility to reduce barriers to participation through every interaction. And to help give more detail to what I\u0026rsquo;m talking about, I\u0026rsquo;d like to cede the floor to Meghan for a moment.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 45:\u003c/strong\u003e Meghan: Dan, one example of using pattern guidance to reduce barriers to participation through every interaction is that of Puerto Rican addresses. Not too long ago the federal government made free home COVID tests available to the American public. There was never an intent to exclude Puerto Rico, but when the site was launched, the mailing address omitted the urbanization field, which is required for residents of Puerto Rico to receive mail. There simply wasn’t awareness of this need. The form was quickly fixed to include the Urbanization field, but including Urbanization as an optional field in an address pattern is just the kind of guidance and learning that can help other teams start from what their colleagues have learned, and make a real difference for the people that use our services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 46:\u003c/strong\u003e Inclusive design patterns can help teams address a number of Executive Orders related to customer experience, access, and equity. There\u0026rsquo;s not only the recent \u003ca href=\"https://www.whitehouse.gov/briefing-room/presidential-actions/2021/12/13/executive-order-on-transforming-federal-customer-experience-and-service-delivery-to-rebuild-trust-in-government/\"\u003eExecutive Order on Transforming Federal Customer Experience and Service Delivery to Rebuild Trust in Government\u003c/a\u003e and the \u003ca href=\"https://www.performance.gov/pma/cx/\"\u003eExecutive Order on Delivering Excellent, Equitable, and Secure Federal Services and Customer Experiences\u003c/a\u003e, and the \u003ca href=\"https://www.lep.gov/executive-order-13166\"\u003eExecutive Order on Advancing Racial Equity and Support for Underserved Communities Through the Federal Government\u003c/a\u003e, but also an older but still very relevant \u003ca href=\"https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/20/executive-order-advancing-racial-equity-and-support-for-underserved-communities-through-the-federal-government/\"\u003eExecutive Order on Improving Access to Services for Persons with Limited English Proficiency\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eDelivering fair, equitable, respectful, and inclusive experiences isn\u0026rsquo;t just the right thing to do, but works directly in service of these executive orders.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 47:\u003c/strong\u003e What we’ve learned through this project — and by being a part of the USWDS community — is that teams are interested in sharing what they know and learning what they can do better. And by sharing our expertise we can provide a better, more consistent customer experience — and help government teams spend less time on solved problems and more time on their mission and their specific audiences.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 48:\u003c/strong\u003e Dan: Thanks Meghan. So in adding pattern guidance to USWDS, we had the following six goals:\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 49:\u003c/strong\u003e 1. To identify common patterns shared by government sites and services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 50:\u003c/strong\u003e 2. To identify patterns that government design teams want to better understand.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 51:\u003c/strong\u003e 3. To identify subject matter experts effectively addressing these patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 52:\u003c/strong\u003e 4. To identify guidance specific to these patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 53:\u003c/strong\u003e 5. To ensure that any pattern guidance addresses diversity, equity, inclusion, and accessibility considerations specific to these patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 54:\u003c/strong\u003e and 6. To identify new components and improvements to components that can support these patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 55:\u003c/strong\u003e So how did we do this? What did we do?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 56:\u003c/strong\u003e Mitch: We started with benchmarking and landscape analysis. In our benchmarking and landscape analysis we spent a lot of time looking at design system sites and sites that were about design systems.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 57:\u003c/strong\u003e\tWe looked at US government design systems, international government design systems, and private sector design systems. And we worked to make sense of the commonalities we found.\u003c/p\u003e\n\u003cp\u003eWe wanted to identify which design systems included patterns at all, and how they approached them. What information did they include on a pattern guidance page?\u003c/p\u003e\n\u003cp\u003eHow were these organizations talking about patterns? What were their problem statements? Their Do\u0026rsquo;s and Don\u0026rsquo;ts?\u003c/p\u003e\n\u003cp\u003eWe analyzed how these design systems described their patterns — their approach to guidance and their approach to addressing the problem statement of a pattern. How well did they describe how and why they recommend one solution over another?\u003c/p\u003e\n\u003cp\u003eAnother key aspect we looked at was how these design systems connected their components and templates to their patterns and how pattern guidance and component guidance were related.\u003c/p\u003e\n\u003cp\u003eIn general, we looked at what best practices we could learn from, and where there were different approaches.\u003c/p\u003e\n\u003cp\u003eAs a result of our research, discovery, and analysis, we were able to gain a more cohesive and comprehensive understanding of the decisions we needed to make.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 58:\u003c/strong\u003e Megan: In addition to the benchmarking, we needed to hear from experts across the federal space. So, let\u0026rsquo;s talk about how we approached this.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 59:\u003c/strong\u003e Initially we thought we were going to hold a couple of huge meet-ups with experts across the federal government, but we quickly realized that we wouldn\u0026rsquo;t be able to dive in as deeply as we needed to with any specific team or on any topic, so we switched to interviews. We reached out across the federal government to identify people and teams that had the expertise we needed, and conducted interviews with individuals and teams.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 60:\u003c/strong\u003e We interviewed more than 35 people from more than 20 agencies and programs, including;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 61:\u003c/strong\u003e Teams at 16 high impact service providers. We wanted to hear from HISPs, because they are generally the most high-touch agencies and programs for the public, and because that \u0026ldquo;touch\u0026rdquo; generally involves interactions. We wanted to understand common interactions so our patterns could focus on inclusive experiences for those transactions.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 62:\u003c/strong\u003e We spoke to people at Veterans Affairs, SSA, HHS, FEMA, the Department of the Interior, and the IRS, among others, and sometimes more than one group at a specific agency. And we focused on questions such as what patterns they\u0026rsquo;ve identified in their sites and services? How do they think about and incorporate equity and inclusion into their design decisions? We asked them about challenges and pain points, what patterns they would like USWDS to look into, and more.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 63:\u003c/strong\u003e We really tried to get at how teams were incorporating equity and inclusion into their processes \u0026ndash; how they thought a focus on diversity, equity, inclusion and accessibility should influence their work \u0026ndash; and what was challenging about creating inclusive experiences.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 64:\u003c/strong\u003e And to dig even deeper into these key topics, we reached out to subject matter experts at TTS\u0026rsquo;s DEIA Growth for Teams, the TTS Diversity Guild, and the Multilingual Community of Practice. We learned a tremendous amount from their perspectives.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 65:\u003c/strong\u003e In a few minutes I will tell you a bit more about how we synthesized the results of all these interviews, but first, let\u0026rsquo;s talk about some of the big themes that emerged from the discussions.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 66:\u003c/strong\u003e Creating more equitable and inclusive experiences is on everyone’s minds. Digital teams were generally further along in implementing accessibility than in considering equity and inclusivity in their design work.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 67:\u003c/strong\u003e We heard that the process of inclusivity is as important as the implementation. It can be hard to figure out how to include historically disadvantaged populations in the design process or usability testing. Digital teams can struggle with how to get the right people to weigh in at the right time, so everyone\u0026rsquo;s needs are represented and everyone\u0026rsquo;s voice is heard.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 68:\u003c/strong\u003e We also heard that personal information is fundamental to an individual\u0026rsquo;s sense of self – solutions that don\u0026rsquo;t support everyone can be very alienating. For example, this means that name fields have to accommodate everything from one-character names to very long names. Or multiple last names. Or names with accents or case differences.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 69:\u003c/strong\u003e We heard from HISPs that complex forms are a real challenge for users. They can be frustrating and alienating, especially during times of stress, such as when someone’s been in a disaster, or when they have to file a report about something that’s happened to them. Interviewees asked for guidance around how we can help the public \u0026ndash; especially those in trauma \u0026ndash; to have a better experience with forms.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 70:\u003c/strong\u003e One design team member said: \u0026ldquo;People are reluctant to give information because of the lack of trust and any number of concerns. [We need help] building trust into the design process.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 71:\u003c/strong\u003e We heard that many programs are wrestling with making their content available in multiple languages.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 72:\u003c/strong\u003e A design team member said \u0026quot;[We’re] struggling with multilingual [content] and accommodating the proper presentation.\u0026quot;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 73:\u003c/strong\u003e So, let me take a minute to talk about the synthesis and pattern identification process.\u003c/p\u003e\n\u003cp\u003eAll the interviews were pseudonymized; we do this so that each interviewee can feel comfortable to speak candidly.\u003c/p\u003e\n\u003cp\u003eWe had note takers and they prepared detailed notes for each interview. We took the notes from each interview, and pulled out quotes and insights, and created cards for them on a Mural board.\u003c/p\u003e\n\u003cp\u003eCards were color coded by role.\u003c/p\u003e\n\u003cp\u003eOnce we had all the quotes and insights for an interview on the board, we analyzed each interview for its major themes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 74:\u003c/strong\u003e Later, when we had completed all the interviews, we created a crosswalk, where we integrated all the cards from all the interviews, and identified themes across all the interviews. This is when the color coding is helpful, because you can easily see if there are particular areas of interest just to SMEs, or just to digital teams. From there it was pretty easy to pick out the overall themes, including areas of interest, pain points, and priority transactions for pattern development.\u003c/p\u003e\n\u003cp\u003eSo that gets us through interviews and synthesis, but throughout the pattern development process we were also doing a deep dive into the research around inclusive design \u0026ndash; first in a general sense of how it was being incorporated into digital design, and then on a pattern level. In many cases we were lucky to have existing federal government models, but in other cases we had to look to those who are still in the process of doing the work and advocating for inclusive perspectives. Regardless, we looked at all best practices around creating effective designs, including those that are just emerging, so we could incorporate them into the patterns.\u003c/p\u003e\n\u003cp\u003eAfter we used all this research to draft the patterns, we reached out again to stakeholders across the federal space to get the feedback on the patterns.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 75:\u003c/strong\u003e This process resulted in identifying the following pattern focus areas:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eUser profiles.\u003c/li\u003e\n\u003cli\u003eComplex forms.\u003c/li\u003e\n\u003cli\u003eLanguage selection.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 76:\u003c/strong\u003e And these are the patterns we\u0026rsquo;re completing:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eProvide a name\u003c/li\u003e\n\u003cli\u003eProvide a date of birth\u003c/li\u003e\n\u003cli\u003eProvide an address\u003c/li\u003e\n\u003cli\u003eProvide an email address\u003c/li\u003e\n\u003cli\u003eProvide a phone number\u003c/li\u003e\n\u003cli\u003eProvide a biological sex or gender\u003c/li\u003e\n\u003cli\u003eProvide pronouns\u003c/li\u003e\n\u003cli\u003eProvide their race or ethnicity\u003c/li\u003e\n\u003cli\u003eProvide a social security number\u003c/li\u003e\n\u003cli\u003eProvide contact preferences\u003c/li\u003e\n\u003cli\u003eUnderstand expectations and build trust in complex forms\u003c/li\u003e\n\u003cli\u003eHelp a user progress smoothly through complex forms\u003c/li\u003e\n\u003cli\u003eKeep a record of submitted information\u003c/li\u003e\n\u003cli\u003eSelect a language for a site or service\u003c/li\u003e\n\u003cli\u003eIndicate a preferred spoken and/or written language for a site or service\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 77:\u003c/strong\u003e Mitch: In support of these patterns, we decided to build some new components and features for the design system as well.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 78:\u003c/strong\u003e\tIn deciding what components we were going to develop, we looked at the existing guidance we had. We thought about what we were doing. And we looked for gaps, and asked ourselves, what are the opportunities for components to develop?\u003c/p\u003e\n\u003cp\u003eIn the end, we ended up building:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eAn \u003cstrong\u003eIn-page navigation7\u003c/strong\u003e component\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eInput Masking\u003c/strong\u003e functionality for form inputs, and\u003c/li\u003e\n\u003cli\u003ea \u003cstrong\u003eLanguage Selector\u003c/strong\u003e component.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWhat was great about this process was that we were able to develop new components and new functionality, based on real user needs we\u0026rsquo;d either documented in our pattern guidance, or discovered in the process of building out the pattern section of the USWDS website.\u003c/p\u003e\n\u003cp\u003eAnd as we built these components, we were able to draw not only from the deep experience and documentation the design system already provides around accessibility, but we were able to use this alongside the pattern guidance to build new technical solutions that support more inclusive interactions.\u003c/p\u003e\n\u003cp\u003eAnd this part is what I was most excited about — getting into some actual coding — but really coding with accessibility and inclusivity in mind, and thinking to myself what\u0026rsquo;s going to make my next line of code produce a better, more effective, more inclusive experience? How is each decision really serving a critical user need?\u003c/p\u003e\n\u003cp\u003eFor example, with the language selector component, I was able to draw from expertly-written pattern guidance for direction which, as a developer, really accelerated my efforts while informing my design and development decisions with an inclusive lens.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 79:\u003c/strong\u003e We\u0026rsquo;ve covered a lot of ground in this presentation. But there\u0026rsquo;s just one more important thing to say. As Mitch mentioned, patterns help drive development on a few key components. And we think that this is just the beginning. In fact, we see patterns as driving component development moving forward. Patterns are the horse, and components are the cart. We develop components to support interactions. And I think this is an important human-centered shift to how we\u0026rsquo;ll approach development, how we\u0026rsquo;ll choose components, and how we\u0026rsquo;ll approach modularity and interaction between components.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 80:\u003c/strong\u003e So next month we\u0026rsquo;ll continue the theme, and go in-depth into our new patterns section.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 81:\u003c/strong\u003e Meghan: I really want to thank the people who were so generous with their time and expertise and shared with us how they were thinking about inclusivity and design, provided us with patterns or guidance as a starting point, provided thoughtful feedback, and challenged us to think critically about what we were doing. This couldn\u0026rsquo;t have happened without you, and we are so grateful for your contribution.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 82:\u003c/strong\u003e Now some Q\u0026amp;A. You must have some questions.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 83:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, we\u0026rsquo;ll be looking at Inclusive Patterns in depth. Please look out for an event feedback survey from Digitalgov. You\u0026rsquo;ll get this in your email, and there\u0026rsquo;s also a link in the chat. Your feedback makes a difference to us, so we\u0026rsquo;d appreciate the extra time it takes you to provide it.\u003c/p\u003e\n\u003cp\u003eThank you, and see you in September or lose you to a summer love! Bye!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\n\n\u003cp\u003eWhat are design patterns and how do they fit into the design system? Join us to learn more about USWDS Inclusive Design Patterns — upcoming guidance that will help connect components to common service interactions. We’ll preview this upcoming guidance and discuss the process we used to develop it.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis event is part of a monthly series that takes place on the third Thursday of each month. Don’t forget to set a placeholder on your personal calendar for our future events this year.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"about-the-uswds\"\u003eAbout the USWDS\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e is a toolkit of principles, guidance, and code to help government teams design and build accessible, mobile-friendly websites backed by user research and modern best practices.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/uswds/uswds/issues\"\u003eContribute on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"mailto:uswds@support.digitalgov.gov\"\u003eEmail Us\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://digital.gov/communities/uswds/\"\u003eJoin our community\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://twitter.com/uswds\"\u003eFollow @uswds on Twitter\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n",
      "branch" : "bc-archive-content-3",
      "filename" :"2022-08-11-uswds-monthly-call-august-2022.md",
      
      "filepath" :"events/2022/08/2022-08-11-uswds-monthly-call-august-2022.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2022/08/2022-08-11-uswds-monthly-call-august-2022.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2022/08/2022-08-11-uswds-monthly-call-august-2022.md","slug" : "uswds-monthly-call-august-2022","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/08/18/uswds-monthly-call-august-2022/"
    }
  ]
}