Skip to content

Instantly share code, notes, and snippets.

@jglovier
Created August 27, 2021 04:46
Show Gist options
  • Save jglovier/b02fb712e4ffa27edec7a127d38ca681 to your computer and use it in GitHub Desktop.
Save jglovier/b02fb712e4ffa27edec7a127d38ca681 to your computer and use it in GitHub Desktop.

[PROJECT NAME] product design brief

Status: πŸ“„ In Design Exploration [be sure to keep this updated throughout the project]

Product Design Lead: ... (document author)
Product Manager: ...
Engineering Manager: ...
Eng Team: ...

Purpose of this doc: To clarify and project development details as part of the product design process. See Product brief (linked below) for more context.

See also: [include Product brief or any other relevant docs here]


πŸ‘€ The Short Story

  • ...identify the key points here as summary points for what is being built and why
  • ...

πŸ“£ Feature narrative

[...write out the story of this feature as it would be told to someone in conversation, or at the beginning of a demo video for the feature...]

πŸ₯… Goals

  • ...identify any specific project goals here
  • ...

πŸ‘€ User stories (JTBD)

Category 1 (use categories to group JTBD when applicable)

  • As a [user role or other situation] I want to [articulate what the user wants to be able to do]
  • ...

🧱 Components

The user experience will include:

  • ...inventory of new components to be introduced (including new layouts if any)

πŸ€” Questions to discuss / Decisions to make

  • identify any key questions to discuss with product, engineering, or other stakeholders here...
  • ...

✏️ Wireframes for IA decisions

To help keep our process efficient, we can solve for some major decisions at the beginning at a low fidelity stage of the design process that focuses less on the entire UI details and more on just the specific parts in question (usually overall layout, placement of components, etc – things that can be rendered quickly as sketches or with other wireframing tools).

πŸ’¬ Item for discussion and decision...

Brief description of the item and what is to be decided (usually a choice about the overall layout, etc), including rationale for different options and images below. Be sure to record discussion notes from each decision stakeholder (typically best done in a triad sync meeting via discussion, and then key points captured here for later reference).

insert image for discussion here

[Example] Option 1: add a new section to the core workflow

Pros Cons
some upside here... some downside here...
some other upside here... some other downside here...

Decision Record:

  • @team member - notes from decision...

πŸ’¬ Discussion notes

πŸ‘‚ Sync with ... on ...

Space here for notes from other key discussion (if applicable)


πŸ–Œ Hi-fi Design Comps

(Figma file here)

Design exploration TODOS:

  • add design tasks here for reference if useful (be sure to include on your team’s project board also!)
  • ...

πŸ‘£ Next steps...

  • ...after the initial design work has been completed, there may be several ideas that came up that are not included in initial scope. This space can be used to document those ideas to revisit later (it’s often helpful to write them down in as much detail as possible while they are still top of mind) and any other relevant project sequencing notes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment