BOP: knowledgebase search: requirements

[ExperimentsInHonesty]

Overview

We need to outline the requirements for searching the knowlegebase so that wireframes can be started

Details

The wireframes will be the guide by which the development team determines what to build

Action Items

• Grab written requirements from kb wiki
• outline what the user stories are
• Add information to the kb requirements doc

Resources/Instructions

• https://github.com/hackforla/knowledgebase/wiki/Data-Model
• KB requirements
• Hack for LA website projects search page https://www.hackforla.org/projects/

[ag2463]

Refined Requirements:

Display Fields*.

*The exception is Record ID, which doesn't display, but which you need to have to understand the examples below

• Record ID (does not display)
• Title
• Description
• Practice Area
• Status (we will need to clarify what options are available)
• Contributor(s)
• Tool
• Source (there can be multiple sources)
• Topic Area
• Usability Rating
• Review
• Date Submitted
• Asset Type
• Part number
• Primary Document ID (dosen't display, but if there is a primary document other than the entry itself, it will display on the result, to tie the assets together).
• Original URL
• Backup URL

[bonniewolfe]

Example 1 (a multiple part process)

• Record ID (this does not display): 8
• Title: Project Intake - Refined Intake Process
• Description (this should be changed to review): This slide presentation, is an overview of the intake process for new projects at Code for Boston, and has details about the questions that they ask during due diligence and the information that projects will need to provide in their pitch to CfB members once the project is approved. It has a companion form, that is part of the process.
• Practice Area: Product/Project
• Status: Work in Progress
• Contributor(s): Harlan, Matt Thad
• Tools: Process
• Source: Code for Boston, BOP
• *Topic Area: Drafting a strategic Plan for a project
• Usability Rating: 3
• Date Submitted: 2020-10-01
• Asset Type: Slide Deck
• Part number: 1
• Primary Document ID (this does not display): 8
• Asset Group No: (assigned by database)
• Original URL: https://docs.google.com/presentation/d/1_xGjOV2wtqFwj-uxt5mzxJvpZlo8jkCCZgJEb67XyOQ
• Backup URL: https://docs.google.com/presentation/d/141XdOtkGNxSOY5r_xDZuN2V_ERnCS0B2lVNlhw5tsmg

Example 2:

• Record ID (this does not display): 9
• Title: Project Intake - Problem/Project Submission
• Description (should be changed to review): This Google form is part 2 of the Intake process documentation for this brigade
• Practice Area: Product/Project
• Status: Active (we will need to clarify what options are available)
• Contributor(s): Harlan, Matt Thad
• Tools: Google Form
• Source: Code for Boston, BOP
• Topic Area: Drafting a strategic Plan for a project
• Usability Rating: 3
• Date Submitted: 2020-10-01
• Asset Type: Google Form
• Part number: 2
• Primary Document: Project Intake - Refined Intake Process
• Original URL: https://docs.google.com/forms/d/e/1FAIpQLSce0lWiZFMe4HnqgM9iaXDVhpwG06_GNLGKKYR2mcQGlhQ4rQ/viewform
• Backup URL: https://drive.google.com/file/d/1amvxbXvGbXuZFcQ1jX-LiL4W-N38T5Le

*same for all the assets in the asset group

[bonniewolfe]

@ermbrown this issue is where we are starting with the requirements for the kb search/display page. please see the two comments above for details on what will appear. The how is of course up to you.

[bonniewolfe]

Items with no filter, use Search instead

• title
• description
• Primary Document

[bonniewolfe]

You can use the pnp's from this spreadsheet in your mockups with ratings 4 and 5 only

[bonniewolfe]

Example 3 (a process with just one part)

• Record ID (this does not display): 10
• Title: Project Template for GitHub projects
• Description (this should be changed to review): This template repository is a good starting point for a brigade to make their own template repository which they would customize and then use on each new project. It is already customized for Code for Baltimore, which provides an excellent example. It would work for both code and no code projects. It requires a basic understanding of how to use GitHub and make template template repositories.
• Status: Work in Progress
• Contributor(s): Jason Anton, Bill Lakenan
• Tools: GitHub Example
• Source: Code for Baltimore
• Topic Area: Tools to manage your brigade
• Usability Rating: 5
• Date Submitted: 2020-11-10
• Asset Type: GitHub Repository
• Part number: 1
• Primary Document ID (this does not display): 10
• Original URL: https://github.com/CodeForBaltimore/ProjectTemplate
• Backup URL: (Liz, make a pretend one for now, we are configuring the setup for this one)

[ExperimentsInHonesty]

Added a copy of CTJs icons figma to the BOP iconography page in figma

[ermbrown]

2/5 Notes

Resources/Instructions:

Civic Tech Jobs

• Use icons in the Practice Area column
• Icons added to the Iconography page

Parts Column

• 4 types: 1/1, 1/2 & 2/2, 5/9 multiple parts
• Link to primary
• brainstorm additional ideas

Title Column

• Link to page

Contributors

• Use Github handle

Asset Type icon

• Update icon
• Could type out name (asset type; stack)
• AT

Action Items:

• Add Civic Tech Jobs icons in the Practice Area column
• Update Parts Column; create multiple iterations
• Add link to Title Column
• Update Contributors column
• Update Asset Type icon

[ermbrown]

2/12 Notes

Resources/Instructions:

List View

• Primary Link: add name to primary link
• Filter: icon and name
• Date: YYYY-MM

Cards

• Continue to work on small, medium, large cards

Topic Overview Feedback:

• Main boxes are too big
• Content boxes are too small
• Shrink the box part down and indent
• Stick header

Ranking Topic Difficulty Page

• Difficult lines doesn't seem like an axis
• Look at other charts for inspiration
• Axis label is not clear
• Put difficulty on an access arrow and add below
• Make the arrow wider

Action Items:

• Create Detailed (full page) view
• Create Medium Card view
• Create Small Card view
• Add Primary link name
• Filter: icon and name
• Add hover feature
• Update date YYYY-MM

[ermbrown]

2/26 Notes

Resources/Instructions:

Reminder

• Add Alt text

Hover

• Add hover above

Status

• Use words
• Remove dot

Cards

• Links at the bottom
• Taxed: slide deck, topic area
• Update status icon
• Title unlinked
• Right side: topic, status, source
• multi part: links; only use if multi part process

Primary

• Multi parts will have primary (2/4, etc)
• Blank if not multi part
• Add link icon

Multi Part

• Use numbers for parts
• Not enough room for the title

Source

• Use brigade logo

Action Items:

• Hover: continue to work on hovering; add hover above
• Status: words only; remove dot
• Multi link: update primary column in list view
• Cards: taxed items, links, primary, multi parts, brigade logo, status, title unlinked

[ermbrown]

3/4 Notes

Resources/Instructions:

Multiple Parts

• Gray out to show selected
• Number; no circle

List View

• Title of list view
• title to detailed page
• Header: Title (Click to see details)

Small Card

• Completed icon - dark/clear
• Source icon - bottom corner
• add tasked items to small card

Logo:

• Not separate; just icon

Hover

• at bottom
• do not cover words

Action Items:

• List View: update link icon; add "click to see details"
• Update hover
• Small card: source icon bottom corner
• Close out other issue

[ermbrown]

3/25 Notes

Resources/Instructions:
List View

• center icons (AT, UT, tools, source, PA)
• How to display multiple practice areas

Submitted Date

• Discuss at a later date: changing "submitted" to "last updated"
• Note: Bonnie and Ethan have discussed this topic
• Need to review

Multiple Parts:

• User test
• Use the option with all the numbers outlined in a circle
• Create depressed version
• Reference Material Design 3

Cards

• Use Card 4 (small card)
• Icon stand alone; not encompassed in circle
• Reference: https://github.com/codeforboston; - http://civictechindex.org/search-projects

Action Items:

• List View: center icons,
• List View: multiple practice areas
• Multiple Parts: created depressed version
• Cards: update icons and depressed numbers

[ermbrown]

4/1 Notes

Resources/Instructions:
List View

• Filter: remove circle from asset type; match column in list view
• Filter: update primary
• Filter: toolkit Hack for LA website as example
• Practice Area: show more PAs by adding + and number; remove dots
• Practice Area: vertical dots; similar to google
• Bottom justify columns
• Center data columns for AT, UT, PA

List View Order

• Title first; contributors at the end
• Practice Area: show more PAs by adding + and number; remove dots
• Practice Area: vertical dots; similar to google
• Bottom justify columns
• Center data columns for AT, UT, PA

Tools/Source

• Use excel to view examples
• update the ? icon

Cards

• View Material Design for pressed state
• Update Detailed View 2 card; reverse colors
• Multiple Parts: parts & 1 OF 1 or multiple

Action Items:

• Update filter AT
• Update columns: bottom justify and center
• PA: +numbers and vertical dots
• Check Material Design pressed state
• Detailed View Card: pressed and unpressed states
• Small card: Parts & 1 OF 1

[ermbrown]

4/8 Notes

Overview/Feedback:

List View

• Filter: update font sizes and spacing
• PA: +2; no circle; link

Header Alignment:

• bottom aligned
• second word (2 word title) and single word (1 word title) should align

Issue:

• add figma link to issue
• Figma Link

Pressed chips

• continue to update
• bold font; play with stroke width

Cards

• Use excel document to update card (logo & AT) link
• Clarify part one and part two (Asset Type, Tools, Source)
• Place on different Figma page
• Update URLS chip

Action Items:

• Filter: update font sizes and spacing
• PA: update +2; add hyperlink
• Header Alignment: bottom aligned
• Issue: add figma link to issue
• Continue to work on pressed chip
• Cards: Clarify part one and part two; place on different Figma page
• Logo: continue to update logo; use excel

[ermbrown]

4/15 Notes

Overview/Feedback:

List View/ Filter

• Row height; reduce filter height; exclude stroke in height
• Non-bold hyperlink

Chips

• V3
• include font and stroke updates
• V2/V3 background colors OK

Cards

• Logo in bottom right
• Can enlarge logo if needed
• Detailed View 5

BOP Processes and Practices Data Excel

• Sheet 6
• Compare Asset Type & Source
• Clarify part one and two
• Add to new Figma Page

Figma Link:

• 4.15 Page

Action Items:

• Update filter/list view row height
• Review BOP Excel Document
• Add findings to cards

[ermbrown]

4/22 Notes

Overview/Feedback:

List View/Filter

• Filter spacing updated
• Remove Source column
• Add Group column

Figma Plugin

• Send Coleen plugins for curved words
• ARC
• Circular Text

Asset Type

• Use Excel document to identify icons needed.
• Add icons to iconography page
• Add icons to the cards and list view

Figma Link:

• 4.29 Page
• Figma Link

Action Items:

• List View: add group, remove source
• Send Coleen plugins to curve texts
• View excel and identify icons
• Add icons to iconography page
• Add icons to the cards and list view

[ermbrown]

4/29 Notes

Overview/Feedback:

List View/Filter

• Update Brigade Name column to Source
• Update Source icon shape to a square; no border
• Use GitHub to find icon
• Add column: template, example, case study
• Similar to contributors; add initial
• research other filters; mobile and web
• ER: Add tip to Search Function (projects page) hackforla/website#6327 (comment)

Icons

• icons with rounded lines
• selected spreadsheet and code repository
• revise article; use screenshots from meeting

Asset Type

• Use Excel document to identify icons needed.
• Add icons to iconography page
• Add icons to the cards and list view

Figma Link:

• 4.29 Page
• Figma Link

Action Items:

• Update source icon
• Add T/E/CS column
• Update article icons
• Continue to work on Asset Type icons
• Research filters

[ermbrown]

5/14 Notes

Overview/Feedback:

List View

• Update Source to Created By
• Type the words instead of icons
• Discuss Practice Areas

Topic 2

• Details 1
• Details 2
• Details 3

Figma Link:

• 5.6 Page
• Figma Link

Action Items:

• Continue to work on the Article Icon

[ermbrown]

5/20 Notes

Overview/Feedback:

List View/Filter

• All columns/title up for negotiation
• Will use user feedback
• Primary and Part do not need to be separate columns; remove primary
• Need to add icon if someone wants to export List View

Type Column

• Use text for the Type column; not circles
• add +; can click on it and hover
• If filtered on CS, then CS and + sign; will depend on filter

Icons

• Selected first article icon

Figma Link:

• 5.20 Page
• Figma Link

Action Items:

• Update Primary/Part Column
• Add icon for exporting List View
• Update Type Column
• Update Article icon

[ermbrown]

6/10 Notes

Overview/Feedback:

List View/Filter

• collapse filter
• filters on side
• add checkbox
• Examples: REI, TDM, Hack for LA
• Add pop up; CSV; Example Design Mockup: My Project Page download hackforla/tdm-calculator#1676 (comment)

Post MVP

• Export for post mvp
• before issue is completed, create issue for post mvp
• Add hold to issue

Figma Link:

• 6.17 Page
• Figma Link

Action Items:

• collapse filter
• filters on side
• add checkbox

[ermbrown]

6/17 Notes

Overview/Feedback:

List View/Filter

• Update AT icons
• Update AT icons in filter
• collapse icon update to arrows; remove hamburger icon
• Adjust filter and title; same level; filter and arrow are parallel with title
• closed just filter
• No icons needed
• add number of filters active
• Use screenshot as example

Post MVP

• Create new issue for Post MVP

Figma Link:

• 6.17 Page
• Figma Link

Action Items:

• Update AT icons
• Update AT icons in filter
• Update collapsed filter

[ermbrown]

MM/DD Notes

Overview/Feedback:

Topic 1

• Details 1
• Details 2
• Details 3

Topic 2

• Details 1
• Details 2
• Details 3

Figma Link:

• 5.6 Page
• Figma Link

Action Items:

• TBD
• TBD
• TBD

[ermbrown]

7.12 Notes

Overview/Feedback:

Filter

• Update lozenges from the side to the top
• Find examples of >> and update the page
• Update filter to match table

Figma Link:

• 7.11Page
• Figma Link

Action Items:

• Update Filter
• Update lozenges

[ExperimentsInHonesty]

@ermbrown Here is the list you have been waiting for with notes. Discuss on Monday

This screenshot comes from Figma

We need to have generic Asset Type Icons and potentially Brand Icons which we are going to call Tools (see tools list below
GitHub

Youtube
Google Sheets
Google Docs
Google Form
Google Slides
Notion
Trello
PDF
GitBook
Reveal News (not sure yet on this one)
Microsoft Word

If there is a an icon for a kanban board, that has three columns, I recommend using that instead of the two columns icon

Between these two icons, we prefer the one on the right

We might want a different icon for video

[ExperimentsInHonesty]

@ermbrown also @ag2463 is going to finish working on this which you will be able to use.
https://docs.google.com/spreadsheets/d/1ZyeIDeHnzwjnkfYuhzeUZQo5tYXpbdnF-HKqN8cZy_A/edit?gid=508577007#gid=508577007