From 476ffcb25c0e4294f256ee49c27d503dc42afa4e Mon Sep 17 00:00:00 2001 From: Eugene Date: Thu, 5 Dec 2024 17:04:51 +0100 Subject: [PATCH] Formatting and organizational updates to the drafting section. (#24086) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Created a numbered list for the drafting "steps" - Moved the verbs to the beginning of the sentence in the “Add page names” step for parallelism. - Moved the "Add page names" step up so that it follows the creation of the Figma file - Moved the starter file to a sub-bullet under the "Create a new file" step so make it more clear that this is additional information to that step. - Moved the "Reach out to sales" and "Engage engineering" steps to above drafting changes. - Moved the "Be intentional" and the scope change bullets to another section currently titled "Additionally." - Removed bulleted indent for when drafting stops so that it reads as the final paragraph of drafting. Page in question: https://fleetdm.com/handbook/product-design#drafting --------- Co-authored-by: Sam Pfluger <108141731+Sampfluger88@users.noreply.github.com> Co-authored-by: Noah Talerman <47070608+noahtalerman@users.noreply.github.com> --- handbook/product-design/README.md | 33 ++++++++++++++----------------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/handbook/product-design/README.md b/handbook/product-design/README.md index 8174ac82e6..2628a73851 100644 --- a/handbook/product-design/README.md +++ b/handbook/product-design/README.md @@ -47,31 +47,28 @@ The Head of Product Design summarizes the current week's design reviews to discu At Fleet, like [GitLab](https://about.gitlab.com/handbook/product-development-flow/#but-wait-isnt-this-waterfall) and [other organizations](https://speakerdeck.com/mikermcneil/i-love-apis), every change to the product's UI gets [wireframed first](https://fleetdm.com/handbook/company/why-this-way#why-do-we-use-a-wireframe-first-approach). -- Take the top user story that is assigned to you in the "Ready" column of the [drafting board](https://app.zenhub.com/workspaces/-product-backlog-coming-soon-6192dd66ea2562000faea25c/board) and move it to "In progress." +1. Take the top user story that is assigned to you in the "Ready" column of the [drafting board](https://app.zenhub.com/workspaces/-product-backlog-coming-soon-6192dd66ea2562000faea25c/board) and move it to "In progress." -- Create a new file inside the [Fleet product](https://www.figma.com/files/project/17318630/%F0%9F%94%9C%F0%9F%93%A6-Fleet-EE%C2%AE-(product)?fuid=1234929285759903870) Figma project by duplicating "\[TEMPLATE\] Starter file" (pinned to the top of the project). +2. Create a new file inside the [Fleet product](https://www.figma.com/files/project/17318630/%F0%9F%94%9C%F0%9F%93%A6-Fleet-EE%C2%AE-(product)?fuid=1234929285759903870) Figma project by duplicating "\[TEMPLATE\] Starter file" (pinned to the top of the project). The starter file includes three predefined pages: "Cover," "Ready," and "Scratchpad." +- **Cover**: This page has a component with issue number, issue name, and status fields. There are three statuses: "Work In Progress (WIP)," "Approved," and "Released" (the drafting board is still the source of truth). +- **Ready**: Use this page to communicate design reviews and development. +- **Scratchpad**: Use this page to keep "work in progress" designs that might be useful in the future. -- The starter file includes 3 predefined pages: Cover, Ready, and Scratchpad. - - **Cover.** This page has a component with issue number, issue name, and status fields. There are 3 statuses: Work in progress, Approved, and Released (the main source of truth is still the drafting board). - - **Ready.** Use this page to communicate designs reviews and development. - - **Scratchpad.** Use this page for work in progress and design that might be useful in the future. +3. Add page names (e.g. "Host details" page) to the user story's title and/or description to help contributors find Figma wireframes for the area of the UI you're making changes to. -- If the story requires API or YAML file changes, open a pull request to the reference docs release branch (e.g. `docs-v4.58.0`) with the proposed design. Mark the PR ready for review as soon as it's ready for feedback from the [API design DRI](https://fleetdm.com/handbook/company/communications#directly-responsible-individuals-dris). +4. If the story requires API or YAML file changes, open a pull request to the reference docs release branch (e.g. `docs-v4.58.0`) with the proposed design. Mark the PR "Ready for review" as soon as it's ready for feedback from the [API design DRI](https://fleetdm.com/handbook/company/communications#directly-responsible-individuals-dris). -- Add links to the user story as specified in the [issue template](https://github.com/fleetdm/fleet/issues/new?template=story.md). - -- Draft changes to the Fleet product that solve the problem specified in the story. Constantly place yourself in the shoes of a user while drafting changes. Place these drafts in the appropriate Figma file in Fleet product project. - -- Use dev notes (component available in our library) to highlight important information to engineers and other teammates. - -- To help contributors find Figma wireframes for the area of the UI you're making changes to, add page names (ex. Host details page) to the user story's title and/or description. - -- Be intentional about changes to design components (e.g. button border-radius or modal width) because these are expensive. They'll require code changes and QA in multiple parts of the product. Propose changes to a design component as part of an already-prioritized user story instead of [making a new request](#making-a-request) in 🎁🗣 Feature Fest. - -- Reach out to sales, customer success, and demand for a business perspective. +5. Add links to the user story as specified in the [issue template](https://github.com/fleetdm/fleet/issues/new?template=story.md). +6. Draft changes to the Fleet product that solve the problem specified in the story. +- Constantly place yourself in the shoes of a user while drafting changes. +- Use dev notes (component available in our library) to highlight important information to engineers and other teammates. - Reach out to sales, customer success, and demand for a business perspective. - Engage engineering to gain insight into technical costs and feasibility. +Additionally: + +- To make changes to the design system or a component (e.g. button border-radius or modal width), [make a new request](#making-a-request) and attach the `:design system improvement` label. Updates will be reviewed and, if accepted, be incorporated back into the design system by the designer who proposed the change. + - If the story has a requester and the title and/or description change during drafting (scope change), notify the requester. The customer DRI should confirm that the updated scope still meets the requester's needs. - Each [product group](https://fleetdm.com/handbook/company/product-groups#current-product-groups) stops drafting once they reach engineering capacity for the upcoming engineering sprint. This way, we avoid creating a backlog which causes us to spend time updating soon-to-be stale designs. It's up to the product group's Product Designer to stop drafting and shift their focus to the following tasks: