Create a Guide/Template: Designers Toolkit #135

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/Template: 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.