Skip to content
This repository has been archived by the owner on May 31, 2024. It is now read-only.

Commit

Permalink
Merge pull request #436 from 18F/staging
Browse files Browse the repository at this point in the history
Publish new methods
  • Loading branch information
lsgitter authored Mar 10, 2020
2 parents ec10912 + 1fc1784 commit 806c078
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 2 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ GEM
mercenary (0.3.6)
mini_portile2 (2.4.0)
minitest (5.11.3)
nokogiri (1.10.4)
nokogiri (1.10.8)
mini_portile2 (~> 2.4.0)
pathutil (0.16.1)
forwardable-extended (~> 2.6)
Expand Down
1 change: 1 addition & 0 deletions _data/categories.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
- Content audit
- Design hypothesis
- Design principles
- Interface audit
- Journey mapping
- Mental modeling
- Personas
Expand Down
60 changes: 60 additions & 0 deletions _methods/five-whys.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
layout: card
title: Five whys
permalink: /discover/five-whys/
redirect_from:
- /five-whys/
description:
category: Discover
what: An iterative process for identifying the root cause of a problem by posing the question “Why?” at least five times to help separate symptoms from causes.

why: To identify the root cause(s) of an issue or problem.

timeRequired: Less than 1 hour

---

## How to do it

Select a particular issue or problem from your user research to investigate further. This could be the most commonly occurring problem or a problem that has been prioritized by the team.
Ask why the problem occurred and write down an answer. Repeat this process another four times, building off of the previous response each time to drill down to a root cause. See example below:

Starting problem: “We didn’t meet our goal for public feedback during the open comment period.”
1. *Why?*
“Not enough people submitted comments.”
2. *Why?*
“Not enough people made it to the comment submission form.”
3. *Why?*
“The comment submission form was hard to find.”
4. *Why?*
“The link to the comment submission form was buried on the page.”
5. *Why?*
“We didn’t formulate and publish a call to action to submit comments.”

After getting to a root cause, frame or reframe your problem solving approach to address it (e.g., “how might we create a call to action for comment submission?”).

*Note: You may can “why” more or less than five times during this process. The purpose of this exercise is to help identify what is the root cause. Ask “why” as many times as needed to get to what you think the root cause is.*

<!-- <section class="method--section method--section--18f-example" markdown="1" >
## Example from 18F
</section> -->

<section class="method--section method--section--additional-resources" markdown="1">

## Additional resources

- Five Whys Tree Diagrams — [Example 1](https://www.xmind.net/m/n5cq/) and [Example 2](https://www.xmind.net/m/SeKk/)
- [Five Whys](https://en.wikipedia.org/wiki/Five_whys) on Wikipedia
- [Root cause analysis](https://en.wikipedia.org/wiki/Five_whys) on Wikipedia

</section>

<section class="method--section method--section--government-considerations" markdown="1" >

## Considerations for use in government

No PRA implications. No information is collected from members of the public.

</section>
45 changes: 45 additions & 0 deletions _methods/interface-audit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
layout: card
title: Interface audit
permalink: /decide/interface-audit/
redirect_from:
- /interface-audit/
description: A listing and analysis of all the components, design patterns, and interface features of an existing website (including typography, color, graphics/illustration/icons)

category: Decide
what: A listing and analysis of all the components, design patterns, and interface features of an existing website (including typography, color, graphics/illustration/icons)
why: To identify components that need to be revised in new versions of a website to create consistency and fill gaps. Interface audits can also help you establish and document a design system for a website.
timeRequired: Depends on scope of audit (how many pages, how many contributors, etc)
---

## How to do it

An interface audit can be conducted by an individual or in a group setting. Either way, the steps are as follows:
1. Identify the website and take screenshots of all the pages you want to audit
1. Create a checklist of aspects you want to audit on each page—for example typography, header and body copy styles, use of color, buttons, icons, etc.
1. For each page, take notes on each aspect on your checklist.
1. Once all pages have been audited, compare notes and identify inconsistencies (e.g., headers are inconsistently formatted, sometimes bolded, sometimes italicized).
1. Decide how to resolve any inconsistencies by choosing one of the existing approaches found on the site (e.g., make all headers bold) or designing a new solution (e.g., make all headers a different color).

*Note: It’s helpful to involve developers, who will be able to advise on the feasibility of potential solutions.*




<section class="method--section method--section--additional-resources" markdown="1">

## Additional resources
- [Conducting an Interface Inventory](https://bradfrost.com/blog/post/conducting-an-interface-inventory/), including sample interface inventory categories for a checklist. Brad Frost.
- [Interface Inventory](https://bradfrost.com/blog/post/interface-inventory/). Brad Frost.
- [Design Systems Sprint 1: The Interface Inventory](https://medium.com/@marcintreder/design-systems-sprint-1-the-interface-inventory-1f78d376e49a). Marcin Treder.



</section>

<section class="method--section method--section--government-considerations" markdown="1" >

## Applied in government research

No PRA implications. No information is collected from members of the public.
</section>
2 changes: 1 addition & 1 deletion _methods/multivariate-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ timeRequired: 2–5 days of effort, 1–4 weeks elapsed through the testing peri
## How to do it

1. Identify the call to action, content section, or feature that needs to be improved to increase conversion rates or user engagement.
1. Develop a list of possible issues that may be hurting conversion rates or engagement. Specify in advance what you are optimizing for (possibly through [metrics definition](/discover/metrics-definition/#metrics-definition)).
1. Develop a list of possible issues that may be hurting conversion rates or engagement. Specify in advance what you are optimizing for (possibly through [design hypothesis](/decide/design-hypothesis/)).
1. Design several solutions that aim to address the issues listed. Each solution should attempt to address every issue by using a unique combination of variants so each solution can be compared fairly.
1. Use a web analytics tool that supports multivariate testing, such as Google Website Optimizer or Visual Website Optimizer, to set up the testing environment. Conduct the test for long enough to produce statistically significant results.
1. Analyze the testing results to determine which solution produced the best conversion or engagement rates. Review the other solutions, as well, to see if there is information worth examining in with future studies.
Expand Down

0 comments on commit 806c078

Please sign in to comment.