Overview

Code the 'How To Use' page as designed in figma

Action Items

• Code the page
• Link the page in the header and footer

Resources

• The design

Overview

Screens have been created for "How it Works", "About", and "FAQ".

Dependencies

Team review and User testing

Action Items

• Team review
• User Testing
  • Review & Iterate

Resources

Create Wiki page and Read Me file for Civic Tech Index

How It Works

Overview

We need a square logo to use on social media. We have created some and this is the issue where they can be found.

Action

Attach square logos as a comment to this issue.

Dependency

Re-evaluate Post MVP

Overview

We want a way to visualize the current & identified potential contributors to the CTI so that we can show what will be possible and where we are.

Action Items

• Product
  • Decide if wanted
    • Identify location on site
    • meet with Dev to talk about what implementation would require
• Development
  • Dev needs to check that can we automatically the populate the map from the CTI database.

Resources

outline of all orgs

Overview

We need to set up user testing with HfLA Product Leads or recruit actual Project Leads of Brigades as our first defined persona group for testing.

Test #1: Our purpose is to test the functionality and usability (taks completion) of the Tag Generator feature.

We need to set up user testing with HfLA Product Leads (as a Brigade Leader persona) for tagging their project repos using tag generator.

Test Add Organization.

Test #2: Test Search Organization and Contributors feature.

Action Items

• Objectives (Joyce and Shipra)

• Build Tag Generator Prototype (Ken)

• Create Test Plan

• Methodology

• Agree on Tools for Testing and Notes Capture (Maze has analytics display for reporting)

• Recruitment for Personas

• Test (Need dates)

• Synthesis and Recommendation + Team Share Out

• Please put resources in Google Drive Folder

Resources

CTI Production Site
CTI Tag Generator Test Planning
Usability Testing - Session recordings.

Google sheet -Analysis Table-Usability Test CTI by all the teams.

Dependency

#213

Overview

Build FAQ screen in React. Use outside libraries as necessary, ideally we would ultimately link the FAQ to a content management system (a database table and an admin screen) or the Google Sheets file mentioned in the resource

Action Items

