diff --git a/_data/team_members.csv b/_data/team_members.csv index 8b6a8267b..a4a278761 100644 --- a/_data/team_members.csv +++ b/_data/team_members.csv @@ -7,7 +7,7 @@ abdulrahim-tahlil,Abdulrahim,Tahlil,, adam-drake,Adam,Drake,, adam-kendall,Adam,Kendall,,/team/adam-kendall/ adrian-webb,Adrian,Webb,,/team/adrian-webb/ -afeld,Ai,Feldman,,/team/afeld/ +afeld,Aiden,Feldman,,/team/afeld/ alan,Alan,DeLevie,Alan deLevie,/team/alan/ alan-atlas,Alan,Atlas,,/team/alan-atlas/ alan-brouilette,Alan,Brouilette,,/team/alan-brouilette/ diff --git a/_includes/linked-figure.html b/_includes/linked-figure.html new file mode 100644 index 000000000..ad0374e7b --- /dev/null +++ b/_includes/linked-figure.html @@ -0,0 +1,9 @@ +
+ {% assign href = url | default: image %} + + {{ + + {% if caption %} +
{{ caption }}
+ {% endif %} +
diff --git a/config/ignores/index.js b/config/ignores/index.js new file mode 100644 index 000000000..e63b710aa --- /dev/null +++ b/config/ignores/index.js @@ -0,0 +1,5 @@ +const ignoresPlugin = (eleventyConfig) => { + eleventyConfig.watchIgnores.add('.cache/related-posts-*.md') +} + +module.exports = ignoresPlugin; diff --git a/config/index.js b/config/index.js index 159eb7d43..e94c756dc 100644 --- a/config/index.js +++ b/config/index.js @@ -4,6 +4,7 @@ const collections = require('./collections') const dataExtensions = require('./data_extensions') const events = require('./events') const filters = require('./filters') +const ignores = require('./ignores') const markdown = require('./markdown') const passthroughs = require('./passthroughs') const plugins = require('./plugins') @@ -18,6 +19,7 @@ module.exports = function EighteenF(eleventyConfig) { eleventyConfig.addPlugin(dataExtensions) eleventyConfig.addPlugin(events) eleventyConfig.addPlugin(filters) + eleventyConfig.addPlugin(ignores) eleventyConfig.addPlugin(markdown) eleventyConfig.addPlugin(passthroughs) eleventyConfig.addPlugin(plugins) diff --git a/config/shortcodes/imageWithClass.js b/config/shortcodes/imageWithClass.js index 99c9d4544..f92465f06 100644 --- a/config/shortcodes/imageWithClass.js +++ b/config/shortcodes/imageWithClass.js @@ -1,21 +1,3 @@ -const path = require('path') -const Image = require('@11ty/eleventy-img') +const assetUrl = require('../../lib/asset_url') -module.exports = async (src, cls, alt) => { - let pathPrefix = '' - - if (process.env.BASEURL) { - pathPrefix = process.env.BASEURL - } - - const ext = path.extname(src) - const fileType = ext.replace('.', '') - - const metadata = await Image(src, { - formats: [fileType], - outputDir: './_site/img/', - }) - - const data = metadata[fileType] ? metadata[fileType][0] : metadata.jpeg[0] - return `${alt}` -} +module.exports = async (src, cls, alt) => `${alt}` diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js index 717c4425c..724f36b9f 100644 --- a/config/shortcodes/index.js +++ b/config/shortcodes/index.js @@ -2,7 +2,6 @@ const image = require('./image') const imageWithClass = require('./imageWithClass') const uswdsIcon = require('./uswdsIcon') - const shortcodesPlugin = (eleventyConfig) => { eleventyConfig.addShortcode('image', image) eleventyConfig.addShortcode('image_with_class', imageWithClass) diff --git a/content/posts/2018-07-19-taking-the-ato-process-from-6-months-to-30-days.md b/content/posts/2018-07-19-taking-the-ato-process-from-6-months-to-30-days.md index 47748a84d..e4fe69e2f 100644 --- a/content/posts/2018-07-19-taking-the-ato-process-from-6-months-to-30-days.md +++ b/content/posts/2018-07-19-taking-the-ato-process-from-6-months-to-30-days.md @@ -117,11 +117,9 @@ on those outcomes. The Infrastructure Leads keep a [kanban](https://18f.gsa.gov/2016/08/31/kanban-for-government/) board to track the status of ATOs: -
- - Screenshot of the ATO Kanban board on GitHub. - -
+{% include "linked-figure.html", + image: "/assets/blog/ato/ato-kanban.png", + alt: "Screenshot of the ATO Kanban board on GitHub." %} Systems are prioritized based on their launch deadlines, whether they have an existing ATO that’s expiring, and preparedness of the project @@ -205,7 +203,7 @@ principles of an ATO Sprinting Team, make sure to: As mentioned above, we have been dramatically improving the time to ATO:
- Graph showing ATO completion timeline with starting date on the x- axis, and the dates to complete on the y-axis. There is a clear trend downward. + {% image "assets/blog/ato/ato-completion-date-graph.png", "Graph showing ATO completion timeline with starting date on the x- axis, and the dates to complete on the y-axis. There is a clear trend downward." %}
*“ATO effort started on” is measured from when we acknowledged “this diff --git a/content/posts/2018-08-15-shared-infrastructure-as-code.md b/content/posts/2018-08-15-shared-infrastructure-as-code.md index 650c7d327..65493eac5 100644 --- a/content/posts/2018-08-15-shared-infrastructure-as-code.md +++ b/content/posts/2018-08-15-shared-infrastructure-as-code.md @@ -66,8 +66,8 @@ can go through and see immediately what domains we manage as well as how they’re configured**, all in one place.
- - Screenshot of GitHub showing a list of Terraform files. Each corresponds to a domain. + + Screenshot of GitHub showing a list of Terraform files. Each corresponds to a domain.
List of Terraform files that correspond to domains
@@ -77,8 +77,8 @@ made by [pull request](https://github.com/18F/dns/pulls?utf8=%E2%9C%93&q=is%3Apr).
- - Screenshot of a pull request in GitHub, with an explanation of why the change is being made. It also shows that an issue from another repository links to the pull request. + + Screenshot of a pull request in GitHub, with an explanation of why the change is being made. It also shows that an issue from another repository links to the pull request.
Example pull request
@@ -88,8 +88,8 @@ integration (CI)](https://docs.microsoft.com/en-us/azure/devops/what-is-continuous-integration) in CircleCI.
- - Two browser windows, one from GitHub showing the changes to the code, the other showing the resulting changes from Terraform in CircleCI. + + Two browser windows, one from GitHub showing the changes to the code, the other showing the resulting changes from Terraform in CircleCI.
Example diff and continuous integration output
diff --git a/content/posts/2018-10-23-two-exercises-for-improving-design-research-through-reflective-practice.md b/content/posts/2018-10-23-two-exercises-for-improving-design-research-through-reflective-practice.md index edda54551..9d068f468 100644 --- a/content/posts/2018-10-23-two-exercises-for-improving-design-research-through-reflective-practice.md +++ b/content/posts/2018-10-23-two-exercises-for-improving-design-research-through-reflective-practice.md @@ -64,19 +64,15 @@ times I might have done better (for example, when I suggested alternate UI designs after observing my participant struggle at completing a task). -
- - Screenshot of usability test video. - -
Usability test
-
- -
- - Screenshot of feedback from researcher suggesting an alternate UI design. Highlighted text reads: You discussed possibilities not in the design. She had a problem with the magnifying glass icon, and you suggested a plus icon. It may have been better to ask what she would prefer first. - -
Experienced researcher feedback
-
+{% include "linked-figure.html", + image: "/assets/blog/design-research-reflective-practice/usability-test.png", + alt: "Screenshot of usability test video.", + caption: "Usability test" %} + +{% include "linked-figure.html", + image: "/assets/blog/design-research-reflective-practice/feedback.png", + alt: "Screenshot of feedback from researcher suggesting an alternate UI design. Highlighted text reads: You discussed possibilities not in the design. She had a problem with the magnifying glass icon, and you suggested a plus icon. It may have been better to ask what she would prefer first.", + caption: "Experienced researcher feedback" %} Third, socialize the performance-related feedback you receive. In this case, I passed my recording and the time-stamped feedback I received @@ -136,12 +132,10 @@ prerequisite here is that you’ll need to have conducted a few studies beforehand). In the second, the team conducts a retrospective focused on research practices. -
- - Screenshot of slides for a research review session. - -
Slides that provide an overview of the team's recent research.
-
+{% include "linked-figure.html", + image: "/assets/blog/design-research-reflective-practice/research-review.png", + alt: "Screenshot of slides for a research review session.", + caption: "Slides that provide an overview of the team's recent research." %} As I mentioned, this was a five-month engagement that began with two months of foundational research and concluded with three months of @@ -155,12 +149,10 @@ foundational or generative research. For that reason, I framed our review with [a tweet by Dave Malouf](https://twitter.com/daveixd/status/992924500667830273) describing research across various levels: -
- - Screenshot of a tweet by Dave Malouf. Text reads: A great framing I use is there are 3 levels of research: Foundational: akin to problem-space rsearch. (Opportunity for design) Generative: product idea generation w/in a space (get to the right design) Validative: is the product I've got good. (is the Design right?) - -
Tweet by Dave Malouf
-
+{% include "linked-figure.html", + image: "/assets/blog/design-research-reflective-practice/tweet.png", + alt: "Screenshot of a tweet by Dave Malouf. Text reads: A great framing I use is there are 3 levels of research: Foundational: akin to problem-space rsearch. (Opportunity for design) Generative: product idea generation w/in a space (get to the right design) Validative: is the product I've got good. (is the Design right?)", + caption: "Tweet by Dave Malouf" %} I also shared this local-maxima diagram I learned about from [Joshua Porter’s 52 Weeks of UX](http://52weeksofux.com/post/694598769/the-local-maximum). diff --git a/content/posts/2018-11-13-introduction-to-remote-moderated-usability-testing-part-1.md b/content/posts/2018-11-13-introduction-to-remote-moderated-usability-testing-part-1.md index b2db20849..3f69de709 100644 --- a/content/posts/2018-11-13-introduction-to-remote-moderated-usability-testing-part-1.md +++ b/content/posts/2018-11-13-introduction-to-remote-moderated-usability-testing-part-1.md @@ -56,12 +56,11 @@ of Health (NIH) (This link starts the video at the 39-minute mark, when the test begins). Note especially how Krug interacts with the participant. -
- - Screenshot of video showing NIH site. When clicked it will take you to the video - -
Steve Krug usability test for NIH
-
+{% include "linked-figure.html", + image: "/assets/blog/remote-usability-test/nih-screenshot.png", + url: "https://youtu.be/6fjn1Zz3lMU?t=2340" + alt: "Screenshot of video showing NIH site. When clicked it will take you to the video", + caption: "Steve Krug usability test for NIH" %} That doesn’t look *too* difficult… right? @@ -119,7 +118,7 @@ usability tests power its design. With apologies to the artist [M.C. Escher](htt this depicted in the following way:
- M.C Escher image of two hands forming a circle one representing design and the other usability testing + {% image "assets/blog/remote-usability-test/ux-hands.png", "M.C Escher image of two hands forming a circle one representing design and the other usability testing" %}
M.C. Escher's Drawing Hands
diff --git a/content/posts/2019-07-16-on-the-road-to-innovation.md b/content/posts/2019-07-16-on-the-road-to-innovation.md index 3b6337544..9e3605f22 100644 --- a/content/posts/2019-07-16-on-the-road-to-innovation.md +++ b/content/posts/2019-07-16-on-the-road-to-innovation.md @@ -19,12 +19,10 @@ across the nation to learn more about their projects. Meet Fellows Clarice Chan and Sarayu Srinivasan who share more about their work at the VA and NIST. -
- - Profile picture of Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world. - -
PIF Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world
-
+{% include "linked-figure.html", + image: "/assets/blog/pif/pif-sarayu-srinivasan.jpg", + alt: "Profile picture of Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world.", + caption: "PIF Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world" %} Here is Presidential Innovation Fellow Sarayu Srinivasan in front of Summit, the fastest supercomputer in the world! This up close tour also @@ -72,13 +70,10 @@ importantly, customer touch-points. Clarice Chan, a PIF detailed to the US Department of Veterans Affairs, began her digital transformation journey doing just that. -
- - Profile picture of Clarice Chan seating n a chair at the VA customer call center. - -
PIF Clarice Chan, visiting a VA field office on a - listening tour to understand how the VA interacts with its customers.
-
+{% include "linked-figure.html", + image: "/assets/blog/pif/pif-clarice-chan.jpg", + alt: "Profile picture of Clarice Chan seating n a chair at the VA customer call center.", + caption: "PIF Clarice Chan, visiting a VA field office on a listening tour to understand how the VA interacts with its customers." %} Before diving into designing solutions, Clarice toured VA’s across the country on an immersive listening tour. She spent time observing VA diff --git a/content/posts/2019-11-21-interior-becoming-a-product-manager-post.md b/content/posts/2019-11-21-interior-becoming-a-product-manager-post.md index e1c23a438..38f442614 100644 --- a/content/posts/2019-11-21-interior-becoming-a-product-manager-post.md +++ b/content/posts/2019-11-21-interior-becoming-a-product-manager-post.md @@ -44,12 +44,10 @@ Our plans changed when our first innovation specialist decided to leave for an o ## Help along the way -
- - Product management workshop with 18F and ONRR. There is a group of people seating around a table with yellow stickie notes. On a wall there are long pieces of paper with yellow sticky notes on them - -
18F and ONNR during a workshop
-
+{% include "linked-figure.html", + image: "/assets/blog/eiti-nrrd/nrrd-workshop.png", + alt: "Product management workshop with 18F and ONRR. There is a group of people seating around a table with yellow stickie notes. On a wall there are long pieces of paper with yellow sticky notes on them", + caption: "18F and ONNR during a workshop" %} Luckily, I was not thrown into the deep end without a buoy, as we still had a transition agreement with 18F for a few more months. The 18F employee who had been managing the product began co-working with me as much as possible. She provided me training and resources that helped me better understand the role and tools of the trade, such as roadmapping. I began taking over meetings that she had been running, but we would have weekly coaching meetings to discuss challenges I encountered and questions I had. @@ -73,12 +71,10 @@ As I continue to learn in this role and balance my product management responsibi I encourage my team members to bring me their concerns. While I don’t always have solutions ready, we are often able to brainstorm together and make tweaks to our processes in hopes of continuously improving the way we work. -
- - Screenshot of https://revenuedata.doi.gov/ - -
https://revenuedata.doi.gov/
-
+{% include "linked-figure.html", + image: "/assets/blog/eiti-nrrd/nrrd-home.png", + alt: "Screenshot of https://revenuedata.doi.gov/", + caption: "https://revenuedata.doi.gov/" %} ## What’s next diff --git a/content/posts/2020-02-06-even-with-a-design-system-you-still-need-a-designer.md b/content/posts/2020-02-06-even-with-a-design-system-you-still-need-a-designer.md index b0fcb8944..e1c3ea4b6 100644 --- a/content/posts/2020-02-06-even-with-a-design-system-you-still-need-a-designer.md +++ b/content/posts/2020-02-06-even-with-a-design-system-you-still-need-a-designer.md @@ -34,12 +34,10 @@ We use USWDS at 18F because it helps us: - **Jumpstart projects.** With an out-of-the-box set of components and a theme, it’s easy to get started fast. USWDS also provides [developer packages](https://designsystem.digital.gov/documentation/developers/) and [design files](https://designsystem.digital.gov/documentation/designers/) to cut down on start-up costs. - **Make decisions faster and more confidently.** Designers make thousands of decisions over the course of a project. By having a set of tested components based on best practices, we can reduce the number of decisions we have to make and focus our energy on interactions and elements we know will need more attention. -
- - This illustration shows another before-and-after example of how a website can use utility classes to change the styles of site elements. Five stylized examples of code are given below the two versions of the page - -
You can easily change classes to customize the look and feel of the USWDS template.
-
+{% include "linked-figure.html", + image: "/assets/blog/uswds2-launch/uswds-assets.png", + alt: "This illustration shows another before-and-after example of how a website can use utility classes to change the styles of site elements. Five stylized examples of code are given below the two versions of the page", + caption: "You can easily change classes to customize the look and feel of the USWDS template." %} But, a pattern library doesn’t answer all design decisions. In fact, teams make their first design decisions way before they get to patterns. They have to answer questions like: @@ -67,12 +65,10 @@ USWDS and other design systems give flexibility so teams can build the right sol ### Research and problem definition -
- - A wall covered with handwritten notes from a project brainstorming session with a large team. The image focuses on the team's notes on the project's strengths, weaknesses, opportunities, and threats. - -
Photograph of a brainstorming activity where a large team is discussing and voting on the top strengths, weaknesses, opportunities, and threats of a project.
-
+{% include "linked-figure.html", + image: "/assets/blog/uswds2-launch/swot-exercise.png", + alt: "A wall covered with handwritten notes from a project brainstorming session with a large team. The image focuses on the team's notes on the project's strengths, weaknesses, opportunities, and threats.", + caption: "Photograph of a brainstorming activity where a large team is discussing and voting on the top strengths, weaknesses, opportunities, and threats of a project." %} Using human-centered [service design](https://civicservicedesign.com/what-is-civic-service-design-9fd9deebef99), we put humans first—learning their needs, and then trying to solve their problems with or without technology. Service design allows us to think about the whole ecosystem of a product or service. This helps us think about the effects, intended or not, on all people who would touch what we're creating, making sure we’re thinking inclusively and responsibly about what we create. @@ -80,12 +76,10 @@ Understanding the problem allows us to narrow the scope of a project, which is n ### Build trust and recognition -
- - Before and after screenshots of the SAMHSA treatment finder homepage. The first image shows the original, text-heavy site, and the second image shows the new site with a simpler navigation and clear call to action. - -
Before and after screenshots of SAMHSA Behavioral Health Treatment Services Locator, rebranded as Findtreatment.gov.
-
+{% include "linked-figure.html", + image: "/assets/blog/uswds2-launch/sahmsa-before-after.png", + alt: "Before and after screenshots of the SAMHSA treatment finder homepage. The first image shows the original, text-heavy site, and the second image shows the new site with a simpler navigation and clear call to action.", + caption: "Before and after screenshots of SAMHSA Behavioral Health Treatment Services Locator, rebranded as Findtreatment.gov." %} Visual design is just one part in the wide world of design—it balances form and function, establishes identity, and employs principles that allow users to get information as effortlessly as possible. Visual design also considers people with different visual impairments. @@ -99,12 +93,10 @@ and [Adobe XD](https://designsystem.digital.gov/documentation/designers/) design ### Design for people in a wide-variety of situations -
- - A person in the woods is looking at a paper map while also holding their smartphone. - -
This paper map is also accessible on a smartphone in a low-reception area in the middle of a national forest.
-
+{% include "linked-figure.html", + image: "/assets/blog/uswds2-launch/testing-proto.png", + alt: "A person in the woods is looking at a paper map while also holding their smartphone.", + caption: "This paper map is also accessible on a smartphone in a low-reception area in the middle of a national forest." %} Although many considerations for accessibility are baked into USWDS, 508 compliance is not enough. [Accessibility.18f.gov](https://accessibility.18f.gov/) has a lot of useful tools like the [Pa11y Automated Tool](http://pa11y.org/) and @@ -127,13 +119,10 @@ and abilities. ### Write content that meets people’s needs -
- - A screenshot from plainlanguage.gov showing how language can be made clearer. Language before: - Infants and children who drink water containing lead in excess of the action level could experience delays in their physical or mental development. Children could show slight deficits in attention span and learning abilities. Adults who drink this water over many years could develop kidney problems or high blood pressure. Language after: Lead in drinking water can make you sick. Here are some possible health effects of high lead levels in your drinking water: Children:Delayed growth, Learning disabilities. Short attention span. Adults: Kidney problems, High blood pressure. - -
Before and after content from plainlanguage.gov about the effects of lead in drinking water.
-
+{% include "linked-figure.html", + image: "/assets/blog/uswds2-launch/lead-water-before-after.png", + alt: "A screenshot from plainlanguage.gov showing how language can be made clearer. Language before: Infants and children who drink water containing lead in excess of the action level could experience delays in their physical or mental development. Children could show slight deficits in attention span and learning abilities. Adults who drink this water over many years could develop kidney problems or high blood pressure. Language after: Lead in drinking water can make you sick. Here are some possible health effects of high lead levels in your drinking water: Children: Delayed growth, Learning disabilities. Short attention span. Adults: Kidney problems, High blood pressure.", + caption: "Before and after content from plainlanguage.gov about the effects of lead in drinking water." %} Easy-to-read language lowers a person’s [cognitive load](https://en.wikipedia.org/wiki/Cognitive_load). That means people can find what they’re looking for faster, and with less stress. Content designers use [plain language](https://www.plainlanguage.gov/), or more-familiar words, and they'll define words that aren’t familiar. It also takes into consideration what’s appropriate given the user’s situation. diff --git a/content/posts/2020-03-10-ask-18f-po-vs-cor.md b/content/posts/2020-03-10-ask-18f-po-vs-cor.md index 774b5acd5..3b2d3b4be 100644 --- a/content/posts/2020-03-10-ask-18f-po-vs-cor.md +++ b/content/posts/2020-03-10-ask-18f-po-vs-cor.md @@ -114,12 +114,10 @@ serves as the liaison between the agency and the contractor team. The table below gives an overview of the difference between a COR and a PO. -
- - This table shows the difference in duties between COR and PO. COR duties: Monitor contractor performance, Inspect and accept products/services, Review all contractor invoices, Maintain a record (or file) of all actions taken as COR, Awareness of the contractor’s status and of any issues related to the contract. PO Duties: Clearly define and prioritize the Product Backlog to best achieve vision and add value to the agency and users, Optimize the value of the work the Development Team builds, Ensure that the Product vision and backlog are visible, transparent, and clear to all, Ensure the Development Team understands items in the Product Backlog to the level needed. - -
COR and PO Duties.
-
+{% include "linked-figure.html", + image: "/assets/blog/Acquisitions/cor-po-table.png", + alt: "This table shows the difference in duties between COR and PO. COR duties: Monitor contractor performance, Inspect and accept products/services, Review all contractor invoices, Maintain a record (or file) of all actions taken as COR, Awareness of the contractor’s status and of any issues related to the contract. PO Duties: Clearly define and prioritize the Product Backlog to best achieve vision and add value to the agency and users, Optimize the value of the work the Development Team builds, Ensure that the Product vision and backlog are visible, transparent, and clear to all, Ensure the Development Team understands items in the Product Backlog to the level needed.", + caption: "COR and PO Duties." %} ## Why are they important? diff --git a/content/posts/2020-04-21-a-token-of-our-affection-uswds-2.md b/content/posts/2020-04-21-a-token-of-our-affection-uswds-2.md index 5412a5fc8..b99c3172e 100644 --- a/content/posts/2020-04-21-a-token-of-our-affection-uswds-2.md +++ b/content/posts/2020-04-21-a-token-of-our-affection-uswds-2.md @@ -80,12 +80,10 @@ tokens that matched cloud.gov’s branding. It also gave us a vocabulary to talk about colors without having to use hex codes. Soon, we were talking about how the sidebar background should be `accent-warm` (USWDS color token `gray-warm-10`) rather than `#E6E6E2`. -
- - A screenshot of a design file showing how multiple colors from cloud.gov's original color palette map to USWDS color tokens. - -
USWDS has a large color library, so we were able to find USWDS color tokens that closely matched existing brand colors.
-
+{% include "linked-figure.html", + image: "/assets/blog/web-design-standards/cloud.gov-uswds-tokens.jpg", + alt: "A screenshot of a design file showing how multiple colors from cloud.gov's original color palette map to USWDS color tokens.", + caption: "USWDS has a large color library, so we were able to find USWDS color tokens that closely matched existing brand colors." %} In the design files, we were able to use the USWDS color library to test and import colors into our design. USWDS color tokens include [a graded system](https://designsystem.digital.gov/design-tokens/color/overview/) @@ -113,12 +111,10 @@ pixel values. By using the same grid system in design mocks and in code, it was easy for us to document and troubleshoot how the layout should be adjusted. -
- - A mockup of a Cloud.gov webpage with design annotations for the grid, the spacing units, and typography notes. - -
An example of the annotations we used when designing the home page that used the USWDS grid system as well as USWDS spacers.
-
+{% include "linked-figure.html", + image: "/assets/blog/web-design-standards/uswds2-grid.jpg", + alt: "A mockup of a Cloud.gov webpage with design annotations for the grid, the spacing units, and typography notes.", + caption: "An example of the annotations we used when designing the home page that used the USWDS grid system as well as USWDS spacers." %} The USWDS grid includes [a number of CSS classes and utilities](https://designsystem.digital.gov/utilities/layout-grid/) that made it easy for us to prototype quickly. Grid columns classes, diff --git a/content/posts/2020-06-30-transforming-how-dojs-civil-rights-division-engages-with-the-public.md b/content/posts/2020-06-30-transforming-how-dojs-civil-rights-division-engages-with-the-public.md index 36195a2bd..b62bd303e 100644 --- a/content/posts/2020-06-30-transforming-how-dojs-civil-rights-division-engages-with-the-public.md +++ b/content/posts/2020-06-30-transforming-how-dojs-civil-rights-division-engages-with-the-public.md @@ -26,12 +26,10 @@ image: /assets/blog/blog-post_header-2.png --- On Feb. 7, 1961, James Meredith submitted a [letter](https://www.jfklibrary.org/asset-viewer/archives/BMPP/020/BMPP-020-007) to the Department of Justice (DOJ) asking for the Department’s support in his admission to the University of Mississippi by enforcing federal desegregation laws not being respected by the state. Through the combined efforts of the local NAACP, the Department of Justice, and the US Supreme Court, Meredith eventually became the first African-American student admitted to the university. -
- - Image of James Meredith letter submitted to the Department of Justice (DOJ) asking for the Department’s support in his admission to the University of Mississippi by enforcing federal desegregation laws not being respected by the state. - -
James Meredith letter submitted to the Department of Justice (DOJ)
-
+{% include "linked-figure.html", + image: "/assets/blog/james-meredith-letter-sm.png", + alt: "Image of James Meredith letter submitted to the Department of Justice (DOJ) asking for the Department’s support in his admission to the University of Mississippi by enforcing federal desegregation laws not being respected by the state.", + caption: "James Meredith letter submitted to the Department of Justice (DOJ)" %} Since 1961, the Department of Justice has come a long way in making it easier for people to report discrimination or a violation of rights. Now, with the help of 18F, they have transformed how the Civil Rights Division receives and processes civil rights reports using modern technology and user experience design practices. @@ -44,23 +42,19 @@ Today, the Civil Rights Division estimates that they receive over 100,000 report The Division also receives reports of potential voting rights violations, particularly during election season. -
- - Previous “how to file a complaint site. - -
Previous “how to file a complaint” experience
-
+{% include "linked-figure.html", + image: "/assets/blog/how-to-file_old.gif", + alt: "Previous “how to file a complaint” site.", + caption: "Previous “how to file a complaint” experience" %} Up until now, the experience of filing a report was confusing and inconsistent for the public. The Civil Rights Division is a complex organization with several specialized units (or “sections”). This complexity was confusing for some victims of civil rights violations. A victim reporting a violation had to pick among dozens of possible reporting pathways. Without clear guidance and expectation setting, many people submitted reports that required extensive follow-up to collect missing information, or submitted reports that fell outside the purview of the Division altogether. In order to be more responsive to the public’s changing communication needs and the increased reporting volume,the Civil Rights Division, in close collaboration with 18F, [has launched](https://www.justice.gov/opa/pr/department-justice-announces-launch-civil-rights-reporting-portal) a user-friendly online submission experience at [civilrights.justice.gov](https://civilrights.justice.gov/) that transforms the way the Division collects, sorts, and responds to civil rights reports. -
- - The new Civil Rights Division landing page of civilright.justice.gov. - -
The new experience for reporting a civil rights violation
-
+{% include "linked-figure.html", + image: "/assets/blog/doj-crt-landing-page.gif", + alt: "The new Civil Rights Division landing page of civilright.justice.gov.", + caption: "The new experience for reporting a civil rights violation" %} We worked with stakeholders from the Division to craft these design principles for the new experience, which subsequent designs, prototypes, and builds were tested against: @@ -73,12 +67,10 @@ Backed with in-depth usability research, this new user-centered online reporting For Division staff, this new experience creates a more consistent, collaborative, and transparent process. It allows staff to easily review, sort, and redirect reports to the appropriate team for analysis. This saves time and energy, freeing up more capacity for the Division to focus on advancing civil rights. -
- - Pages of the new online civil rights complaint form. - -
Pages of the new online civil rights complaint form
-
+{% include "linked-figure.html", + image: "/assets/blog/doj-crt-complaint-form.png", + alt: "Pages of the new online civil rights complaint form.", + caption: "Pages of the new online civil rights complaint form" %} The core development team across the Civil Rights Division and 18F is still iterating on the experience. After launching for internal use and as a ‘beta’ experience, the team is announcing this website more widely so we can continue to improve and adapt with more real reports and feedback from the general public. diff --git a/lib/asset_url.js b/lib/asset_url.js new file mode 100644 index 000000000..98f92444f --- /dev/null +++ b/lib/asset_url.js @@ -0,0 +1,26 @@ +const path = require('path') +const Image = require('@11ty/eleventy-img') + +module.exports = async (imageSrc) => { + let pathPrefix = '' + + if (process.env.BASEURL) { + pathPrefix = process.env.BASEURL + } + + const ext = path.extname(imageSrc) + const fileType = ext.replace('.', '') + const formats = [fileType] + const options = { + formats, + outputDir: './_site/img/', + filenameFormat (id, src, width, format, opts) { /* eslint-disable-line no-unused-vars */ + return `${path.basename(src, path.extname(src))}-${id}.${format}`; + } + } + + const metadata = await Image(imageSrc, options) + + const data = metadata[fileType] ? metadata[fileType][0] : metadata.jpeg[0] + return `${pathPrefix}${data.url}` +}