Use Derisking guide styled checklists for methods checklists

assets/_common/styles/custom-styles.scss

@@ -1,5 +1,7 @@
 @use 'uswds-core' as * ;
 
+$bullet-spacing: 1.25rem;
+
 // Highlight TODO links to make them visually standout
 .todo-link,
 a[href*="/TODO/"] {
@@ -146,3 +148,50 @@ figcaption details {
 h2.heading-md {
   margin-top: units(2);
 }
+
+/* checklists and key questions */
+.guide-checklist,
+.key-questions {
+  @include u-font('sans','md');
+  color: color('white');
+  padding: units(1);
+}
+
+.guide-checklist {
+  background-color: color('primary');
+}
+
+.key-questions {
+  background-color: color('primary-darker');
+}
+
+.guide-checklist + ul,
+.key-questions + ul {
+  background-color: color('blue-5');
+  margin-top:0;
+  padding-top: units(1);
+  padding-right: units(2);
+  padding-bottom: units(1);
+}
+
+.guide-checklist + ul li,
+.key-questions + ul li {
+  margin-bottom: units(1);
+}
+
+.guide-checklist + ul,
+.guide-checklist + ul ul {
+  list-style: none;
+  margin-left: 0;
+  padding-left: units(1);
+}
+
+.guide-checklist + ul li {
+  padding-left: $bullet-spacing;
+  text-indent: (-1 * $bullet-spacing);
+
+  &:before {
+    content: '\25A1';
+    padding-right: units(1);
+  }
+}

assets/derisking/styles/derisking-styles.scss

@@ -4,7 +4,6 @@
 # Styles specific to the De-risking guides
 -----------------------------------------------------------*/
 
-$bullet-spacing: 1.25rem; 
 $tagline-image-size: 11.6rem; // Match current size 
 
 .tagline__image {
@@ -69,51 +68,6 @@ $tagline-image-size: 11.6rem; // Match current size
   padding-left: units(2);
 }
 
-.guide-checklist,
-.key-questions {
-  @include u-font('sans','md');
-  color: color('white');
-  padding: units(1);
-}
-
-.guide-checklist {
-  background-color: color('primary');
-}
-
-.key-questions {
-  background-color: color('primary-darker');
-}
-
-.guide-checklist + ul, 
-.key-questions + ul {
-  background-color: color('blue-5');
-  margin-top:0;
-  padding-top: units(1);
-  padding-right: units(2);
-  padding-bottom: units(1);
-}
-
-.guide-checklist + ul li, 
-.key-questions + ul li {
-  margin-bottom: units(1);
-}
-
-.guide-checklist + ul {
-  list-style: none;
-  margin-left: 0;
-  padding-left: units(1);
-}
-
-.guide-checklist + ul li {
-  padding-left: $bullet-spacing;
-  text-indent: (-1 * $bullet-spacing);
-
-  &:before {
-    content: '\25A1';
-    padding-right: units(1);
-  }
-}
-
 .guide-highlight {
   background-color: color('blue-5');
   padding: units(2);

content/methods/interview-checklist.md

@@ -19,89 +19,89 @@ eleventyExcludeFromCollections: true
 ## Pre-interview preparation
 **Set aside 10 minutes** before the interview begins to help your team intentionally transition to an inquiring mindset, to clarify with your colleagues their respective roles, to check any technologies on which the interview will rely, etc.
 
-### Make sure to
-- [ ] Remind your team of the purpose of the interview
-- [ ] Establish clear roles for anyone who will join (for example, moderators, observers, notetakers, etc.).
-- [ ] Confirm with teammates, especially remote ones, how they might ask questions during the interview (for example, in a Slack thread)
-- [ ] Do a tech check: confirm that screen sharing, recording, etc. works
-- [ ] Check receipt of a signed participant agreement ([example]({{ "/ux-guide/participant-agreement/" | url }}))
-- [ ] Double-check any links, files, etc. that participants will need to evaluate (i.e., ensure that your concept, wireframes, or prototypes are available for testing)
+### Make sure to {.guide-checklist}
+- Remind your team of the purpose of the interview
+- Establish clear roles for anyone who will join (for example, moderators, observers, notetakers, etc.).
+- Confirm with teammates, especially remote ones, how they might ask questions during the interview (for example, in a Slack thread)
+- Do a tech check: confirm that screen sharing, recording, etc. works
+- Check receipt of a signed participant agreement ([example]({{ "/ux-guide/participant-agreement/" | url }}))
+- Double-check any links, files, etc. that participants will need to evaluate (i.e., ensure that your concept, wireframes, or prototypes are available for testing)
 
 
 ## Introductions
 **Spend 5 minutes** at the beginning of the interview to clarify with the participant the parameters of the interview, and to give them a chance to ask any logistics-related questions.
 
-### Make sure to
-- [ ] Thank the participant for their time
-- [ ] Introduce yourself, and anyone who is joining you
-- [ ] Explain the purpose of your research
-- [ ] Provide an overview of the shape of the interview, including any required logistics (for example, screen sharing)
-- [ ] Confirm the expected length of the interview
-- [ ] Confirm receipt of a signed participant agreement ([example]({{  "/ux-guide/participant-agreement/" | url }}))
-- [ ] Explain
-  - [ ] How you’ll take notes (for example, video recording).
-  - [ ] How you’ll use any notes you take (for example, unattributed quotes)
-- [ ] Ask the participant if they have questions at this time
-- [ ] If the participant consents, turn on the recorder
+### Make sure to {.guide-checklist}
+- Thank the participant for their time
+- Introduce yourself, and anyone who is joining you
+- Explain the purpose of your research
+- Provide an overview of the shape of the interview, including any required logistics (for example, screen sharing)
+- Confirm the expected length of the interview
+- Confirm receipt of a signed participant agreement ([example]({{  "/ux-guide/participant-agreement/" | url }}))
+- Explain
+  - How you’ll take notes (for example, video recording).
+  - How you’ll use any notes you take (for example, unattributed quotes)
+- Ask the participant if they have questions at this time
+- If the participant consents, turn on the recorder
 
 
 ## Warm-up / icebreaker
 **Spend 5-10 minutes** establishing the cadence for the interview as a conversation rather than a stilted back and forth. Help the participant feel comfortable, and focus on gaining important context for the body of the interview.
 
-### Make sure to
+### Make sure to {.guide-checklist}
 
-- [ ] Be polite; you’re a guest in the participant’s world
-- [ ] Give the participant your full attention (You can signal this by making eye contact, asking follow up questions, etc. Be aware that taking notes, especially on a laptop, can distract from the conversation itself)
-- [ ] Ask open-ended questions that will give you relevant information and help you form a better understanding of who this person is
-- [ ] Understand the degree to which this person is comfortable talking about themselves and their work, and at what speed. Be mindful and respectful of anything the the participant is uncomfortable talking about
-- [ ] Give the participant time to respond; don’t be afraid of awkward pauses
-- [ ] Ask for a “tour”: note any organizations, tools, rituals, or processes that affect your participant’s perspective
-- [ ] Start broad (“So to start, could you tell us how you got into this line of work?” or “What’s a day in your work-life like?”), and then slowly direct the interview toward any planned activities (“Could you share your screen and show me how you do that?”) or topic-specific questions (“How often do you file TPS reports?”)
+- Be polite; you’re a guest in the participant’s world
+- Give the participant your full attention (You can signal this by making eye contact, asking follow up questions, etc. Be aware that taking notes, especially on a laptop, can distract from the conversation itself)
+- Ask open-ended questions that will give you relevant information and help you form a better understanding of who this person is
+- Understand the degree to which this person is comfortable talking about themselves and their work, and at what speed. Be mindful and respectful of anything the the participant is uncomfortable talking about
+- Give the participant time to respond; don’t be afraid of awkward pauses
+- Ask for a “tour”: note any organizations, tools, rituals, or processes that affect your participant’s perspective
+- Start broad (“So to start, could you tell us how you got into this line of work?” or “What’s a day in your work-life like?”), and then slowly direct the interview toward any planned activities (“Could you share your screen and show me how you do that?”) or topic-specific questions (“How often do you file TPS reports?”)
 
 
 ## Activities or topic-specific questions
 **Spend 25 minutes** exploring the topics or leading the participant through the activities (for example, screen sharing) the research was designed around.
 
-### Make sure to
-- [ ] Know what you want to learn
-- [ ] Demonstrate genuine curiosity
-- [ ] Let the conversation flow naturally, and try and get the participant to tell stories — yes, stories — related to the things you’re studying
-- [ ] Default to open-ended questions such as “Tell me about a time… ”, “Can you explain…”, “Why do you think…”
-- [ ] Ask clarifying questions or ask your interviewee to repeat themselves if you missed something
-- [ ] Use a diverse array of question types, such as context-gathering questions (asking about sequences of events, relationships, etc.), clarification questions, and comparison/contrasting questions
-- [ ] Use transition phrases to help participants understand when you are moving between parts of the interview (“let’s go back to something you said before”)
-- [ ] Test your own assumptions and understandings without asking leading questions. Ask “how” and “why” multiple times, and give the participant sufficient time to think about their answers
-- [ ] Note the exact words and phrases people use. Don’t correct them, even their pronunciation, if you think they’re wrong
-- [ ] Look people in the eye and give positive affirmations. Lean forward. Say things like “Wow,” or “Oh, interesting!” (when those reactions genuinely occur to you, of course)
-- [ ] If you ask the participant to share their screen
-  - [ ] Caution them to close anything they don't want recorded beforehand
-  - [ ] Assure them that there are no wrong answers — you’re testing the design, not them
-  - [ ] Ask them to think out loud
-  - [ ] Ask “How would you expect this to work?”
-- [ ] Periodically check to see if your teammates have any questions
+### Make sure to {.guide-checklist}
+- Know what you want to learn
+- Demonstrate genuine curiosity
+- Let the conversation flow naturally, and try and get the participant to tell stories — yes, stories — related to the things you’re studying
+- Default to open-ended questions such as “Tell me about a time… ”, “Can you explain…”, “Why do you think…”
+- Ask clarifying questions or ask your interviewee to repeat themselves if you missed something
+- Use a diverse array of question types, such as context-gathering questions (asking about sequences of events, relationships, etc.), clarification questions, and comparison/contrasting questions
+- Use transition phrases to help participants understand when you are moving between parts of the interview (“let’s go back to something you said before”)
+- Test your own assumptions and understandings without asking leading questions. Ask “how” and “why” multiple times, and give the participant sufficient time to think about their answers
+- Note the exact words and phrases people use. Don’t correct them, even their pronunciation, if you think they’re wrong
+- Look people in the eye and give positive affirmations. Lean forward. Say things like “Wow,” or “Oh, interesting!” (when those reactions genuinely occur to you, of course)
+- If you ask the participant to share their screen
+  - Caution them to close anything they don't want recorded beforehand
+  - Assure them that there are no wrong answers — you’re testing the design, not them
+  - Ask them to think out loud
+  - Ask “How would you expect this to work?”
+- Periodically check to see if your teammates have any questions
 
 
 ## Wrap-up
 **Spend 5 minutes** thanking the participant, communicating any next steps, and giving the participant a chance to ask any questions they might have.
 
-### Make sure to
-- [ ] Thank the participant for their time and reiterate the value of their contributions
-- [ ] Ask the participant if there was anything they think we missed or that they would like to add
-- [ ] Ask if it would be okay to contact them again with any follow up questions
-- [ ] Provide any agreed-upon [compensation]({{ "/methods/fundamentals/compensation/" | url }})
-- [ ] Turn off the recorder
-- [ ] If possible, ensure the participant that they will receive a copy of what you’ve found during the research (so they know what happened with the input they gave)
-- [ ] If desired, ask them who else you might talk to (fun fact: this is called snowball sampling)
+### Make sure to {.guide-checklist}
+- Thank the participant for their time and reiterate the value of their contributions
+- Ask the participant if there was anything they think we missed or that they would like to add
+- Ask if it would be okay to contact them again with any follow up questions
+- Provide any agreed-upon [compensation]({{ "/methods/fundamentals/compensation/" | url }})
+- Turn off the recorder
+- If possible, ensure the participant that they will receive a copy of what you’ve found during the research (so they know what happened with the input they gave)
+- If desired, ask them who else you might talk to (fun fact: this is called snowball sampling)
 
 ## Post-interview activities
 Once the interview is complete, **spend 15 minutes** completing a post-interview debrief. Tend to any post-interview logistics.
 
 ### Make sure to
-- [ ] If you’ve recorded the interview: Move any recordings from your Google Drive to the project folder
-- [ ] Engage the team in a post-interview debrief ([example]({{ "/methods/interview-debrief/" | url }})) to discuss surprises and reflect on what you heard
-- [ ] Consider updating the interview guide based on this interview
-- [ ] If you promised the participant any follow-up communications, identify who will send them and when
-- [ ] Optional: Update your study contact list
+- If you’ve recorded the interview: Move any recordings from your Google Drive to the project folder
+- Engage the team in a post-interview debrief ([example]({{ "/methods/interview-debrief/" | url }})) to discuss surprises and reflect on what you heard
+- Consider updating the interview guide based on this interview
+- If you promised the participant any follow-up communications, identify who will send them and when
+- Optional: Update your study contact list
 
 
 ### Contributors