18f/methods

The methods 18F uses to practice human-centered design.

⚠️ This guide has moved to the consolidated 18F guides repository.

Methods

The 18F Methods were created to describe how 18F puts human-centered design into practice. While this was developed primarily as an internal resource, we hope it can help everyone adopt the methods of human-centered design.

Why methods?

In order to function well within cross-functional teams, designers and other contributors need to know a few things: which methods they might choose from, why one particular method makes more sense than another at any given moment, and, once they’ve picked a method, how to actually execute it. 18F Methods collects this essential information as a series of cards. In practice, we’ve found the Methods can provide folks with a gateway into our work and build internal alignment around a shared vocabulary.

Specific to 18F, specific to the federal government

It’s important to note that the 18F Methods are designed to account for two things that may not otherwise concern a more generic collection of design methods. First, these methods directly reflect and support 18F’s human-centered work. (They are also continuously updated in a human-centered way — how meta!) Second, 18F Methods are designed to keep federal employees on the happy side of the law. This collection specifically includes helpful information which designers working in the federal government may need, such as privacy and the Paperwork Reduction Act.

Getting started

Reading the Methods online

You’re presently looking at the Methods’ GitHub (code) repository. Please visit our homepage to read the Methods online.

Printing the Methods

To print a copy of the Methods for offline use, visit the Methods print page. You may need to select file → print… from your web browser.

Contributing to the Methods

For more information on contributing to the Methods (or even making a suggestion), see CONTRIBUTING.md. If you would like to suggest a new Method be added to the collection, please follow the instructions here.

Learn more about our goals and the way we work in our wiki.

Development

Running the Methods website on your local machine

Using Docker (recommended)

1. Install Docker for Mac
2. Clone this repository
3. From this repository's root directory, run docker-compose up --build
4. Open http://localhost:4000

Without Docker

You will need Ruby ( > version 2.1.5 ). You may consider using a Ruby version manager such as rbenv or rvm to help ensure that Ruby version upgrades don’t mean all your gems will need to be rebuilt.

On OS X, you can use Homebrew to install Ruby in /usr/local/bin, which may require you to update your $PATH environment variable:

$ brew update
$ brew install ruby

To serve 18F Methods locally, using methods as the name of your new repository: Run each of the following steps to get the site up and running.

$ git clone [email protected]:18F/methods
$ cd methods
$ bundle install
$ jekyll serve

You should be able to see the site at: http://localhost:4000/

Deploying

The Methods guide uses a webhook to deploy to Cloud.gov pages. When viewing a pull request, expand "Show all checks." If pages/build is complete, click "details" for a link to a preview for that branch.

Current product owner

• Melissa Braxton

Past contributors

• Tiffany Andrews
• Carly Jugler
• Megan Reed
• Peter Rowland
• Julie Strothman
• Anne Petersen
• Amirah Aziz
• Ana Monroe
• Jeremy Canfield
• Elisa Chen
• Erica Deahl
• Carolyn Dew
• Matt Dobson
• Andre Francisco
• Leah Gitter
• James Hupp
• Nicky Krause
• Omid Ghaffari-Tabrizi
• Julia Lindpaintner
• Colin MacArthur
• Andrew Maier
• Brad Nunnally
• Eric Richards
• Eric Ronne
• Jennifer Thibault
• Russ Unger
• Scott Weber
• Victor Zapanta

Public domain

This project is in the worldwide public domain. As stated in CONTRIBUTING:

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

methods's Issues

Deploying to Heroku?

I'm working on adding a procfile to help those deploy this to Heroku. Would that be helpful?

When I deploy to Heroku directly, I get: "desc="No web processes running""

18F Method PDF Color Blindness Issues

After downloading the printable Method Cards PDF, I noticed that the pages/cards will have issues for those that are color blind being able to tell the different cards apart.

Below are the thee main color blindness type and what the card look like to someone with each of those types of color blindness. Not positive on the percentage of each type but these are the numbers I remember.

Deuteranope - form of red/green color deficit - most popular - 6% - 7%

Protanope - another form of red/green color deficit - next most popular - 2% - 3%

Tritanope - blue/yellow deficit- very rare - .05%

