Create a Guide/Template: Designers Toolkit

[daniellex0]

Overview

We need to create a UX/UI Designer Toolkit so that designers at Hack for LA can find many helpful resources to reference in one place.

Action Items

The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labeled 'Tasks' at the bottom of this issue, and complete each task listed.

• Gather Examples Solo (open in a new tab)
• Gather Examples Collaboratively
• Create a Guide Draft
  • If needed, create a template
• Have your guide peer reviewed
• Present your guide for leadership review

Resources/Instructions

• Google Drive Folder for this Guide’s documents and shortcuts (to documents in other locations)
  0135 Designers Toolkit

• We either have links to each of these things or they will be detailed in another guide, which can be linked to:

  • Full Page Screenshot Chrome extention
  • How to setup figma for teams for free (this will be a guide on the admin team repo Create a guide: How to setup Figma for teams admin#19)~ in the meantime see admin channel and ask for Bonnie to meet with your project leads to setup your teams figma
  • Color picker chrome extention
  • How to setup Miro for teams for free (this will be detailed in this guide and this guide should link to it Create a Guide: Create a Miro account for your project #7)
  • Accessibility Guidelines (this will be detailed in this guide and this guide should link to it Create a Guide/Template: UX/UI Accessibility Standards #134)
  • logo guidelines (this will be detailed in this guide and this guide should link to it Create a Guide/Template: Logo Design  #63)
  • Brand Identity Create a Guide/Template: Defining Hack for LA brand identity #124
  • Free Enterprise Design Thinking course and certificate IMB Enterprise Design Thinking Course and Certificate

• Designers Toolkit folder on UI/UX Community of Practice Google Drive

• Summary of Toolkit resources

• Guide: Designers Toolkit

• These items will need to be more detailed in the guide:

  • image use guidelines
    • all images used in the project need to have documented source and how they are licensed.
    • if licensed via providing credit on the website, then the website must have a credits page. See hackforla.org/credits.
    • make sure the image you choose is available in high resolution and ideally as an .svg
  • Types of images to use and why

Projects to Check

• 100 Automations
  • Decide what accessibility testing tool we are going to use 100Automations/Website#420
    • Which accessibility testing tool should you use?
    • Spreadsheet used by the people doing an accessibility audit
  • check fonts and contrast for ADA  100Automations/Website#265
    • figma a11y plugin
  • Create a favicon for 100 Automations 100Automations/Website#100
    • How to design a favicon
• 311 Data
  • [CLOSE THIS] Create Accessibility Icon/ Button 311-data#1170
    • The accessibility icon and instruction sheet have been added to the
  • [FUTURE] Footer tooltip for "Data updated through" 311-data#1160
  • Desktop Menu redesign 311-data#1157
    • Menu redesign
  • Test the project designs against the relevant tools for Accessibility compliance 311-data#1110
    • Web Accessibility Evaluation Tools List
  • [PAGE] About 311 Data 311-data#960
    • Update the About us page to no longer be the landing page and will fit with the look and feel of the tool
  • Request type selector (mobile) 311-data#887
    • Mobile 311 request type selector 1
    • Mobile 311 request type selector 2
  • Interviews + Usability Testing on V2 311-data#848
    • Conduct interviews and usability testing on new designs, to see if there's any iterations needed
    • Training deck
    • Testing script
  • Request type legend - map - collapsible (desktop/mobile) 311-data#834
    • A collapsible map legend displaying request type names and colors
  • Accessibility: Colorblindness Palettes 311-data#808
    • Colors and Palettes
  • EPIC: Analysis Tool Redesign 311-data#782
    • Segmentation of Users and features for them
    • Combine Tools
• Access the Data
  • Template for Internal Presentations access-the-data#157
    • Template for Internal Presentations to use during meetings
  • Informational Interviews access-the-data#158
    • Template used for Informational Interviews (script/notes) with data experts (and data amateurs)
  • UX/UI Research Process and Progress Documentation  access-the-data#118
    • examples of documentation of "how we do things" from other H4LA teams:
      • https://github.com/hackforla/tdm-calculator/wiki/(Pilot-Page)-Usability-Testing
      • https://github.com/codeforamerica/brigade-playbook/wiki/Process-overview
  • Design System - Component(s): Carousel  access-the-data#96
    • We need a template for images to inset into the website carousel so we can make the carousel modular
  • Research Findings Summary Presentation access-the-data#92
    • Examples of stakeholder designer presentation
  • Create Design System for Website access-the-data#81
    • HfLA Guide to Design Systems
    • Link to design system in Hi-Fi Wireframes (mobile)
    • Design Systems Slack Channel
    • Access the Data Hack4LA's Design Systems Figma link
• BallotNav
  • Share Buttons and function ballotnav#86
    • Possible tool to use
  • Decide/develop our own style guide ballotnav#18
    • Develop style guide for the overall navigation and visual appearance of the site
  • Assets for website ballotnav#10
    • We will collect assets to put onto website in this issue
• Brigade Organizer's Playbook
• Civic Tech Index
  • Banner Illustrations civictechindex/CTI-website-frontend#82
    • [Need several banner illustrations](https://www.figma.com/file- 100 Automations
  • Decide what accessibility testing tool we are going to use 100Automations/Website#420
    • Which accessibility testing tool should you use?
    • Spreadsheet used by the people doing an accessibility audit
  • check fonts and contrast for ADA  100Automations/Website#265
    • figma a11y plugin
  • Create a favicon for 100 Automations 100Automations/Website#100
    • How to design a favicon
• 311 Data
  • [CLOSE THIS] Create Accessibility Icon/ Button 311-data#1170
    • The accessibility icon and instruction sheet have been added to the
  • [FUTURE] Footer tooltip for "Data updated through" 311-data#1160
  • Desktop Menu redesign 311-data#1157
    • Menu redesign
  • Test the project designs against the relevant tools for Accessibility compliance 311-data#1110
    • Web Accessibility Evaluation Tools List
  • [PAGE] About 311 Data 311-data#960
    • Update the About us page to no longer be the landing page and will fit with the look and feel of the tool
  • Request type selector (mobile) 311-data#887
    • Mobile 311 request type selector 1
    • Mobile 311 request type selector 2
  • Interviews + Usability Testing on V2 311-data#848
    • Conduct interviews and usability testing on new designs, to see if there's any iterations needed
    • Training deck
    • Testing script
  • Request type legend - map - collapsible (desktop/mobile) 311-data#834
    • A collapsible map legend displaying request type names and colors
  • Accessibility: Colorblindness Palettes 311-data#808
    • Colors and Palettes
  • EPIC: Analysis Tool Redesign 311-data#782
    • Segmentation of Users and features for them
    • Combine Tools
• Access the Data
  • Template for Internal Presentations access-the-data#157
    • Template for Internal Presentations to use during meetings
  • Informational Interviews access-the-data#158
    • Template used for Informational Interviews (script/notes) with data experts (and data amateurs)
  • UX/UI Research Process and Progress Documentation  access-the-data#118
    • examples of documentation of "how we do things" from other H4LA teams:
      • https://github.com/hackforla/tdm-calculator/wiki/(Pilot-Page)-Usability-Testing
      • https://github.com/codeforamerica/brigade-playbook/wiki/Process-overview
  • Design System - Component(s): Carousel  access-the-data#96
    • We need a template for images to inset into the website carousel so we can make the carousel modular
  • Research Findings Summary Presentation access-the-data#92
    • Examples of stakeholder designer presentation
  • Create Design System for Website access-the-data#81
    • HfLA Guide to Design Systems
    • Link to design system in Hi-Fi Wireframes (mobile)
    • Design Systems Slack Channel
    • Access the Data Hack4LA's Design Systems Figma link
• BallotNav
  • Share Buttons and function ballotnav#86
    • Possible tool to use
  • Decide/develop our own style guide ballotnav#18
    • Develop style guide for the overall navigation and visual appearance of the site
  • Assets for website ballotnav#10
    • We will collect assets to put onto website in this issue
• Brigade Organizer's Playbook
• Civic Tech Index
  • Banner Illustrations civictechindex/CTI-website-frontend#82
    • Need several banner illustrations
• Header sizing accessibility issues civictechindex/CTI-website-frontend#1101
  • Related design issue
• Which accessibility testing tool should you use? civictechindex/CTI-website-frontend#1033
  • (https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a)
• Set up Miro civictechindex/CTI-website-frontend#167
  • Create guide to show how to set up Miro correctly
• Civic Tech Jobs
  • Figma Cleanup: Integrate Site Map into Master File civictechindex/CTI-website-frontend#68
    • Figma master file
• Civic Tech Structure
• Data Science Projects
• Design Systems
  • Design Guide: Google Document Review design-systems#15
    • Design System document
• Engage
• Expunge-Assist (formerly known as Record Clearance)
  • Add Expunge Assist logo to Figma cover page expunge-assist#351
    • Expunge Assist design logo and assets
• Food Oasis
  • Usability: change tooltip for GPS button to better describe its function food-oasis#1206
    • GPS button tooltip
  • Design System update food-oasis#1204
    • Design System version 1
    • Design System version 2
  • Redesign tooltip for Organization Edit Form food-oasis#1148
    • Tooltips for the Organization Edit Form
  • Set up Material UI Theme in accordance with the Style Guide food-oasis#517
    • Style Guide
• GreenEarthOS
  • Setting up Figma  GreenEarthOS#55
    • Setting up figma
• Guides
  • Create a Design System for the Guides Team guides#61
    • Accessibility guidelines
    • (https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma)
    • (https://www.figma.com/file/Jz8KoGTBIxdx9jRxBWrEsF/Guides-Team-Figma?node-id=1%3A3)
• HomeUniteUs
  • Figma Accessibility Design QA HomeUniteUs#375
    • UI/UX accessibility guidelines
  • Application Tracker Host: Design HomeUniteUs#280
    • Application Tracker
• Internship project
• Lucky Parking
  • Add a tool tip box lucky-parking#288
    • Tool tip box for the polygon & trashcan icons
  • Resources for Color Accessibility lucky-parking#238
    • Resources for Color Accessibility
    • (https://bit.ly/3w3RnYr)
    • (https://bit.ly/2T8nIQr)
• Open Community Survey
  • Create a Design System  open-community-survey#21
    • Design system for OCS
    • (https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma?node-id=2%3A6)
    • (https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3)
• TDM Calculator
  • Update Tooltips tdm-calculator#1148
    • Update Tooltips
  • Cursor Effect Design - Ease of Access tdm-calculator#1061
    • Cursor Effect Design
  • UI/UX: Develop a Design System tdm-calculator#314
    • Design System
• VRMS
  • VRMS Logo VRMS#301
    • VRMS Logo Brand Guidelines
  • Update all UI Sass-variables based on finalized v0.4 style guide VRMS#360
    • Tooltip instructions and color scheme
• Hack for LA's Website
  • Update the Design System website#2684
    • Design System Update
  • Accessibility Audit website#1347
    • Accessibility Audit Checker
  • Medium article covering UX work website#538
    • Articles for UX work
    • (https://medium.muz.li/ui-ux-case-study-designing-a-better-cinema-experience-29abc7cfb94f)
• Youth Justice Nav
  • Create site map with UI/UX navigation flow YouthJusticeNav#21
    • UI/UX navigation flow
  • Create FigJam 6-3-5 Brainstorming Method Session & Instruction Guide YouthJusticeNav#69
    • FigJam 6-3-5 Brainstorming Method Session & Instruction Guide
    • (https://docs.google.com/presentation/d/1F1QvnIZc59zmlPN40stuxDlfPnjfZNKj2Jnt1uccaQk/edit?pli=1#slide=id.p)

Tasks

• This is where you will copy instructions from the wiki page for the step you are currently on.

[ExperimentsInHonesty]

Hana and Danielle from the design systems team said: "This guide does not relate to what we are currently working on [design system]."

Bonnie Update: hackforla/design-systems#89 (comment)

[ExperimentsInHonesty]

Sent the following message in slack

So it is important to capture those resources and notes about them in this issue, so that later we can add them to the toolkit section of the hackforla.org website and that their can be a guide  (divided up by type of resource) that would be useful for new volunteers.  Please paste your :pray:helpful links and details here https://github.com/hackforla/knowledgebase-content/issues/135

[ExperimentsInHonesty]

@Exonkenz Please move this document: Designers Toolkit Draft Document that you have started to the UI/UX community of practice guides folder. It should not be in your personal drive.

See How to Format a Guide - WIP

[Exonkenz]

I have just done that now. Thank you Bonnie

[ExperimentsInHonesty]

Fill out spreadsheet and add any notes that will help us get the website team moving forward on the changes we need on this issue hackforla/website#3357

[Exonkenz]

I have filled out the spreadsheet and included a summary of value in all resources.

[the-techgurl]

A tool that could help test color combinations and see if they have adequate contrast is a Figma plugin stark https://www.getstark.co/figma/

[JesseTheCleric]

Prior version of issue

Overview

We need to create a UX/UI Designer Toolkit so that designers at Hack for LA can find many helpful resources to reference in one place.

Action Items

• Gather examples of design resources used by UX/UI designers at Hack for LA
  • Reach out to design team on each project sharing with them the list we have so far (the resources section of this issue) and find out if they have any other resources they use. Keep annotating the list to prevent designers from spending time on duplicate documentation.
  • Once done, remove the "Guide: Gather Examples" label and add the "Guide: Draft Guide"
• Create a draft Toolkit document, either in markdown format in this issue or a google doc in the [ux/ui google drive]
  • Once done, remove the "Guide: Draft Guide" label and add the "Guide: Review Guide" label
• Review the Toolkit document with UX/UI community of practice
  • Once done, remove the "Guide: Review Guide" label and add the "Guide: Leadership Review" label
• Present to the Hack for LA leadership team for sign off
  • Once approved, remove the "Guide: Leadership Review" label and add the "Guide: Place Guide" label

Resources

Update issue hackforla/product-management#15 with the name of item you are working on

Resources gathered so far (suggested content)

• We either have links to each of these things or they will be detailed in another guide, which can be linked to:

  • Full Page Screenshot Chrome extention
  • How to setup figma for teams for free (this will be a guide on the admin team repo Create a guide: How to setup Figma for teams admin#19)~ in the meantime see admin channel and ask for Bonnie to meet with your project leads to setup your teams figma
  • Color picker chrome extention
  • How to setup Miro for teams for free (this will be detailed in this guide and this guide should link to it Create a Guide: Create a Miro account for your project #7)
  • Accessibility Guidelines (this will be detailed in this guide and this guide should link to it Create a Guide/Template: UX/UI Accessibility Standards #134)
  • logo guidelines (this will be detailed in this guide and this guide should link to it Create a Guide/Template: Logo Design  #63)
  • Brand Identity Create a Guide/Template: Defining Hack for LA brand identity #124
  • Free Enterprise Design Thinking course and certificate IMB Enterprise Design Thinking Course and Certificate

• These items will need to be more detailed in the guide:

  • image use guidelines
    • all images used in the project need to have documented source and how they are licensed.
    • if licensed via providing credit on the website, then the website must have a credits page. See hackforla.org/credits.
    • make sure the image you choose is available in high resolution and ideally as an .svg
  • Types of images to use and why

Projects to check to see if they have suggestions for additions

• 100 Automations
  • Decide what accessibility testing tool we are going to use 100Automations/Website#420
    • Which accessibility testing tool should you use?
    • Spreadsheet used by the people doing an accessibility audit
  • check fonts and contrast for ADA  100Automations/Website#265
    • figma a11y plugin
  • Create a favicon for 100 Automations 100Automations/Website#100
    • How to design a favicon
• 311 Data
  • [CLOSE THIS] Create Accessibility Icon/ Button 311-data#1170
    • The accessibility icon and instruction sheet have been added to the
  • [FUTURE] Footer tooltip for "Data updated through" 311-data#1160
  • Desktop Menu redesign 311-data#1157
    • Menu redesign
  • Test the project designs against the relevant tools for Accessibility compliance 311-data#1110
    • Web Accessibility Evaluation Tools List
  • [PAGE] About 311 Data 311-data#960
    • Update the About us page to no longer be the landing page and will fit with the look and feel of the tool
  • Request type selector (mobile) 311-data#887
    • Mobile 311 request type selector 1
    • Mobile 311 request type selector 2
  • Interviews + Usability Testing on V2 311-data#848
    • Conduct interviews and usability testing on new designs, to see if there's any iterations needed
    • Training deck
    • Testing script
  • Request type legend - map - collapsible (desktop/mobile) 311-data#834
    • A collapsible map legend displaying request type names and colors
  • Accessibility: Colorblindness Palettes 311-data#808
    • Colors and Palettes
  • EPIC: Analysis Tool Redesign 311-data#782
    • Segmentation of Users and features for them
    • Combine Tools
• Access the Data
  • Template for Internal Presentations access-the-data#157
    • Template for Internal Presentations to use during meetings
  • Informational Interviews access-the-data#158
    • Template used for Informational Interviews (script/notes) with data experts (and data amateurs)
  • UX/UI Research Process and Progress Documentation  access-the-data#118
    • examples of documentation of "how we do things" from other H4LA teams:
      • https://github.com/hackforla/tdm-calculator/wiki/(Pilot-Page)-Usability-Testing
      • https://github.com/codeforamerica/brigade-playbook/wiki/Process-overview
  • Design System - Component(s): Carousel  access-the-data#96
    • We need a template for images to inset into the website carousel so we can make the carousel modular
  • Research Findings Summary Presentation access-the-data#92
    • Examples of stakeholder designer presentation
  • Create Design System for Website access-the-data#81
    • HfLA Guide to Design Systems
    • Link to design system in Hi-Fi Wireframes (mobile)
    • Design Systems Slack Channel
    • Access the Data Hack4LA's Design Systems Figma link
• BallotNav
  • Share Buttons and function ballotnav#86
    • Possible tool to use
  • Decide/develop our own style guide ballotnav#18
    • Develop style guide for the overall navigation and visual appearance of the site
  • Assets for website ballotnav#10
    • We will collect assets to put onto website in this issue
• Brigade Organizer's Playbook
• Civic Tech Index
  • Banner Illustrations civictechindex/CTI-website-frontend#82
    • Need several banner illustrations
• Header sizing accessibility issues civictechindex/CTI-website-frontend#1101
  • Related design issue
• Which accessibility testing tool should you use? civictechindex/CTI-website-frontend#1033
  • (https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a)
• Set up Miro civictechindex/CTI-website-frontend#167
  • Create guide to show how to set up Miro correctly
• Civic Tech Jobs
  • Figma Cleanup: Integrate Site Map into Master File civictechindex/CTI-website-frontend#68
    • Figma master file
• Civic Tech Structure
• Data Science Projects
• Design Systems
  • Design Guide: Google Document Review design-systems#15
    • Design System document
• Engage
• Expunge-Assist (formerly known as Record Clearance)
  • Add Expunge Assist logo to Figma cover page expunge-assist#351
    • Expunge Assist design logo and assets
• Food Oasis
  • Usability: change tooltip for GPS button to better describe its function food-oasis#1206
    • GPS button tooltip
  • Design System update food-oasis#1204
    • Design System version 1
    • Design System version 2
  • Redesign tooltip for Organization Edit Form food-oasis#1148
    • Tooltips for the Organization Edit Form
  • Set up Material UI Theme in accordance with the Style Guide food-oasis#517
    • Style Guide
• GreenEarthOS
  • Setting up Figma  GreenEarthOS#55
    • Setting up figma
• Guides
  • Create a Design System for the Guides Team guides#61
    • Accessibility guidelines
    • (https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma)
    • (https://www.figma.com/file/Jz8KoGTBIxdx9jRxBWrEsF/Guides-Team-Figma?node-id=1%3A3)
• HomeUniteUs
  • Figma Accessibility Design QA HomeUniteUs#375
    • UI/UX accessibility guidelines
  • Application Tracker Host: Design HomeUniteUs#280
    • Application Tracker
• Internship project
• Lucky Parking
  • Add a tool tip box lucky-parking#288
    • Tool tip box for the polygon & trashcan icons
  • Resources for Color Accessibility lucky-parking#238
    • Resources for Color Accessibility
    • (https://bit.ly/3w3RnYr)
    • (https://bit.ly/2T8nIQr)
• Open Community Survey
  • Create a Design System  open-community-survey#21
    • Design system for OCS
    • (https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/Design-Systems-Team-Figma?node-id=2%3A6)
    • (https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3)
• TDM Calculator
  • Update Tooltips tdm-calculator#1148
    • Update Tooltips
  • Cursor Effect Design - Ease of Access tdm-calculator#1061
    • Cursor Effect Design
  • UI/UX: Develop a Design System tdm-calculator#314
    • Design System
• VRMS
  • VRMS Logo VRMS#301
    • VRMS Logo Brand Guidelines
  • Update all UI Sass-variables based on finalized v0.4 style guide VRMS#360
    • Tooltip instructions and color scheme
• Hack for LA's Website
  • Update the Design System website#2684
    • Design System Update
  • Accessibility Audit website#1347
    • Accessibility Audit Checker
  • Medium article covering UX work website#538
    • Articles for UX work
    • (https://medium.muz.li/ui-ux-case-study-designing-a-better-cinema-experience-29abc7cfb94f)
• Youth Justice Nav
  • Create site map with UI/UX navigation flow YouthJusticeNav#21
    • UI/UX navigation flow
  • Create FigJam 6-3-5 Brainstorming Method Session & Instruction Guide YouthJusticeNav#69
    • FigJam 6-3-5 Brainstorming Method Session & Instruction Guide
    • (https://docs.google.com/presentation/d/1F1QvnIZc59zmlPN40stuxDlfPnjfZNKj2Jnt1uccaQk/edit?pli=1#slide=id.p)

Data Organization

• Designers Toolkit folder on UI/UX Community of Practice Google Drive
• Summary of Toolkit resources
• Guide: Designers Toolkit

[JesseTheCleric]

Assignee, Labels, Project Board Placement, and Milestones for this issue in the UI/UX Repo:

[JesseTheCleric]

Files in this Issue

• Designers Toolkit Draft Document

  • This file will need to be moved to the knowledgebase-content Google Drive
  • This file has been moved to the knowledgebase-content Google Drive

• Summary of Toolkit Resources

  • This file will need to be moved to the knowledgebase-content Google Drive
  • This file has been moved to the knowledgebase-content Google Drive