Standards

Standards are generally accepted as good design, but by spelling them out here we are committing to upholding these best practices. Within each standard, we have minimum requirements for releasing and aspirational elements that will make the experience enjoyable. One way we'll know we have raised our standards over time is that we move things from Aspirational to the Minimum requirement.

1. People know where to focus

Minimum Requirements

• Type hierarchy is purposeful.

• No selections are hidden (before or after they are made).

• Defaults are purposeful.

Aspirational

• Organization reduces the perception of complexity.

• The visual focus moves as a user moves through a task.

2. Match people's mental models

We do our best to mirror the way people think about things so they don't have to learn new models. This opens up their cognitive energy for more advanced tasks.

Minimum requirements

• We use existing info from our customers to understand how they think about a concept (Helpscout, customer calls etc).

• We use our customer's own words to name concepts.

Aspirational

• We hold empathy interviews with customers to ask detailed questions about their mental models.

• We visually represent concepts the way people draw them.

• We organize information/processes in the way people think about it.

3. Path and status are visible

Minimum requirements

• The user knows the status of their task.

• It's clear if progress is saved and how to do so.

• We indicate if a selection is irreversible.

Aspirational

• There's a way to go one step back.

• We notify users if a flow has changed.

4. Break consistency only when meaningful

Minimum requirements

• Colors with inherent meaning are used for their expected use case (red = delete/cancel/bad).

• Color usage is consistent with the rest of the app.

• Type hierarchy is consistent with the rest of the app.

• Components are used consistently with other areas of the app.

• New components are only added if no current component matches the use case.

Aspirational

• If a component is changed in one place, it is changed everywhere.

5. People discover complexity gradually

We layer the complexity of the product so that users can discover it as they need it.

Minimum requirements

• Long tasks/workflows are split into steps.

• Supplementary information is hidden behind a hover or click.

Aspirational

• The user only sees information that is necessary in the moment.

• More complex features are visible but not expanded until the user opts in.

6. Education for new or complex concepts

We acknowledge that our product can be complex at first, so we provide ways for people to understand and learn so they can better utilize the complexity we offer.

Minimum requirements

• Docs for how to use the product.

• Contextual links to docs.

• New terms are explained.

Aspirational

• Guided learning.

• Docs for best practices.

7. Protect people from making mistakes

Minimum requirements

• The user knows when there's an error.

• We double check before allowing the user to navigate away from unsaved changes.

• We always ask twice when a decision is permanent.

Aspirational

• Anticipate mistakes and provide preventative measures.

• The user can undo what they just did.

• Selections can be changed.

• Errors are written in human terms and actionable.

8. Visuals are purposeful before ornamental

Visual elements should not distract, they should contribute to understanding.

Minimum requirements

• Color contrast is AA accessible.

• Color conveys meaning.

• It's visually clear which options are clickable.

• Illustrations/decoration are not used at pivotal points.

Aspirational

• It's visually clear which options are hoverable.

• Illustrations/decoration add moments of delight that reinforce the brand.

• Consider when information can be communicated more effectively visually.

9. Test our assumptions

Minimum requirements

• We know our biggest assumptions and their risks before releasing.

Aspirational

• We test with non-product methods before releasing (surveys, emails, alphas, etc).

• We revisit assumptions after a release.