BOP: knowledgebase search: requirements

ExperimentsInHonesty commented 5 months ago

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

[x] 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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

@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 commented 5 months ago

Items with no filter, use Search instead

title
description
Primary Document

bonniewolfe commented 5 months ago

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

bonniewolfe commented 4 months ago

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 commented 3 months ago

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

ermbrown commented 3 months ago

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:

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

ermbrown commented 2 months ago

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:

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

ermbrown commented 2 months ago

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:

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

ermbrown commented 1 month ago

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:

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

ermbrown commented 1 month ago

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:

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

ermbrown commented 1 month ago

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:

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

ermbrown commented 1 month ago

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:

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

ermbrown commented 1 month ago

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:

[x] Update filter/list view row height
[x] Review BOP Excel Document
[x] Add findings to cards

ermbrown commented 3 weeks ago

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:

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

ermbrown commented 2 weeks ago

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
https://github.com/hackforla/website/issues/6327#issuecomment-2078024067

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 commented 2 weeks ago

5/6 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

hackforla / BOP