The 18F Method Cards are a collection of tools that describe how our teams put human-centered design into practice. We’ve gathered them here and created simplified instructions to help other organizations and federal offices adopt human-centered design into their own projects. These cards are focused on design in the context of digital services, but can be adapted to non-technical design projects as well.
The basics of human-centered design
Human-centered design is a methodology that incorporates feedback from the people for whom you are designing throughout the design process. The goal of human-centered design is to end up with a solution that is tailored to meet people’s needs, with little wasted effort and reduced risk. To achieve this goal, design teams at 18F talk with and observe real users to understand their needs, context, and challenges, come up with design concepts that might address these challenges, and then test them with real users. Learn more about the benefits and techniques of human-centered design.
Using the Method Cards
The Method Cards are broken up into the four broad design phases your team is likely to go through during a project. While some cards refer to other methods, you may use them independently. You do not need to use all the cards in a section or complete certain tasks before moving on to others. Take whatever cards are most useful to your team and incorporate more tools as you’re ready.
We’ve included additional guidance for using these methods in government research, specifically around the Paperwork Reduction Act (PRA). We’re only able to include brief guidance on the PRA, and federal workers should check with their agency counsel for additional guidance. You should also read the cards in the fundamentals section for more background on conducting design research as a government employee.
Go behind the scenes
As with all of 18F’s products, the Method Cards are completely open source. You are free to copy, share, or reuse them as you wish. We also welcome input from the public, whether it’s correcting a typo or suggesting a new method to include. You can see our guidelines for contributing on GitHub.
October 25, 2018
- Clear overview of categories on homepage: The homepage has been updated to display brief summaries of method categories and links to the individual cards, replacing the long scroll of all cards. This is intended to give users a quick overview of the purpose and use cases for each category.
- Changed “Method Cards” to simply “Methods”: Recognizing this as more of a digital tool, we removed the print-centric “card” reference.
Print the methods: In cleaning up the homepage we’ve created a
- Interview checklist resource to the ‘Stakeholder and user interviews’ method card: This printable interview checklist outlines and provides suggestions for key moments in the interview process, including introductions, warm-up questions, topic-specific questions, activities, wrap-up, and post-interview debrief. Sample prompts and links to additional resources are provided within.
- Resources for Usability Testing: Example usability testing script for easy reuse, an example interview debrief worksheet to facilitate post-interview conversation, and an example rolling issues log to help capture results from a usability test
- Redirects from
/category/methodso user can reference a method directly
- Instructions on Usability Testing card with five simple steps
- README for GitHub repository
- Styles associated with category summary pages, mobile display, and additional resources
- Permalinks to category summary pages
- The Open Graph and Twitter share image URLs
- Task analysis hotfix
- Mobile padding and print button display
- Protected against security vulnerabilities by updating required gems to most recent versions
- Typos across several cards
February 02, 2018
- Meta info for social sharing
- Jekyll smartify filter
- Redirect for heuristic evaluation
- Underline to method titles
- Missing “How to” heading to Cognitive Walkthrough method Fixed
- Naming of method Heuristic Analysis to Heuristic Evaluation (thanks @headquarters!)
- Our README, CONTRIBUTING, ISSUE and PULL REQUEST templates
- Method pages to use more markdown
- Secondary page button colors to white
- Header navigation to individual method pages
- H1 to be H2 within each method
- Content on Content Audit method as non-printable (so it fits in the printable area)
- A few permalinks
- Top navigation flashing bug (thanks @headquarters!)
- Print layout for individual methods
- Minor styling inconsistencies
- Rounded corner rendering
September 18, 2017
- Removed Metrics definition card and added Design hypothesis card. We learned that the Metrics definition card was hard for people to understand how to apply. We started making revisions and they became so significant that the title Metrics definition no longer fit. So we made a new card, Design hypothesis.
- Updated the
ConsentForm.docxfile based on conversations with GSA’s Office of General Counsel (our lawyers). The form is now titled “Design Research Participant Agreement” (The filename hasn’t changed due to older links). The form now includes language to address the Anti deficiency Act, and provides links to our Privacy Act Notice and Privacy Impact Assessment for Design Research.
- Added Google Tag Manger to gain a deeper understanding of how folks are using the method cards.
- Updated styles to make margins consistent. Sections no longer force new pages when printing from the home page.
- Updated to the latest US Web Design Standards v1.3.1.
June 12, 2017
We transitioned the Methods Cards site into Federalist, making the site easier to host and to maintain. As a part of this process, we reconfigured the site backend to simplify its structure and to remove unnecessary files.
We updated the Methods Cards source files to use Markdown, so that the individual cards can be more easily updated, and so that our documentation is consistent with other guides produced by 18F.
We added CSS print styles and new print buttons, in order to make it easier for users to print the entire set of cards, or a single card of their choice, or all the cards of a specific type (such as the full set of “Validate” cards).
We completed a thorough content audit of the website to identify places where the text included too much jargon from the design and tech industries. We then updated the cards to use more plain language, so that they will be easier for a wider variety of users to understand.
We started adding links to examples that demonstrate how 18F has used specific methods in our own work. We will continue adding these examples as they become available.