The following is the online color blindness tool by Vischeck that let's you check if there might be any issue for those that are color blind.

An easy way to correct this problem would be to add texture to the backgrounds such as checkerboard pattern for one, diagonal lines for another, horizontal for a third, and vertical for the last. That is if you only had the color swatches at the top of the card and not on the entire card because the lines/patterns would make the text difficult to read.

I'm assuming all this applies to the printable cars too.

Typo in Bodystorming card

In the printable cards, Bodystorming has a typo:
“To create participants that interactions are human and physical,”

Not sure what it is supposed to mean, probably “To create participant interactions that are human and physical” (singular “participant” and swap “that” and “interactions”)?

./go init error

First of all: THANK YOU! This project is amazing!

Secondly, I'm trying to get a dev environment going and I'm running into this error:

➜  ./go init
Please add "gem 'go_script'" to your Gemfile

I then add gem 'go_script' to my Gemfile, but then I get this error:

➜  ./go init
./go:27:in `require': cannot load such file -- guides_style_18f (LoadError)
	from ./go:27:in `<main>'

Any ideas?

Update line spacing for the print cards

Where would I go to get the source Indesign document for the cards? Wanted to clean up some line-spacing issues :simple_smile:

Consistency edit

Document substantive issues, and share with team.

Remove repo-specific publishing webhook

An update to guide templates now makes it so that we don't have to set up our own webhook. From what I can tell, we should remove ours so that it's not doing something twice...I think.

See this: 18F/guides-template#61 (comment)

