Skip to content

Commit

Permalink
refactor nav to reflect new category org
Browse files Browse the repository at this point in the history
  • Loading branch information
pglevy committed Mar 23, 2020
1 parent 9ff0053 commit e50059f
Show file tree
Hide file tree
Showing 26 changed files with 92 additions and 79 deletions.
2 changes: 1 addition & 1 deletion _data/categories.yml
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@
category_description: Make some things based on your interpretation.
category_info: more detailed category info...
methods:
- Design studio
- Design pattern library
- Design studio
- Prototyping
- Storyboarding
- Wireframing
Expand Down
9 changes: 5 additions & 4 deletions _includes/category-setup.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{% assign discover_methods = (site.methods | where: "category", "Discover" ) %}
{% assign decide_methods = (site.methods | where: "category", "Decide" ) %}
{% assign make_methods = (site.methods | where: "category", "Make" ) %}
{% assign validate_methods = (site.methods | where: "category", "Validate" ) %}
{% assign awareness_methods = (site.methods | where: "category", "Awareness" ) %}
{% assign observation_methods = (site.methods | where: "category", "Observation" ) %}
{% assign interpretation_methods = (site.methods | where: "category", "Interpretation" ) %}
{% assign exploration_methods = (site.methods | where: "category", "Exploration" ) %}
{% assign validation_methods = (site.methods | where: "category", "Validation" ) %}
{% assign fundamentals_methods = (site.methods | where: "category", "Fundamentals" ) %}
{% assign category_methods = (site.methods | where: "category", page.title ) %}
{% assign all_methods = (site.methods) %}
Expand Down
46 changes: 29 additions & 17 deletions _includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,57 +24,69 @@
<li>
<button class="
usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="side-nav-1">
<span>Discover</span>
<span>Awareness</span>
</button>
<ul id="side-nav-1" class="usa-nav-submenu" aria-hidden="true">
{% assign discovermethods = discover_methods | sort:"title" %}
{% for method in discovermethods %}
{% assign awarenessmethods = awareness_methods | sort:"title" %}
{% for method in awarenessmethods %}
<li><a href="{{ site.baseurl }}{{ method.url }}">{{ method.title }}</a></li>
{% endfor %}
<li><a href="{{site.baseurl}}/discover">See all Discover cards</a></li>
<li><a href="{{site.baseurl}}/awareness">See all Awareness cards</a></li>
</ul>
</li>
<li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="sidenav-2">
<span>Decide</span>
<span>Observation</span>
</button>
<ul id="sidenav-2" class="usa-nav-submenu" aria-hidden="true">
{% assign decidemethods = decide_methods | sort:"title" %}
{% for method in decidemethods %}
{% assign observationmethods = observation_methods | sort:"title" %}
{% for method in observationmethods %}
<li><a href="{{ site.baseurl }}{{ method.url }}">{{ method.title }}</a></li>
{% endfor %}
<li><a href="{{site.baseurl}}/decide">See all Decide cards</a></li>
<li><a href="{{site.baseurl}}/observation">See all Observation cards</a></li>
</ul>
</li>
<li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="sidenav-3">
<span>Make</span>
<span>Interpretation</span>
</button>
<ul id="sidenav-3" class="usa-nav-submenu" aria-hidden="true">
{% assign makemethods = make_methods | sort:"title" %}
{% for method in makemethods %}
{% assign interpretationmethods = interpretation_methods | sort:"title" %}
{% for method in interpretationmethods %}
<li><a href="{{ site.baseurl }}{{ method.url }}">{{ method.title }}</a></li>
{% endfor %}
<li><a href="{{site.baseurl}}/make">See all Make cards</a></li>
<li><a href="{{site.baseurl}}/interpretation">See all Interpretation cards</a></li>
</ul>
</li>
<li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="sidenav-4">
<span>Validate</span>
<span>Exploration</span>
</button>
<ul id="sidenav-4" class="usa-nav-submenu" aria-hidden="true">
{% assign validatemethods = validate_methods | sort:"title" %}
{% for method in validatemethods %}
{% assign explorationmethods = exploration_methods | sort:"title" %}
{% for method in explorationmethods %}
<li><a href="{{ site.baseurl }}{{ method.url }}">{{ method.title }}</a></li>
{% endfor %}
<li><a href="{{site.baseurl}}/validate">See all Validate cards</a></li>
<li><a href="{{site.baseurl}}/exploration">See all Exploration cards</a></li>
</ul>
</li>
<li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="sidenav-5">
<span>Fundamentals</span>
<span>Validation</span>
</button>
<ul id="sidenav-5" class="usa-nav-submenu" aria-hidden="true">
{% assign validationmethods = validation_methods | sort:"title" %}
{% for method in validationmethods %}
<li><a href="{{ site.baseurl }}{{ method.url }}">{{ method.title }}</a></li>
{% endfor %}
<li><a href="{{site.baseurl}}/validation">See all Validation cards</a></li>
</ul>
</li>
<li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="sidenav-6">
<span>Fundamentals</span>
</button>
<ul id="sidenav-6" class="usa-nav-submenu" aria-hidden="true">
{% assign fundamentalsmethods = fundamentals_methods | sort:"title" %}
{% for method in fundamentalsmethods %}
<li><a href="{{ site.baseurl }}{{ method.url }}">{{ method.title }}</a></li>
Expand Down
6 changes: 3 additions & 3 deletions _methods/Design-hypotheses.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Design hypothesis
permalink: /decide/design-hypothesis/
permalink: /awareness/design-hypothesis/
redirect_from:
- /design-hypothesis/
description: A listing and analysis of all the content on an existing website (including pages, files, videos, audio or other data) that your users might reasonably encounter.
category: Decide
category: Awareness
what: Framing your work as a hypothesis means no longer just thinking about the thing you're making or building, but paying more attention to whether that work is achieving your intended goals and outcomes.

