Infrastructure – Creating templates for the research and design process. Related to #3458

[SeamusLeonardHPE]

Purpose Creation of templates that we use for research and discovery, this would standardise our internal practices.   Consideration How will a new user of figma, or a new member of staff orient themselves, understand our process and discover the correct component. How will this serve a historical document as components evolve, mature and are deprecated. 
Template for initial adoption of ticket by design team: 
 Suggestions:

• Ticket id, question & link
• Name Stakeholders & Knowledge holders
• Problem statement
• Goals
• Scope
• T-shirt size the ticket.
• Priority
• Outline Deliverables

    Template for research

• Existing documentation & guidance
• External research
• Aggerate internal communication and comments form team
• Show or link to iterations.

  Template for Sign off

• Name
• Author
• last modified date
• example instance of the component
• component and all its variants
• links to guiding principles.
• links to accompanying design rationale.

  Template for component usage

• How and when is this to be used.
• Does and Don’ts

Deliverables

First draft Figma document with templates & related components for:

• [x] Pre-Discovery (Problem statement)
• [x] Research & Discovery
• [x] Recommendations
• [x] Sign off

[KennyAtHPE]

@SeamusLeonardHPE connected with Kurt earlier today and we identified 3 areas in our work that may require templates:

1. Pre-work (templates for GitHub tickets)

   • Creating templates for various common types of design tickets (ex. exploration, guidance, and figma componentry) can help streamline and maintain a level of consistency when scoping out a ticket.
   • In addition to what you've mentioned under 'Suggestions,' I'd recommend including in these templates a section on what is not within scope to help prevent scope creep. Might also be helpful to include soft deadlines as goals.

2. Active work (templates within Figma)

   • Can be made into components or simple copy-and-paste templates to help organize exploration and research.
   • These templates could include basic guiding questions, why? when? how? who? what?
   • Thinking that these templates would be more for internal use. Shouldn't be very refined or have the expectation to be ready for external consumption. The main point is for us to be able to quickly utilize them.

3. Sign off/Handoff (templates within Figma)

   • These are templates for external consumption, handing off to our devs, and for internal future reference.
   • Ex. Design rationale, component usage templates, and design system site templates

Here's a previously worked-on first draft of our design process

[SeamusLeonardHPE]

@kurt-ph

Added some of the previous experiments for research & recommendations documents.

TBD

• Choose number of templates required.
• What components can we use, and what do we need to create.
• Suggestions for usage (templates used as reference with links to visual discovery within figma doc)

https://www.figma.com/file/ywSTWISNirzCO2AIsMYIoH/Infrastructure---%233481-%E2%80%93-Creating-templates-for-the-research-and-design-process?type=design&node-id=0%3A1&mode=design&t=nTlzTu8deCxPGuOI-1

[kurt-ph]

Currently building & adding customizable components in our templates. I'm building component that is a structured container that neatly arranges individual "sections" within designated areas of the template. Focus is on organization and flexibility.

Usage in Templates: Pre-work & Active work

1. Team Member Name Cards:

• We can use "Name Card Rows and Sections" to create a directory of team members. Each row can represent a team or department, and individual name cards can then be placed within the appropriate section.
• Provides an at-a-glance view of team compositions and team members' details.

2. Project Sections:

• Templates that involve multiple topics, such as design reviews or brainstorming sessions, the "Name Card Rows and Sections" component can be utilized to organize the list of participants. We can categorize sections based on their design stages, research, or moodboard, which is for active or pre-work.

3. Color Coded Status:

• Sections can represent project stages. We can use visual cues or color-coding to indicate project progress.

4. Component Usage & Customization:

• Allows designers across the team to quickly access and utilize components such as card layout, annotations, images, question & informational sections for various purposes in their designs, ensuring consistent presentation and easy design maintenance. The component promotes ease of use, reduces clutter, and ensures clear organization within our design. Designers can easily swap out images and put in their own project details and also tweak the templates towards their own needs.

[SeamusLeonardHPE]

Created 4 examples pages, one for for each of our deliverables.

Pre-Discovery (Problem statement) Research & Discovery Recommendations Sign off

Each contains reusable components to help document each stage of the design & sign off process.

https://www.figma.com/file/ywSTWISNirzCO2AIsMYIoH/Infrastructure---%233481-%E2%80%93-Creating-templates-for-the-research-and-design-process?type=design&node-id=256-9620&mode=design&t=ZVKJdwMB9mumNRno-4

Propose we close this ticket and create a subsequent ticket based on review feedback that includes an components or use cases that we may have not included.

@KennyAtHPE @ashifalinadaf

[KennyAtHPE]

@SeamusLeonardHPE walked through the templates with Kurt. Agree with his suggestion that we should all try using this for our next tickets and update this living template as we use it. I'd be content with seeing this ticket closed based on where its at right now.

[SeamusLeonardHPE]

Agreed. I tidied the page names and moved the file from my drafts into the working files folder/project in figma. We can review and amend as we use the templates for upcoming tickets. Add comments to the figma file anytime you find a use-case not covered or an opportunity to improve the templates.

https://www.figma.com/file/ywSTWISNirzCO2AIsMYIoH/Infrastructure---%233481-%E2%80%93-Creating-templates-for-the-research-and-design-process?type=design&node-id=322%3A3567&mode=design&t=7ps4zrjvi1d0DB8s-1

[KennyAtHPE]

@SeamusLeonardHPE I'd recommend moving this file into the "getting started" folder instead of working files. I'd rename the file name to something clearer as well.