{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Adopting the USWDS, One Step at a Time |Digital.gov",
    "description": "Adopting the USWDS, One Step at a Time",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2020/01/30/adopting-uswds-one-step-at-time/index.json","item" : [
    {"kicker" : "This Week's IDEA","title" :"Adopting the USWDS, One Step at a Time","deck" : "The U.S. Web Design System is key to new website standards","summary" : "The U.S. Web Design System is key to new website standards","date" : "2020-01-30T19:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"dan-williams" : "Dan Williams","jeremyzilar" : "Jeremy Zilar","ammie-farraj-feijoo" : "Ammie Farraj Feijoo"},"topics" : {
        
            "design" : "Design",
            "digital-service-delivery" : "Digital service delivery",
            "product-and-project-management" : "Product and project management",
            "software-engineering" : "Software engineering"
            },"primary_image" : { "uid" : "this-weeks-idea-card-wk6", "alt" :
  "the words, "This Week's IDEA" with a line drawing of a lightbulb in white, on light green (mint) background", "width" :
  "1073", "height" :
  "600", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"2020-01-30-adopting-uswds-one-step-at-time.md",
      
      "filepath" :"news/2020/01/2020-01-30-adopting-uswds-one-step-at-time.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2020/01/2020-01-30-adopting-uswds-one-step-at-time.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2020/01/2020-01-30-adopting-uswds-one-step-at-time.md","slug" : "adopting-uswds-one-step-at-time","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2020/01/30/adopting-uswds-one-step-at-time/","aliases" : {"0" : "/2020/01/29/adopting-uswds-one-step-at-time/"},"content" :"\n\n\n\n\n\n\u003cdiv class=\"quote-block \"\u003e\n    \u003cblockquote\u003e\n      \u003cspan class=\"quote-block__quotation-mark\"\u003e“\u003c/span\u003e\n      Learning is never cumulative, it is a movement of knowing which has no beginning and no end.\n      \u003cspan class=\"quote-block__quotation-mark\"\u003e”\u003c/span\u003e\u003ccite\u003e— Bruce Lee\u003c/cite\u003e\u003c/blockquote\u003e\n  \u003c/div\u003e\n\u003cp\u003eLast week, \u003ca href=\"https://www.gsa.gov/blog/2020/01/22/gsa-publishes-standards-for-building-federal-websites-and-digital-services\"\u003eGeneral Services Administration (GSA) officially released\u003c/a\u003e the ‘website standards’ referenced in Section 3(e) of \u003ca href=\"https://digital.gov/resources/21st-century-integrated-digital-experience-act/\"\u003e21st Century IDEA\u003c/a\u003e.\u003c/p\u003e\n\n\n\u003cdiv class=\"image image-right\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/this-weeks-idea-icon-wk6_w200.png\"  alt='A line drawing of a lightbulb in white, on light green (mint) background'\n    srcset=\"https://s3.amazonaws.com/digitalgov/this-weeks-idea-icon-wk6_bu.jpg 48w,https://s3.amazonaws.com/digitalgov/this-weeks-idea-icon-wk6_w400.png 400w,https://s3.amazonaws.com/digitalgov/this-weeks-idea-icon-wk6_w200.png 200w\"\n    sizes=\"(max-width: 600px) 40vw, 400px\"\n  /\u003e\u003c/div\u003e\n\n\n\u003cp\u003eSpecifically, the \u003ca href=\"https://designsystem.digital.gov/website-standards/\"\u003ewebsite standards\u003c/a\u003e say agencies should use the U.S. Web Design System (USWDS):\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eAgencies should use the USWDS \u003ca href=\"https://designsystem.digital.gov/maturity-model/\"\u003ematurity model\u003c/a\u003e to deliver a great digital experience:\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003col\u003e\n\u003cli\u003eIntegrate design principles.\u003c/li\u003e\n\u003cli\u003eFollow user experience guidance.\u003c/li\u003e\n\u003cli\u003eUse USWDS code.\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp\u003eAgencies should use the maturity model to adopt USWDS incrementally, and prioritize implementation to align with the priorities identified in their modernization plans and the Act’s reports.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eIn short, agencies will need to incrementally implement USWDS principles, guidance, and code.\u003c/p\u003e\n\n\n\n\u003carticle\n  class=\"dg-note \"\n\u003e\n  \u003ch4 class=\"dg-note__heading\"\u003e\n    \u003csvg\n      class=\"dg-note__icon usa-icon dg-icon dg-icon--large\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    \u003e\n      \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#notifications\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    \n      Note\n    \n  \u003c/h4\u003e\n  \u003cp\u003eThree important things that you should understand about adopting \u003ca href=\"https://designsystem.digital.gov/\"\u003eUSWDS\u003c/a\u003e:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eYou don’t need to adopt the design system all at once.\u003c/strong\u003e In fact, we encourage you to adopt the design system incrementally, and adapt it to meet your agency’s mission and user needs.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eYou don’t need to add any special code to your website to get started.\u003c/strong\u003e In fact, we encourage you to start with the principles and guidance.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eYou don’t need to do a full-scale site redesign to start incorporating USWDS code and components.\u003c/strong\u003e In fact, we encourage you to start with something smaller like color tokens or the gov banner.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/article\u003e\n\n\u003ch2 id=\"a-quick-intro-to-design-systems\"\u003eA Quick Intro to Design Systems\u003c/h2\u003e\n\n\n\u003cdiv class=\"image image-right\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/uswds-logo_w200.png\"  alt='The U.S. Web Design System logo'\n    srcset=\"https://s3.amazonaws.com/digitalgov/uswds-logo_bu.jpg 48w,https://s3.amazonaws.com/digitalgov/uswds-logo_w400.png 400w,https://s3.amazonaws.com/digitalgov/uswds-logo_w200.png 200w\"\n    sizes=\"(max-width: 600px) 40vw, 400px\"\n  /\u003e\u003c/div\u003e\n\n\n\u003cp\u003eUSWDS is a library of principles, guidance, and code to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices.\u003c/p\u003e\n\u003cp\u003eUSWDS initially launched in late 2015 as a collaborative effort between GSA and the US Digital Service. Today, it\u0026rsquo;s in its second major version and is suitable for anything from fast prototypes to national-scale, production-ready websites.\u003c/p\u003e\n\u003cp\u003eDesign systems help coordinate design at scale, across multiple teams, multiple products, and multiple locations. They are a relatively new, but proven, tool in the world of design, used by everyone from governments to large commercial enterprises.\u003c/p\u003e\n\u003cp\u003eA design system like USWDS provides:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eShared principles (or goals), guidance, and code\u003c/li\u003e\n\u003cli\u003eCommon stylistic palettes and functionality\u003c/li\u003e\n\u003cli\u003eTemplates and layout choices\u003c/li\u003e\n\u003cli\u003eShared solutions and community\u003c/li\u003e\n\u003cli\u003eA common shared design language\u003c/li\u003e\n\u003cli\u003eA reliable, free, open source project\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-baseball.png\"alt=\"an illustration of a white baseball field on a dark blue background.\"/\u003e\u003c/div\u003e\n\n\n\u003ch3 id=\"the-rules-of-the-game-not-the-outcome\"\u003eThe Rules of the Game, not the Outcome\u003c/h3\u003e\n\u003cp\u003eUsing a design system like USWDS is like following the rules of baseball. No two games are exactly the same, but they\u0026rsquo;re all recognizably baseball.\u003c/p\u003e\n\u003cp\u003eSimilarly, sites that use the design system follow similar rules to achieve different and unique outcomes. Each site can adapt to the mission, context and user needs specific to the agency or project, while promoting greater continuity of experience across the federal government.\u003c/p\u003e\n\u003ch3 id=\"supporting-teams-and-users\"\u003eSupporting Teams and Users\u003c/h3\u003e\n\u003cp\u003eUSWDS empowers teams to work effectively and efficiently, focusing on their mission, and on high-value problems, not on foundational stuff like the border radius of buttons or how to build a responsive navigation.\u003c/p\u003e\n\u003cp\u003eIt ships with Section 508 accessibility and the mobile friendliness required by the \u003ca href=\"https://digital.gov/resources/connected-government-act/\"\u003eConnected Government Act\u003c/a\u003e built into its principles, guidance, and code. This provides teams with a head start, so they just need to test their site is accessible and mobile-friendly versus starting from scratch.\u003c/p\u003e\n\u003cp\u003eFinally, USWDS is built to support a modern, iterative, and agile style of working. It\u0026rsquo;s built to adapt to user needs, and to encourage rapid development and incremental adoption. In total, it\u0026rsquo;s built to:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eEncourage modular, iterative, user-centered design\u003c/li\u003e\n\u003cli\u003ePromote accessibility and mobile friendliness\u003c/li\u003e\n\u003cli\u003eDevelop a consistent design language\u003c/li\u003e\n\u003cli\u003eSupport designing with flexibility and coherence\u003c/li\u003e\n\u003cli\u003eLead with dependable guidance\u003c/li\u003e\n\u003cli\u003eAllow teams to prototype and build quickly\u003c/li\u003e\n\u003cli\u003eEstablish a reliable foundation for growth\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"what-does-it-mean-to-use-the-us-web-design-system\"\u003eWhat does it mean to use the U.S. Web Design System?\u003c/h2\u003e\n\u003cp\u003eAgencies don’t need to use the U.S. Website Design System all at once. In fact, the USWDS has been designed to allow teams to adopt it incrementally and adapt it as they adopt it. This philosophy is outlined in the \u003ca href=\"https://designsystem.digital.gov/maturity-model/\"\u003eUSWDS Maturity Model\u003c/a\u003e.\u003c/p\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-maturity-model.png\"alt=\"An illustration showing the three levels of progression through the USWDS maturity model.\"/\u003e\u003cp\u003eAn illustration showing the three levels of progression through the \u003ca href=\"https://designsystem.digital.gov/maturity-model/\"\u003eUSWDS maturity model\u003c/a\u003e.\u003c/p\u003e\u003c/div\u003e\n\n\n\u003cp\u003eThe maturity model acts as a guide to help teams incrementally adopt the USWDS and continuously improve their website (and not attempt to do it all at once, which is not advised. Really.)\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e“A maturity model is a tool that helps people assess the current effectiveness of a person or group and supports figuring out what capabilities they need to acquire next in order to improve their performance.”\n— \u003cem\u003eMartin Fowler on maturity models\u003c/em\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eEngaging with the USWDS maturity model at each maturity level is what it means to adopt the design system.\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003eHere is a short breakdown of all three levels:\u003c/p\u003e\n\u003ch3 id=\"1-start-by-understanding-and-integrating-the-principles\"\u003e1. Start by understanding and integrating the principles\u003c/h3\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eThe “why”\u003c/strong\u003e\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eUSWDS Design Principles support and reflect the important guidance codified in 21st Century IDEA, and are intended to help government teams align on common goals and better use the design system—to be a guiding light for design and implementation decisions.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWhat can you do right away?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eOne thing you and your team can do right away is to evaluate the decisions you’re making as you work on your website, and list how you’re incorporating the principles into your work.\u003c/p\u003e\n\u003cp\u003eHere are a few activities you could use get started:\u003c/p\u003e\n\n\n\n\n  \n\u003carticle\n  class=\"dg-note dg-note--activity\"\n\u003e\n  \u003ch4 class=\"dg-note__heading\"\u003e\n    \u003csvg\n      class=\"dg-note__icon usa-icon dg-icon dg-icon--large\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    \u003e\n      \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#assessment\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    \n      \n        Activity\n      \n    \n  \u003c/h4\u003e\n  \u003col\u003e\n\u003cli\u003eRead over the design principles with your team.\u003c/li\u003e\n\u003cli\u003eNote which ones resonate most with your team and why.\u003c/li\u003e\n\u003cli\u003eList the decisions you’ve recently made, and actions you and your team are - already doing that fall under one or more of the design principles.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003c/article\u003e\n\n\n\n\n\n  \n\u003carticle\n  class=\"dg-note dg-note--activity\"\n\u003e\n  \u003ch4 class=\"dg-note__heading\"\u003e\n    \u003csvg\n      class=\"dg-note__icon usa-icon dg-icon dg-icon--large\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    \u003e\n      \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#assessment\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    \n      \n        Activity\n      \n    \n  \u003c/h4\u003e\n  \u003col\u003e\n\u003cli\u003eList all of the recent edits (content + functionality) you and your team have made to your website in the last 3 months.\u003c/li\u003e\n\u003cli\u003eFor each edit made, note the actions you took that directly apply to one or more of the design principles.\u003c/li\u003e\n\u003cli\u003eMake a list of actions you and your team can start doing to incorporate one or more of the design principles into your decision-making workflow.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003c/article\u003e\n\n\u003chr\u003e\n\u003ch3 id=\"2-follow-the-guidance\"\u003e2. Follow the guidance\u003c/h3\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eThe “how”\u003c/strong\u003e\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eEven before adding any USWDS code to your site, you can begin to adopt its user experience guidance on your existing site (like this \u003ca href=\"https://designsystem.digital.gov/components/search/\"\u003eusability guidance for how search fields should be implemented\u003c/a\u003e).\u003c/p\u003e\n\u003cp\u003eHere is an activity you could use get started:\u003c/p\u003e\n\n\n\n\n  \n\u003carticle\n  class=\"dg-note dg-note--activity\"\n\u003e\n  \u003ch4 class=\"dg-note__heading\"\u003e\n    \u003csvg\n      class=\"dg-note__icon usa-icon dg-icon dg-icon--large\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    \u003e\n      \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#assessment\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    \n      \n        Activity\n      \n    \n  \u003c/h4\u003e\n  \u003col\u003e\n\u003cli\u003eIdentify USWDS components that your website uses.\u003c/li\u003e\n\u003cli\u003eCheck to see if your site’s components follow the USWDS usability and accessibility guidance.\u003c/li\u003e\n\u003cli\u003eAdd any instances where the component does not follow the guidance to an action plan.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003c/article\u003e\n\n\u003chr\u003e\n\u003ch3 id=\"3-use-the-uswds-code-on-your-site\"\u003e3. Use the USWDS code on your site\u003c/h3\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eThe “what”\u003c/strong\u003e\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eYou do not need to do a full-site redesign to start incorporating USWDS code and components on your site.\u003c/p\u003e\n\u003cp\u003eUSWDS code has been built to complement, not conflict with, your site’s existing HTML, CSS, and JavaScript. Once you include USWDS code on your site, you can begin incorporating \u003ca href=\"https://designsystem.digital.gov/design-tokens/\"\u003edesign tokens\u003c/a\u003e into your site design (like colors, typography, responsive layouts) or replace small parts of your site with one of the existing \u003ca href=\"https://designsystem.digital.gov/components/\"\u003ecomponents\u003c/a\u003e (like the \u003ca href=\"https://designsystem.digital.gov/components/banner/\"\u003egov banner\u003c/a\u003e or \u003ca href=\"https://designsystem.digital.gov/components/header/\"\u003eheader\u003c/a\u003e.)\u003c/p\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/uswds-side-by-side.png\"alt=\"Two wifreframe illustrations of the same website, side by side. The second image has a black banner across the top with a USA flag icon in the corner. This is meant to show the addiion of the USWDS banner at the top of a website.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eThis means you can start small and get some quick wins. You also have time to plan. There isn’t a large, looming upfront cost to use USWDS. You can:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSet and align maturity goals with your budget cycles\u003c/li\u003e\n\u003cli\u003eBuild the requirements for the website standards into your contracts\u003c/li\u003e\n\u003cli\u003eFocus on the highest-traffic and -impact websites in alignment with \u003ca href=\"https://digital.gov/resources/21st-century-integrated-digital-experience-act/\"\u003e21st Century IDEA\u003c/a\u003e and the \u003ca href=\"https://www.performance.gov/CAP/cx/\"\u003ecustomer experience CAP goal\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eUse the maturity model to support and defend your existing modernization plans\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"assessing-maturity-and-prioritizing-next-steps\"\u003eAssessing Maturity and Prioritizing Next Steps\u003c/h2\u003e\n\u003cp\u003eAs Martin Fowler points out, \u003cem\u003e“\u003cstrong\u003ethe true outcome of a maturity model assessment isn\u0026rsquo;t what level you are but the list of things you need to work on to improve.\u003c/strong\u003e”\u003c/em\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e“Working with a maturity model begins with assessment, determining which level the subject is currently performing in. Once you\u0026rsquo;ve carried out an assessment to determine your level, then you use the level above your own to prioritize what capabilities you need to learn next. This prioritization of learning is really the big benefit of using a maturity model. It\u0026rsquo;s founded on the notion that if you are at level 2 in something, it\u0026rsquo;s much more important to learn the things at level 3 than level 4. The model thus acts as a guide to what to learn, putting some structure on what otherwise would be a more complex process.”\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eWe are currently developing \u003ca href=\"https://designsystem.digital.gov/maturity-model/#maturity-assessment-resources\"\u003ematurity assessment resources\u003c/a\u003e that teams can use to measure their design system maturity, and better understand where they can start to make incremental improvements. We’ll regularly update these resources release updates to the community.\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://digital.gov/communities/uswds/\"\u003e\u003cstrong\u003eJoin the USWDS community\u003c/strong\u003e\u003c/a\u003e to learn about the updates and connect with others in government who are using USWDS.\u003c/p\u003e\n"}
  ]
}