This in turn means thinking about your work as a series of experiments you do with your users to learn if you're on the right path. Instead of asking "Did we ship the shopping cart feature?" you ask: "Did we make it easier and simpler for our customers to buy from us?"
Expand All @@ -23,7 +23,7 @@ timeRequired: 1-2 hours

*We believe that doing/building/creating [this] for [this user] will result in [this outcome].*
*We’ll know we’re right when we see [this metric/signal].*

1. Once you've formulated your hypothesis, consider the following harm prompt to help the team think about and guard against potential unintended consequences of your work.

*But, this could be harmful for [this user] if [this outcome happens].*
Expand Down
4 changes: 2 additions & 2 deletions _methods/affinity-diagramming.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
layout: card
title: Affinity diagramming
permalink: /decide/affinity-diagramming/
permalink: /interpretation/affinity-diagramming/
redirect_from:
- /affinity-diagramming/
# Description is used for meta information and should be less than
description: A way of finding themes in collections of ideas, quotes, or observations.
category: Decide
category: Interpretation
what: A way of finding themes in collections of ideas, quotes, or observations.
why: To draw out insights from qualitative data quickly and collaboratively.
timeRequired: 1 hour
Expand Down
6 changes: 3 additions & 3 deletions _methods/card-sorting.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Card sorting
permalink: /validate/card-sorting/
permalink: /observation/card-sorting/
redirect_from:
- /card-sorting/
description: A categorization exercise in which participants divide concepts into different groups based on their
category: Validate
category: Observation
what: A categorization exercise in which participants divide concepts into different groups based on their understanding of those concepts.
why: To gain insights from users about how to organize content in an intuitive way.
timeRequired: 15–30 minutes per user
Expand Down Expand Up @@ -33,7 +33,7 @@ There are two types of card sorting: open and closed. Most card sorts are perfor
- [Research plan including card sorting from 18F's C2 project](https://github.com/18F/C2/wiki/Sprint-5:-Interaction-model-June-2016)
</section>

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

## Considerations for use in government

Expand Down
4 changes: 2 additions & 2 deletions _methods/cognitive-walkthrough.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Cognitive walkthrough
permalink: /discover/cognitive-walkthrough/
permalink: /observation/cognitive-walkthrough/
redirect_from:
- /cognitive-walkthrough/
description: An evaluation method in which people work through a set of representative tasks and ask questions about the task as they go.
category: Discover
category: Observation
what: An evaluation method in which people work through a set of representative tasks and ask questions about the task as they go.
why: To get quick and early feedback on whether a design solution is easy for a new or infrequent user to learn, and why it is or isn’t easy. This method is useful for catching big issues at any stage in the design process when you don't have access to real users, but it is not a substitute for user evaluation.
timeRequired: 30 minutes to one hour per person
Expand Down
4 changes: 2 additions & 2 deletions _methods/comparative-analysis.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Comparative analysis
permalink: /decide/comparative-analysis/
permalink: /awareness/comparative-analysis/
redirect_from:
- /comparative-analysis/
description: A detailed review of existing experiences provided either by direct competitors or by related agencies or services.
category: Decide
category: Awareness
what: A detailed review of existing experiences provided either by direct competitors or by related agencies or services.
why: To identify competitors’ solutions that excel, are lacking, or are missing critical design elements. Comparative analysis can give you a competitive edge by identifying opportunities, gaps in other services, and potential design patterns to adopt or avoid.
timeRequired: 1–2 hours to analyze and write an evaluation about each competitor.
Expand Down
4 changes: 2 additions & 2 deletions _methods/content-audit.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Content audit
permalink: /decide/content-audit/
permalink: /awareness/content-audit/
redirect_from:
- /content-audit/
description: A listing and analysis of all the content on an existing website (including pages, files, videos, audio or other data) that your users might reasonably encounter.
category: Decide
category: Awareness
what: A listing and analysis of all the content on an existing website (including pages, files, videos, audio or other data) that your users might reasonably encounter.
why: To identify content that needs to be revised in new versions of a website. Content audits can also help you identify who is responsible for content, how often it should be updated, and what role a particular piece of content plays for users.
timeRequired: 3-8 hours
Expand Down
4 changes: 2 additions & 2 deletions _methods/contextual-inquiry.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Contextual inquiry
permalink: /discover/contextual-inquiry/
permalink: /observation/contextual-inquiry/
redirect_from:
- /contextual-inquiry/
description: The product team unobtrusively observes participants at work, with their permission, then asks questions.
category: Discover
category: Observation
what: The product team unobtrusively observes participants at work, with their permission, then asks questions.
why: To learn how and why users do what they do; to discover needs and attitudes that might not emerge in an <a href="https://methods.18f.gov/discover/stakeholder-and-user-interviews/">interview</a> to map how tools, digital and otherwise, interact during complex activities.
timeRequired: 1-2 hours per user
Expand Down
4 changes: 2 additions & 2 deletions _methods/design-pattern-library.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Design pattern library
permalink: /make/design-pattern-library/
permalink: /exploration/design-pattern-library/
redirect_from:
- /design-pattern-library/
description: A collection of user interface elements (for example colors, icons, and buttons) used frequently across a website or service, consisting of the base patterns and helpful information about how to use them.
category: Make
category: Exploration
what: A collection of UI elements used frequently across a design system, consisting of the base patterns and helpful information about how to use them.
why: To aid in designing a solution that uses UI elements consistently. Maintaining a set of approved, reusable patterns makes it easier to produce new features or make updates to the current solution.
timeRequired: 1–2 hours per pattern; ongoing maintenance.
Expand Down
4 changes: 2 additions & 2 deletions _methods/design-studio.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Design studio
permalink: /discover/design-studio/
permalink: /exploration/design-studio/
redirect_from:
- /design-studio/
description: An illustration-based way to facilitate communication (and brainstorming) between a project team and stakeholders.
category: Discover
category: Exploration
what: An illustration-based way to facilitate communication (and brainstorming) between a project team and stakeholders.
why: To create a shared understanding and appreciation of design problems confronting the project team.
timeRequired: 3–4 hours
Expand Down
4 changes: 2 additions & 2 deletions _methods/dot-voting.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: card
title: Dot voting
permalink: /discover/dot-voting/
permalink: /validation/dot-voting/
redirect_from:
- /discover/feature-dot-voting/
- /feature-dot-voting/
- /dot-voting/
description: A simple voting exercise to identify a group's collective priorities.
category: Discover
category: Validation
what: A simple voting exercise to identify a group's collective priorities.
why: To reach a consensus on priorities of subjective, qualitative data with a group of people. This is especially helpful with larger groups of stakeholders and groups with high risk of disagreement.
timeRequired: 15 minutes
Expand Down
4 changes: 2 additions & 2 deletions _methods/heuristic-evaluation.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: card
title: Heuristic evaluation
permalink: /discover/heuristic-evaluation/
permalink: /observation/heuristic-evaluation/
redirect_from:
- /discover/heuristic-analysis/
- /heuristic-evaluation/
- /heuristic-analysis/
description: A quick way to find common, large usability problems on a website.
category: Discover
category: Observation
what: A quick way to find common, large usability problems on a website.
why: To quickly identify common design problems that make websites hard to use without conducting more involved user research.
timeRequired: 1–2 hours
Expand Down
10 changes: 5 additions & 5 deletions _methods/hopes-and-fears.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Hopes and fears
permalink: /discover/hopes-and-fears/
permalink: /awareness/hopes-and-fears/
redirect_from:
- /hopes-and-fears/
description: An exercise that quickly surfaces a group’s hopes and fears for the future
category: Discover
category: Awareness
what: An exercise that quickly surfaces a group’s hopes and fears for the future
why: To establish a baseline understanding of a group’s expectations and concerns about a project and to give each person an opportunity to voice their perspective

Expand All @@ -15,12 +15,12 @@ timeRequired: 30–60 mins
## How to do it

1. Ahead of the session, establish what you want to elicit hopes and fears about. For example, you could ask participants to focus on the whole project or that day’s workshop.
2. At the beginning of the session, create two columns labeled “Hopes” and “Fears” on a white board or large sticky pad.
2. At the beginning of the session, create two columns labeled “Hopes” and “Fears” on a white board or large sticky pad.
(In a remote setting, you can do this online using collaboration software such as Mural or Google Docs)
3. Ask participants to take 1-2 mins to write down their hopes on sticky notes (one hope per sticky note).
3. Ask participants to take 1-2 mins to write down their hopes on sticky notes (one hope per sticky note).
4. Invite participants to come up one at a time and add their “hopes” sticky notes to the board and say more about what they wrote. Have participants group their sticky notes as they add them to the board to illustrate emerging themes.
5. Repeat steps 3 and 4 with fears.

This format can be adapted to include other categories. For example, asking participants to write down skills and experiences can help contextualize each person’s place in the group.

<section class="method--section method--section--18f-example" markdown="1" >
Expand Down
4 changes: 2 additions & 2 deletions _methods/journey-mapping.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Journey mapping
permalink: /decide/journey-mapping/
permalink: /interpretation/journey-mapping/
redirect_from:
- /journey-mapping/
description: A visualization of the major interactions shaping a user's experience of a product or service.
category: Decide
category: Interpretation
what: A visualization of the major interactions shaping a user's experience of a product or service.
why: To provide design teams with a bird’s-eye view of a service that helps them see the sequence of interactions that make up a user’s experience including the complexity, successes, pain points, and emotions users experience along the way.
timeRequired: 4–12 hours
Expand Down
4 changes: 2 additions & 2 deletions _methods/personas.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Personas
permalink: /decide/personas/
permalink: /interpretation/personas/
redirect_from:
- /personas/
description: User archetypes based on conversations with real people.
category: Decide
category: Interpretation
what: User archetypes based on conversations with real people.
why: To ground design in reality by forcing us to consider the goals, behaviors, and pain points of the people affected by our design decisions. Unlike marketing personas based on demographics or marketability, design personas describe how someone accomplishes goals.
timeRequired: 2–3 hours
Expand Down
4 changes: 2 additions & 2 deletions _methods/prototyping.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Prototyping
permalink: /make/prototyping/
permalink: /exploration/prototyping/
redirect_from:
- /prototyping/
description: A rudimentary version, either static or functional, of something that exhibits realistic form and function.
category: Make
category: Exploration
what: A rudimentary version, either static or functional, of something that exhibits realistic form and function.
why: |
To enable direct examination of a design concept’s viability with a number of other methods such as [usability testing](/validate/usability-testing/#usability-testing) or a [cognitive walkthrough](/discover/cognitive-walkthrough/#cognitive-walkthrough). Static prototypes (often paper) are helpful for gaining feedback on users’ intentions and various design elements. Functional prototypes (often coded) are helpful for observing how users interact with the product.
Expand Down
4 changes: 2 additions & 2 deletions _methods/site-mapping.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
layout: card
title: Site mapping
permalink: /decide/site-mapping/
permalink: /interpretation/site-mapping/
redirect_from:
- /site-mapping/
description: A comprehensive rendering of how a website's pages relate to one another.
category: Decide
category: Interpretation
what: A comprehensive rendering of how a website's pages relate to one another.
why: To audit an existing website by assessing its structure and content. Site maps also help you plan and organize the contents of a new website prior to <a href="/make/wireframing/">wireframing</a> and building it.
timeRequired: 2–3 hours
Expand Down
Loading

0 comments on commit e50059f

Please sign in to comment.