(Disclaimer: I am transcribing an issue that I don't really understand)

Typo on "cognitive walkthrough" card

The "cognitive walkthrough" card says "Facilitate a walkthrough a solution where probing questions", which seems to be missing a colon (or another piece of punctuation or a word). Tiniest of issues!

As an enthusiastic sharer of this resource across social media (and slack) I would like a "card" replete with compeling photgraph to appear when I paste the main link.

Into
Slack
Twitter
Facebook

Proposed method: DocSprint

This is also filed as issue 18F/hub#490. I'd like to propose adding the "DocSprint" method to the method cards. The "what it is," "reasons to use it," "time required," and "how to do it" are all pretty well detailed in these four Hub pages.

@mbland specifically used these to help improve onboarding, but I think these could be of great use to both Product and/or Consulting people. Could either @annahsebok or @jtag let us know if there's a need for us to add this method to the method cards?

Clarify incentives as "financial" in informed consent card.

From @NoahKunin as he reviewed the cards prior to the blog launch:

I think there could be a little more clarity between the incentives cards and item 4 of informed consent on "waiving right to compensation". It might be simple to say in this context they are "waiving right to financial compensation"

18F Method PDF Has Poor Color Contrast

After downloading the printable Method Cards PDF, I noticed that the pages/cards that had full-color backgrounds (green, gold/yellow, and light blue) with white text had poor color contrast.

The Color contrast ratio needs to be 4.5:1 and the following are the color contrast ratios for the backgrounds and white text that did not pass:

• gold/yellow - 2.03:1 - (Make)
• green - 2.81:1 - (Decide)
• orange - 4.03:1 - (Validate)
• light blue - 4.18:1 - (Discover)

The easiest way to fix this issues would be the change the text color from white (#ffffff) to black (#000000). Another solution would be only to make the tops of the cards instead of the whole card a given color with no text on it.

I'm assuming all this applies to the printable cars too.

Method cards in printable PDF are not aligned page to page making bulk cutting impossible

First - GREAT resource, thanks so much for sharing.
One nit-pick is that the printable PDF cards aren't all fully centered on the 8.5x11 sheets, meaning to create physical 2 sided cards there is a lot of hand cutting and folding involved. If the method cards were all aligned in the center of each page they could be bulk cut several at a time and then folded with the tools they have at Fedex Office, Staples, etc.

An alternate suggestion would be to make the cards cover a full 8.5x11 sheet from the start eliminating any cutting requirements completely. This approach might require some layout adjustments but would be doable considering there are no shapes that bleed over exterior edges.

[pages-staging] Excluding the first page in a section, pages return a 404 error

Steps to reproduce

1. Navigate to https://pages-staging.18f.gov/methods/
2. Click on Discover in the side nav to expand that section
3. Click on Feature Dot Voting (the first page in that section). It loads as expected.
4. Expand the Discover section again.
5. Click on KJ Method, the second page in that section. It returns a 404. This is true for all pages except for the first one in each section.

Additional info
@jenniferthibault noticed that the URL is missing the /methods subdirectory on the pages that don't load. So instead of https://pages-staging.18f.gov/methods/metrics-definition/ (the correct URL) (the correct URL) it's looking for https://pages-staging.18f.gov/metrics-definition/ .

Beta tester popup unusable on iPhone 5S (embedded Safari)

Visiting methods.18f.gov for the first time from a Twitter link (using the browser embedded in the Twitter app), the popup seeking beta testers for new 18f projects had unusable dropdowns. I expanded the "Where are you located?" dropdown, but no content was visible. Please see the photo below:

Thanks very much for your work! Looking forward to seeing future 18f projects.

For newbie users of the printed method cards, show where a method fits relative to other phases, so that they can keep other tactics in mind.

Could the Phase show where it is relative to other phases, maybe a fainter listing or even just empty boxes v/s a filled box for others v/s current? I know they aren’t really “ordered”, but it might help newbies remember where they are in the process or relatively where the others are. (Especially if printed black and white, the color-coding of the cards themselves doesn’t help.)

Metrics definition missing "Resources" subhead?

It appears that the usual Resources subhead is missing from this card.

Proposed Method: benefit vs effort axis

just dropping it here so it doesn't get lost. used often in product strategy workshops.
ideally the partner literally experiences placing sticky notes of stories/needs on this type of axis on a whiteboard.

https://18f.slack.com/archives/product/p1461708503000122
^^ discussion in #product about this method.

Link Errors "404 Not Found"

Behavior: Old URLs are not directing to new URLs "404 Not Found"

Examples:
OLD URL: https://methods.18f.gov/personas/
NEW URL: https://methods.18f.gov/decide/personas/

OLD URL: https://methods.18f.gov/feature-dot-voting/
NEW URL: https://methods.18f.gov/discover/feature-dot-voting/

Login to https://methods.18f.gov/personas/ or https://methods.18f.gov/feature-dot-voting/ experience link error

Solution: Expect old links to direct to new URLS

18F Method PDF Has Poor Color Contrast of Headings

After downloading the printable Method Cards PDF, I noticed that the pages/cards have poor color contrast of what looks like headings (light blue) and other quotes or important text. The text is light blue on a white background and has color contrast ratio of 4.18:1 when it needs to be 4.5:1 or higher.

I'm assuming all this applies to the printable cars too.

Develop a plan and schedule for producing Method Cards video series, and linking to/featuring videos on Method Cards site.

• As a methods card user, I would like guidance on how I might sequence methods or use different methods together so that I can better meet my specific project needs.
• know about cards, get cards, access cards
• As a methods cards user I want the cards to link to examples, and case studies so that I can learn how others have used them and how I can apply them to my project.

Incorrect link to 18F pages in footer of Methods pages

This is so tiny I feel bad making an issue, feel free to ignore.
The link to 18F pages in the footer of the Methods pages goes to methods.18F.gov instead of pages.18F.gov.
I'd send a PR but fell into the Jekyll wormhole trying to chase it down in the 2 seconds I had to look.

Add "Also Known As" to method names

This may be a tiny thing, but especially since one of the goals of all this is to control the vocabulary (allow everyone to talk about things using the same language), maybe it'd be a good idea to include "this method is also called..." on the method titles cards. (Actually, I'm not sure if that's the correct term: the blue cards with the method's name and description.)

For instance, the KJ method (should it be "KJ Method"?) sounds very similar to affinity grouping or card sorting (though to make it more like those, I'd add to the KJ text that people should take turns adding one answer to the wall in turn; text is unclear on this). People react well when they recognize something they're being asked to do.

Broken Links - missing the anchor #

Internal links are missing the anchor hashtag (#)

Add resources for research hygene

Just a quick thought: it'd be great to provide a template for an "informed consent document" for users participating in government research. It's also likely worthwhile to provide guidance on how to create a "receipt of consent" for those participating in studies.

Reduce spacing below headers created by template updates

We knew that merging in @mbland 's update to the guides template was creating a large gap space underneath page headers, as seen in the screenshots below:

Desktop

---

##### Desktop

---

##### Mobile

---

##### Mobile

---

---

This space created a gap in the flow of information, and should be removed.

Develop plan for testing new site

• Cards are understandable, usable
• How well our slew of website and content changes meet government designer needs

Acceptance criteria

• Draft plan
• Give team an opportunity to review
• incorporate any team feedback

Incentives card should mention Anti-deficiency Act

The incentives card should be updated per recent conversations with GSA OGC and the recent updates to our participant agreement. I'd also like to incorporate any preliminary guidance from @esgoodman based on her work.

Come up with plan for future print deck

• make a prioritization statement for how print decks should be used (when do we say yes to a request and when do we say now?)
• when do we want to do another print run?
• what modifications do we want to make beforehand?
  tracking!

===

• Reach out for visual design help
• Consider a custom URL to and setting up GA to track how many users are getting to the site from the printed cards.
• Update InDesign files with new content
• Work with OPP on new print run
• Work with TTS to find $ for another print run

methods website still using the old logo

in the banner. https://methods.18f.gov/

Clarify KJ method card

The language in the KJ method should be edited to be more useful to new users. There are two main issues

• The name "KJ method" is a jargon term and may be off-putting to users who are unfamiliar with it
• The method is similar to the affinity diagramming card in a the Decide section. It is correct for there to be two different cards since these methods are substantially different, but the KJ method card should be edited to reference affinity diagramming and highlight why it's important to use this method in the discover phase.

Tweak language on the "metrics definition" card

@brethauer Opening this issue for tweaking language on the "metrics definition" card, as discussed in #40

Should the main menu flyout close automatically after a selection is made?

Question. I noticed that the main menu stays open after a selection is made. So, for example, if I open the Discover section and select KJ Method, I am linked down the page, but the menu stays open. This was contrary to what I expected (i.e., I thought the menu would close automatically), but that doesn't mean the current behavior is wrong.

Did we intentionally leave it open? Do others think it would make sense to have it automatically close, or is it just me? ( cc @MelissaBraxton @line47 @jenniferthibault )

Method order in the side nav should match method order on the phase pages.

The side nav lists the methods alphabetically across each phase.

The phase pages list the methods in categories. Within each category, the methods are alphabetical.

The order on the pages is more logical, since phases that help accomplish similar things are grouped more closely. If a user is on an individual method page, the user doesn't see the categories; they only see the side nav. But the user can't tell without going back to the phase page which other methods are similar in purpose.

Adding metadata for order or weight would allow us to order the side nav the same way we order on the phase pages, even if we don't list the categories in that side nav.

remove blank page from printing

When printing all the cards, all of the cards in a certain category, or a single card, the print interface includes a blank sheet of paper before printing the desired content on page 2.

We should remove the blank first page so that the printed content starts on page 1.

cc @line47

Proposed change in description of repo.

Hey!

I'm doing a quick audit of all of 18F's GitHub repos to make sure that descriptions, ReadMe's, and issues are written as concisely and descriptively as they can be. This will help other organizations who would like to adapt our code as well as the public — who may be interested in adapting our code or contributing to our repos.

The current title of this repo is: Method Cards

Would it be possible to describe what those are, in about a sentence?

That way, anyone who comes across it here will know exactly what the repo contains.

Also: I am happy to help you with this, but there is no README for this repo. At a minimum, a README should have a description of the project and licensing that indicates this project is in the public domain. Here is the text for that:

Public domain

This project is in the worldwide public domain. As stated in CONTRIBUTING:

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

Professional Printing Option

So, I tried printing these at home using the instructions provided, even going as far as laminating and, to be honest, they look like crap. I would really like to have a professional looking deck of these cards, maybe something I could give as a gift, but the only printing option is for printing at home, folding and gluing. What would be really nice is to have a professional printing option. Something that could be taken to Kinko's or somewhere to have a really nice set print out. From my understanding all it would take is to reformat the PDF to have the back sides of the pages be put on a single page to allow for two sided printing. 18F must already have this file because I've seen their professionally printed out decks and they look really nice.

print cards

Replace Metrics Definition method with Design hypothesis method

content for the design hypothesis method here: https://docs.google.com/document/d/1uajO1S6QUFlH9L-C5qoY-ziK0udzQEn9fuxR5_D59DQ/edit?pli=1

Acceptance criteria

• Design hypothesis is on the methods site
• Metrics definition is not on the methods site

18F Method PDF is Not Accessible to Screen Reader Users

After downloading the printable Method Cards PDF, I attended to use a screen reader (JAWS 14.0) to see how accessible the document was and found out that PDF was inaccessible. JAWS told me the PDF was not tagged. See screenshot below.

When attempting to read the PDF JAWS reads out title of document then the following:

"alert colon document not available".

This happens when the PDF has not been created correctly or using Adobe Acrobat Pro version 9 or newer or when no document structure has been built into the document.

I'm assuming all this applies to the printable cars too.

Review and update readme.md documentation

Review and update readme.md documentation:

• Review content and links for accuracy
• Update info for running the site locally

CloudFoundry account

May I have a CloudFoundry account? Many thanks!

Accordion not working on sub-pages

For some reason there's a javascript error on the sub-pages that's preventing the accordion from being initialized. I don't have time today to figure it out, but can look into it later if nobody else has time to.

Test out release note displayed on "About" page.

Update incentives card per recent conversations with GSA OGC and the recent updates to our participant agreement.

• Draft revisions
• Incorporate any guidance from @esgoodman
• Circulate for team to review

How should we handle changes that need to be reflected on the printed cards?

Question originally asked by @jenniferthibault in #27:

suggestions for a good way to make changes on the site & the printed cards, without losing track? Keeping the print cards up to date is definitely important, but it takes ~20 min each time we need to re-export and upload, so minimizing the number of times we do that would be 👍

My initial responses (with a few adjustments from the original):

• Apply a tag like, say, card copy to any PRs that include language updates that affect the cards.
• Specify in each PR exactly which methods are affected. The file changes themselves will show it, but this way it may be easier to see when multiple PRs affect the same method. A small language change on one method will usually not be worth re-exporting, but six or seven small changes on the same method might be.
• Establish a regular update schedule for non-urgent changes to the cards. What's a good frequency?
• Make sure 18F staff know how to find the INDD files so other designers can address if/when such issues arise.

What do people think? Other ideas? Problems with the above?

Missed list item in "Bodystorming" method

The list item here is not properly nested.

Make PRA language for methods with small participant counts more accurate

Some methods make reference to "fewer than nine" participants in explaining why the Paperwork Reduction Act doesn't apply. It may be true that these methods can be performed with fewer than nine participants, but the relevant point for the PRA is actually that fewer than ten participants are participating. We should update those methods to reflect that.

Markdown links not transforming to HTML on Prototyping card

on: https://federalist.fr.cloud.gov/preview/18f/methods/sw-design-nav-2/prototyping/

I didn't check to see if it's happening in other places.

(otherwise new site looks awesome! ✨ )

Change additional resources' naked URLs to hyperlinked text

The original formatting was based on cross-functionality with print cards where visible URLs were important. If we get a bit of spare time before a release, we should change the copy for this digital version to the title as it appears on the destination pages of those hyperlinks.

But we may need to figure out how print-at-home versions of the cards will work before we make this change.

Methods Pages Missing Metadata

Issue

Methods pages are missing metadata that would help them be discoverable on search and more shareable/robust on social media. Specifically, the pages could really benefit from:

• meta description (most urgent)
• OpenGraph title
• OpenGraph description
• OpenGraph URL
• OpenGraph image
• OpenGraph type
• OpenGraph site_name

(It could also incorporate Twitter Cards, but that's not as urgent.)

Resources

This has some useful background:
https://moz.com/blog/meta-data-templates-123

Background

I love the Methods cards and it will be helpful to my own work at an agency. I just want to help them be more discoverable!