{"id":29889,"date":"2021-11-29T12:11:17","date_gmt":"2021-11-29T12:11:17","guid":{"rendered":"https:\/\/www.thepicpedia.com\/blog\/adobe\/how-octo-is-modernizing-government-websites-with-xd\/"},"modified":"2021-11-29T12:11:17","modified_gmt":"2021-11-29T12:11:17","slug":"how-octo-is-modernizing-government-websites-with-xd","status":"publish","type":"post","link":"https:\/\/www.thepicpedia.com\/blog\/adobe\/how-octo-is-modernizing-government-websites-with-xd\/","title":{"rendered":"How Octo is Modernizing Government Websites with XD"},"content":{"rendered":"
\n

Image source: Adobe Stock.<\/p>\n

The design of United States federal government websites and digital services has dramatically improved over the past few years. In many ways, this is a reaction to increased demands from citizens, who now expect the same level of experience they get from websites and apps in the private sector when accessing government services. It\u2019s also because of the incredible work of design teams and agencies, who balance these demands with many regulatory and accessibility requirements.<\/p>\n

All government sites need to comply with Section 508, a piece of legislation that aims to ensure that public sector bodies within the United States are not discriminatory to people with disabilities. They also need to adopt the U.S. Web Design System (USWDS), which provides principles, guidance, and code to make it easier to design and build accessible, mobile-friendly government websites and digital services. Federal agencies are by law required to comply with website standards and make sure they deliver a first-rate user experience. The bar is set high \u2014 the government requires that design contractors show them, not just tell them, how they can deliver on all of the above.<\/p>\n

Octo is at the center of this balancing act \u2014 a unique IT consultancy focused on helping the United States federal government rapidly modernize its infrastructure and enhance citizen engagement. Octo provides emerging technology, modernization, and digital services support to the federal government and specializes in scalable Agile software development, cloud engineering solutions, and user experience design to improve and optimize federal government IT systems. Customers include the Department of Homeland Security, the Department of Health and Human Services, the Department of Education, and many more. Adobe Creative Cloud, particularly Adobe XD, forms a key part of how they win and deliver on government contracts.<\/p>\n

\u201cThere\u2019s a lot of nuance to what we can and can\u2019t do,\u201d explains Joshua Wilson, UX\/UI manager at Octo. \u201cWe have some flexibility, but the baseline is always to follow the rules and make sure everything is within the government parameters. There\u2019s a big push to bring federal government websites and digital services in line with what people are used to seeing on their devices every day.\u201d<\/p>\n

The shift towards human-centered design<\/h3>\n

Two organizations have been instrumental in the adoption of human-centered design across federal government: The United States Digital Service, which created a playbook to meet the needs of the American people and build more effective digital services, and 18F, a technology and design consultancy within the United States government, which partners with agencies to improve the user experience of government services. Both organizations collaborated to create USWDS in 2015, and human-centered design has since become mandatory for government projects. It is now expected at the proposal stage already, something Octo has had to confront head on.<\/p>\n

\u201cFederal agencies have learned how an early focus on the user experience can help a project be successful, and we\u2019re now being asked to demonstrate how we\u2019re able to implement human-centered design in our proposals, even before the actual work starts,\u201d says Brian Funk, vice president, technology solutions, at Octo. \u201cUSDS and 18F also pioneered a move towards agile procurements. Instead of a written proposal that\u2019s a hundred pages long, they now ask us to show them the design work we\u2019ve done.\u201d<\/p>\n

A big part of the bidding process is the technical challenge, which include innovation challenges and technical demonstrations that can range from just one day to three weeks. They provide an opportunity for design teams to collaborate and think outside the box to show the government how they solve certain complex customer challenges within a short time. During COVID-19, the technical challenge has switched to virtual, with everyone on camera the entire time. At the end of the day, the site or app is demoed.<\/p>\n

\"\"<\/p>\n

Three Octo teammates at the GSA hackathon.<\/p>\n

When you are trying to win a contract, time is of the essence, and Octo developed a process to help them through this process as efficiently as possible.<\/p>\n

Winning contracts with design systems<\/h3>\n

\u201cWith the technical challenge, you don\u2019t have as much time as normal to digest a project, think through it, and carry out user testing upfront,\u201d Wilson explains. \u201cEspecially if you have just one day and only find out what you\u2019re going to build in the morning, being organized is hugely important. We can\u2019t only then figure out what colors the website needs to be. We need to have assets pre-built and ready to go.\u201d<\/p>\n

\u201cYou\u2019re coming in blind and have to be prepared across the board,\u201d Funk adds. \u201cThe design is the most critical piece in many ways because it\u2019s what you\u2019re going to demo. So you have to be compliant with accessibility requirements and follow the USWDS guidelines. If we didn\u2019t have the right tools, we couldn\u2019t even compete.\u201d<\/p>\n

To save time and have a toolkit ready, the team uses Adobe XD to build design systems (including accessible components, typography, and color palettes) and create quick prototypes. One of the biggest wins is being able to share and update a project easily \u2014 not only does using Adobe XD help them win contracts by helping them ace the technical challenge, but these demo projects often end up closely influencing final deliverables.<\/p>\n

\"\"<\/p>\n

A prototype created in Adobe XD during a GSA hackathon.<\/p>\n

\u201cWe\u2019re able to share mockups with a development team without having to create separate documentation, which is hugely helpful,\u201d Wilson says. \u201cWe just send them a shared interactive prototype that has design specs built in, and we can also share it with a product owner to get approval or feedback. It\u2019s all in a single link, which remains consistent. No one\u2019s looking at past projects or an older version of the file. It\u2019s always current. That\u2019s immensely useful.\u201d<\/p>\n

Since accessibility is such a high priority for Octo\u2019s work, the team then uses the Stark plugin for Adobe XD to design with accessibility in mind from the start. Stark includes a color contrast checker and colorblind simulations, which gives the designers a good idea of what a user with vision challenges might see and what problems might occur for them in certain layouts.<\/p>\n

Mobile-first as a differentiator<\/h3>\n

Responsiveness and building mobile-first experiences is just as important in getting a leg up in the competition. Even though the tech challenges don\u2019t necessarily specify that a site has to work on a phone, Octo always makes sure it does.<\/p>\n

\u201cWe mockup different layouts of the same application,\u201d Wilson explains. \u201cWe use some of the different artboard options for phone and tablet designs and create components that are responsive. We build a page right the first time and then adapt it with XD\u2019s Responsive Resize feature. It might not get developed, but it\u2019s certainly beneficial to have visual proof that we\u2019re thinking forward to the next version already. If we need them, we have the designs ready.\u201d<\/p>\n

Technical challenges often turn into the basis for real new features, products, or approaches. Once Octo has won the contract, the team continues to build what they started to work on during the tech challenge. They move a modernization project into production and base it on the designs that were built in XD.<\/p>\n

\u201cWe often need to flush out what we included in the tech demo and build a full design system,\u201d Wilson says. \u201cI then get all the specs together and share the Creative Cloud libraries with my design team or other groups in the organization that may not be part of the project but may want to use them.\u201d<\/p>\n

Balancing user experience with government requirements<\/h3>\n

Ultimately, Octo\u2019s mission is to create government sites, software, and digital services that aren\u2019t just getting the job done but are pleasant to use. This requires toeing the line of what\u2019s acceptable for the government and what is on the cutting edge of design. Trust is a huge factor, especially with services that ask users to enter personal information like their social security number.<\/p>\n

\u201cPaying attention to the small details is extremely important to bring some modern flare to government sites,\u201d Wilson points out. \u201cWe make sure that what we build is tight. Even if it\u2019s iterative, we need to give users something that is fully built. A design system, meanwhile, helps make the design consistent, which in turn communicates that the product is trustworthy.\u201d<\/p>\n

\"\"<\/p>\n

Adobe XD prototype created during a GSA hackathon.<\/p>\n

\u201cThe unique missions of our federal partners are critical to our country,\u201d Funk adds. \u201cThese agencies affect millions of people\u2019s lives. The scale is enormous, and it\u2019s crucial that the design of their services is easy to use and accessible and elegant and beautiful at the same time. There\u2019s no reason we can\u2019t have world-class design on federal systems. It\u2019s really just a matter of having the right people and the right tools to do that.\u201d<\/p>\n<\/div>\n

Source : Adobe<\/p>\n","protected":false},"excerpt":{"rendered":"

Image source: Adobe Stock. The design of United States federal government websites and digital services has dramatically improved over the past few years. In many ways, this is a reaction to increased demands from citizens, who now expect the same level of experience they get from websites and apps in the private sector when accessing …<\/p>\n","protected":false},"author":1,"featured_media":29894,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"_links":{"self":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts\/29889"}],"collection":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/comments?post=29889"}],"version-history":[{"count":1,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts\/29889\/revisions"}],"predecessor-version":[{"id":29895,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts\/29889\/revisions\/29895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/media\/29894"}],"wp:attachment":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/media?parent=29889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/categories?post=29889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/tags?post=29889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}