• FAQ screen created, see look and feel in Figma, should have Title, breadcrumbs, standard header and footer should display
  • FAQ questions and answers, they should expand and contract as per look and feel in Figma
  • Contact Us area of screen should match look and feel from Figma, link to Contact Us screen (if it doesn't exist just link to #)
  • Search knowledge base functionality

Resources/Instructions

https://medium.com/@timmalstead - should have an article on having content update from a Google Sheets file
https://www.figma.com/file/EFoSuj1b9G4aZ7bN8OX8tf/CivicTechIndex---Master-Design-File---3.8.20?node-id=0%3A2 Figma file has FAQ content right now, we should probably host it in an outside Google doc

Overview

To find and implement the GitHub API for automated tag generation process.

Action Items

• Find Github APIs that provide this functionality
• Try implementing using Postman by generating a test-repository under civictechindex org.

Resources

• Documentation: Github API to get and replace topics

• onboard Marissa to Github
• walk through of Github tagging process

Overview

Provide collateral for the HackforLA website

Action Items

• Gather items
  • 600 x 400 image
    • Alt image text
  • 1500 x 700 hero image (please do not put project title on hero image)
    • Alt image text
  • Name of project
  • A blurb about your project
  • Links (github, slack channel url, Testing Site, Live Site, etc.)
  • Any resources for a Getting Started link (a link to a wiki, readme(s) or both)
  • What you are looking for skills wise
  • Partner(s)
  • Location
  • Status
• Add project Card to website

Resources/Instructions

See project cards on the hackforla.org website for example

Overview

Is there a library for filling out form fields and having it guess like google from our database while still allowing freeform response.

Resources

Overview

There is more content that needs to be added to the home page. The page, header, and footer must be made responsive.

Actions

• Add new content to home page
  • Update responsive design
• Make the header and footer responsive

Resources

• Design
• Responsive Design

Overview

Gwen is working on an overview of the design and some color options.

Action items

Chali to convert images to figma and link here
Gwen to review the word list and organize images around that

Resources

Unsplash
Pexels
Logo Design proposal

Overview

Work on the content and production for the Video that will appear on the About page

Action Items

• Draft outline of what the video should cover
  • Review with users

Resources/Instructions

Current Video Deck
Updated deck
OLD slide deck
Figma
User Stories Board

Gwen to work on color palette to match it with website designs by Chali

[Reference] https://coolors.co/

Overview

Code the footer for the civic-tech-index website.

Action Items

• Code the footer
• Get social media logos
• Get social media links

Resources

• The design

Overview

We need to start testing versions of the site with a color pallet. First we need some color pallets to test with

Action Items

• review some trustworthy sites and look at their color pallets (number of colors, how they are used)
• identify some potential color pallets that might work for us
• review with team
• after we have settled on a few, mock up version of the homepage with the various pallets for testing
• test with hackforla people outside of the civic tech index team

Resources/Instructions

https://coolors.co/
https://dribbble.com/stories/2018/12/19/choosing-colors-for-web-design-a-practical-ui-color-application-guide

Overview

Create home page

Action Items

• Code the page
• Add the font-family links

Resources

• The design

Overview

I just noticed in figma that the nav links have more links on hover.

Action Items

• Add the additional links on hover

Resources

• The Design

Overview

We need a list so that we can figure out how to represent visually

Action Items

• Create the top level outline
• Divide up who is going to do which part
• Put names on, and link them to their websites or meetup
  • checking as you go to see if website is actually valid

Resources

List of all orgs that need to be in the index - google doc
Comprehensive spreadsheet of all the orgs and all their links

Overview

Build a team recruitment form.

Action Items

• Team recruitment form
• Review and edit

Resources/Instructions

Link to sample form
role based sample form

Chali to design a directory page depicting all the orgs that have contributed to the index

Overview

To list down all possible read-write API endpoints

Action Items

• Peruse the Figma File to understand the back-end and front-end workflow
• Come up with API endpoints and define their method type

Resources/Instructions

Figma File

Overview

The Beta version of the tag generator provides a tutorial on how to manually add Topic Tags to your repo that is customized to the repo the person is trying to tag. This allows us to suggest tags based on affiliation and allow the user to define tags based on the topics of their repo.

Action Items to launch

• Product and Design
  • Define requirements
• Design
  • Design wireframes layouts for pages that match the requirements
• Development
  • design display states
  • build logic to determine and produce the right display state
  • integrate github api to pull tag data and drive error states

Requirements

Wizard
Questions and buttons that only show up after each answer is given

• Is your project affiliated with an organization? (yes/no)
  • Which Organization? (input box with type ahead to our db) - _conditional on above _ & allows you to add a new org if the type ahead does not apply
  • Project Repository URL: (input box)
  • That does not seem to be a valid repository URL (error state)
• Find Project (button)
  • These are your repository’s current topic tags: (lists tags) OR There are currently no topic tags in your project's repository.
  • Add tags to increase your project's visibility - conditional on project being found through github api call
  • What topic(s), cause(s), or civic issues(s) does your project address? (input bar with + for adding)
  • Reset Tags (button) - deletes the tags you have inputted from state
  • Reset Form (button) - takes you back to beginning of tag generator
  • Generate Tags (button)
    • Add these topic tags to your repository: (shows tags with copy paste icon)
    • Opps! I need to add another tag (button) - returns you to the state after you inputted your tags but before you hit Generate Tags
    • Reset Tags (button) - returns you to state before you hit Generate Tags and removes the tags you have inputted.
    • Reset Form (button) - takes you back to beginning of tag generator
    • Add these tags to your repo (button)

Tutorial
Once the Generate Tags button has been pushed
Is your organization affiliated with an Organization (yes)
Organization
Project Repository URL:
Add these topic tags to your repository:
[a list of the topic tags you added and the ones we know you need (civictechindex, code-for-all possibly, etc.)]
How to add your tags to your project's repository
We recommend having your project's repository open in another browser for ease of convenience.

1. Navigate to your project's repository in another browser to add your generated tags.
2. Under your project's repository, click [image of gear] to paste your tags.
   • screenshot
3. Under "Topics", paste the topic you want to add to your repository.
   • screenshot
4. Repeat until you have finished adding all of your tags, then Save Changes.
   • screenshot
     This project is so new, we are celebrating every win!
     Let us know when you've added #civictechindex (button)
     Add another project
     Tag Generator (button) - takes you back to the beginning
     Collaborate with us
     Learn More (button) - takes you to the Radical Collaboration page

Resources

• The design

Overview

We need to build each part of the website and connect it with the menu (header and footer). This issue is for the donation page

Action Items

• Build the Donate page
• Integrate it into the footer and link it to the Radical Collaboration drop down menu item in header.
• Put screen shots in issue to show completion. and @ message experimentinhonesty
• show the working app to team at meeting.
• When doing PR ask for shinjonathan for a reviewer

Notes

please update your issue weekly before meeting with

1. Progress
2. Blocks
3. Availability
4. ETA

Resources/Instructions

Figma file
react app -development

Overview

Wikipage for Civic Tech Index needs to be over hauled.

Dependency

#75 #73 #72

Action Items

• Going through project contents update details for Civic-Tech Index on wiki page.
• Check on user roles information.
• Create Wiki template

Resources/Instructions

HfLA wiki page

Overview

Visual document (image) for project database schema

Action Items

• Document (in this issue) the current database schema

Overview

Code the about page as designed in figma

Action Items

• Code the page

Resources

• The design

Overview

To spin up the front end based on react using Heroku so that QA can be done.

Overview

Code the 'Search' page as designed in figma with responsive design.
Once complete, I will create a new issue for integrating the Github API with the page.

Action Items

• Code the page
• Link the page in the header and footer

Resources

The Design

Overview

Understand the GitHub API integration

Action Items

• Get an idea of the framework using the test link
• Refer and get hands-on with the Brigade Project Status Index Board
• Read about GitHub API: developer documentation

Resources

Testing the GitHub API
Brigade Project Status Index Board
GitHub API Docs

@ExperimentsInHonesty to share Status Board from call with team.

Please build a design system for the UI components used for the website.

Find a free Figma template to reuse.

• Include the Classes in the Figma document following HFLA's Figma design.
  • Dev currently has a UI library that they reference separate from Figma
• Develop a system to check that any design changes are in-line with the Design System

Related Issues

• #1152
• #1144
• #1033
• #993
• #828
• #711
• #673
• #195
• #178
• #125
• #82
• #1122

Overview

We want the github / civic tech index search to be as useful and intuitive as possible.

Actions

• gather list of what is possible to get from the github api
• define what we want to use
• determine way to make search layout readable and intuitive

Resources

Best buy search
Amazon
LinkedIn
Google cart

Overview

What happens when someone gets to the end of the process, and realizes they don't have rights enough to tag a project they are on? Let's have a positive action Item for them, that moves the process forward.

Action Items

• Discuss Idea and review other potential solutions/options, etc.
  IDEA: Make it possible to share the manual process page (already filled out), with someone by pasting them a link. (MVP just a link - future iterations it could actually open a an issue if that seems desired by users).
  EXECUTION:
  Option 1: either encode the arguments in the link itself (no storage needed)
  Option 2: store these requests in a database with a unique url that pulls info from database.

Resources/Instructions

Figma file - see Tag Generator - no organization - manual tag submission

Overview

GET /api/(version)/organizations
Retrieves the list of organizations

Action Items

• Setup Django REST Swagger for documenting
• Expose the list of organizations API

Resources/Instructions

• Django REST Swagger
• Demo by Joel
• List of API endpoints google doc

Overview

We need to tell people when and how to use our logo

Actions

• Write up minimum criteria
• Send to editor for language polishing
• Give to Chali for inclusion on Share the CTI

Overview

We need wireframes for developers to build website from

Action items

• Create some new pages for expanded functionality
  • Chali
  • Marissa
  • Bonnie

Resources

Figma files
CTI Site Map / Overview

Chali to cross check github repositories and ensure we have the current search page set up for a user to search projects efficiently.

Questions to be answered:

• How will a user search for projects? (i.e by keyword)
• How will they want to filter their search (drop downs) (ideas: affiliation, last updated)

Group effort to confirm the copy used on the home page and about page can explain the index to anyone. whether they are familiar with civic tech orgs or not.

Overview

All new team members need to be added to the roster

Dependencies

Waiting for an onboarding night

Action Items

• Get each persons email address via slack
• Add the person to the google drive
• Slack them the roster to get positive confirmation they have access to the folder
• Once they have updated roster, send Roster link to Bonnie
  • Bonnie adds to gitub

Resources

Roster

Overview

Create a repository for the backend

Action Items

• Transferred ownership from https://github.com/Abhishek-AC/test-civictechindexadmin to the new repo

Instructions

• Repository Name: CTI-website-backend

Overview

We need a list so that we can figure out how to represent visually

Action Items

• Create the top level outline
• Divide up who is going to do which part
• Put names on, and link them to their websites or meetup
  • checking as you go to see if website is actually valid

Resources

List of all orgs that need to be in the index

Communicate With Us

Volunteer Form

Donation Link - Need to inform user to select our Brigade in instructions

Social media links associated with Hack for LA added in Footer.

Gwen to source new inspiration for the about us page graphic. Will work on a few different iterations.

OVERVIEW

Database setup required for the website

ACTION ITEMS

• Discuss CTI's use case with the OPS team
• Initialize Database on Heroku
• Provide Database access to Bo Yang

Overview

Initialize the project with Docker and push it to the repo.

Action Items

• Initialize the project with React
• Use Docker
• Learn JSS

Overview

Code the header for our civic-tech-index website.

Action Items

• Get website logo
• Code the header
• Add nav links

Resources

• The Design
• The Code