Make the site a little less text-heavy! People love images!

We don't have a design to display them anywhere just yet, but we should add a way for a project owner creating a project to attach and upload an image. Should be optional to start, but later would be required?

• store in S3?
• resize to some common-ish dimensions? I assume 16:9, maybe like a thumbnail version that's 300px wide and then the original? Not sure what we'll need yet

Help people differentiate how projects overlap and find volunteers faster!

^Let's do the same for volunteers page as well!

Enforce style guide programmatically

We should also add some "before you submit a PR..." info to the README. e.g.

• Run tests: bundle exec rails spec (or is bundle exec rake still preferred?)
• Run linting: bundle exec rubocop
• Anything else?

New fields for projects:

• slack_url
• discord_url
• github_url?
• anything else? other social media? Not sure if anyone is really that far along

The project for this project is a good example! https://helpwithcovid.com/projects/1-help-with-covid

Please add the following upcoming events to resource page 🙏

Header: Project Owners Office Hours led by Jamie Wilkinson
Sub-header: Thursday, April 9th 4pm-5pm PST | Complete Office Hours Questionnaire
CTA: Click here to add to your calendar

Header: Project Owners Office Hours led by Jeeshan Chowdhury
Sub-header: Friday, April 10th 12pm-1pm PST | Complete Office Hours Questionnaire
CTA: Click here to add to your calendar

Header: Project Owners Office Hours led by Radu Spineanu
Sub-header: Tuesday, April 14th 4pm-5pm PST | Complete Office Hours Questionnaire
CTA: Click here to add to your calendar

Header: Live Webinar with Ambika Bumb
Sub-header: Thursday, April 16th 12pm-12:30pm PST | Ambika is a Health, Science and Technology Advisor focusing on Crisis Management and Strategy.
CTA: Click here to add to your calendar.

Quick design mock
Here's a quick mock for how the new "Upcoming events" module fit into current resources screen (for now). Let's use the same resource module style in home page.

Right now we can only select one filter to filter volunteers and project, but these can have more than one tag. We should allow filtering with multiple tags.

i.e. Volunteers that can help with Software AND Biotech, etc.

For projects:

• "Sort by newest"
• Sort by ASC/DESC
• (maybe) Sort by number of volunteers needed?

For volunteers:

• "Sort by newest"
• Sort by ASC/DESC

We're currently publishing emails in straight-plaintext:

https://helpwithcovid.com/users

Some solutions off-hand:

• Obfuscate the emails (HTML encoding, replace @ with AT or similar, randomize that, etc)
• "Email this user" and system sends them an email with current user set as reply-to

Other ideas or details on this welcome

For project owners, can we add 2 more fields?

• number of volunteers needed
• status: "just started", "need more volunteers", etc

What forks or similar initiatives are out there?

We'd like to list them as a "related projects" or similar list on the FAQ page to start, and potentially integrate with something like #98 in order to direct projects to a more region- or language-specific fork.

For now let's just keep here and then move to the FAQ, but might make sense to hardcode into the app so we can do that "suggested site" idea later

Can we make text inside projects on the home page selectable? I've found myself wanting to copy and paste it, but it's set up so you can only click it.

(I am a web developer, so can help if that's helpful.)

This is more of an epic or design project than a standalone issue, but I'm opening it for discussion and contribution, especially related to design and things I've missed.

We'd like to transform the simple "filter projects by tag" – for Medical Equipment, Help the community, Scale testing, Track the outbreak, Communications, etc – into more dedicated-looking pages where we can:

a) explain what this category does and is for
b) highlight projects in that specific category, independent of the general homepage highlighting

This is similar to Kickstarter's category pages, e.g. http://kickstarter.com/arts vs. http://kickstarter.com/film vs. http://kickstarter.com/games

For the first part, @caseypugh has started a doc w/ draft descriptions of each category: https://docs.google.com/spreadsheets/d/1p6oR087N8dUJj3pTmt0zqpg54nCSnbv2Nxp8pgTBq28/edit#gid=0

Should we also include images for each category?

On an engineering level we could do this by simply mapping URLs better and using the current tag system, or by introducing a whole new Category and ProjectCategories system? Former seems much simpler.

We could also then start to think about subcategories

I managed to sneak a link to my website by inserting the anchor tag into the input field. You're not escaping the user input, and that's ripe for abuse by spammers.

You're using simple_format, which sanitizes the input but doesn't escape it.

Quoting Rails docs:

Most text helpers that generate HTML output sanitize the given input by default, but do not escape it. This means HTML tags will appear in the page but all malicious code will be removed. Let's look at some examples using the simple_format method:

If you want to escape all content, you should invoke the h method before calling the text helper.

To escape the input:

<%= simple_format h(@offer.description), class: 'mb-3' %>

Here's the page in question (hover over the URL in the description section, and you'll notice that it is clickable). Also, formatting for this item looks off when looking from the index page.

Would you be open for the pull request?

From #hwc-feature-request -

it would be super useful if the level of availability could be indicated (e.g. full-time, 4 hours per day, etc).

Suggestion:

• For new volunteers, we can prompt "Level of availability" as they get added into the project.
• For existing volunteers, we can send batch email to volunteers to ask them to add back their "Level of availability".

Add <% if !current_user %> around SignUpToVolunteer Button to allow it to render only when user is not logged in.

We'd like to better track how far along a given project is. When submitting or editing a project, should have a status dropbown menu containing:

• Idea
• Brainstorming
• In development
• In the wild

Name suggestions and more fidelity to this very welcome :)

From discord channel #hwc-feature-request:

1: Make this a directory for ALL projects in the world right now
Currently this platform seems to only encourage ideas for new projects rather than listing established projects that volunteers are already involved with. As a potential volunteer I’m currently searching all over the internet to find ways I can help out but its so hard to find a good directory of opportunities. 

Rather than 'create project' needing a dedicated owner, maybe anyone could list (and write a description) for projects that exist in the world but they are not necessarily the 'owner'.

Suggestions:

• Add a separate section for project without owners -- similar to "create project" but these projects with have automatic tags "Project without owners" or "need out reach to owners".

There are too many projects.Users should be able to quickly see where they can contribute without going to each one of them, especially if they have expert skills such as "Epidemiologist" or "Data science"

• Projects can have skills such as medical, finance, programming language
• Users can browse projects list by skills. Click on "medical" and then it would restrict the list to projects requiring medical help

• Add "See more featured projects" arrow link
• Link to page with highlighted projects filtered

Figma link here: [TASK] Home - Featured project row update

Need @cat.liu's approval!

Project card components: location and time align left when there are no volunteers. See second project card vs. first one.

If no volunteers —> “0 volunteers”

Up for discussion..

current:
a clearing house for projects and volunteers that want to help with the COVID-19 crisis

Mostly just want to replace the phrase clearinghouse with a more common synonym. Some alternatives

• Find projects and volunteers to help with solve the COVID-19 crisis
• ...

Something to appear on all pages, with user-editable text

Maybe an accouncements model? Open to ideas on this one

Will also need a basic UI in /admin for editing them

First announcement would be about the new "How to run a volunteer project" playbook

Hello.

I think it would be great if you could create about page with info about this project,
the team behind it, how you are handling login data, etc.

maybe even FAQ and link to github/twitter/etc

With only application itself and Discord server only it doesn't look "legit" enough ... despite I understand that functionality was primary goal which was more needed in crisis that nice PR.

The Project Card component feels bulky and would benefit from adjustments to relative size and spacing of internal elements.

Ideally, this should be done before the card is rendered many times on category pages and filtered views.

Self-assigning to make changes directly to Tailwind CSS styles in a feature fix branch.

Request by Colin Curtin - WeTrace Project:

"hey could you add a field for linkedin/portfolio/social media onto the volunteer form?"

Many users have public profile pages, so we should link to the project owner from the specific project page. Here's the mspaint version:

Kickstarter has a "creator box" that does this same thing:

Should we start using gravatars so they have an icon?

So that we can focus efforts to the right projects and let project owners let people know when they don't need more help. Eventually we can filter/segment by this option.

Problem

There are many COVID projects out there that are doing great work on solving specific problems already, but they don't exist on HWC. This isn't helpful for HWC volunteers who are looking for the right project or project owners looking to better understand "holes in the market".

Goal

We need to help volunteers and project creators combine efforts. Build a way for anyone to submit project that doesn't require an owner. Create a visual identity to let people know this is just a reference to an existing project. For the team that is running the project, we could expose a "Claim this project" button to let them own it and keep it up to date.

Specifically, firing events on the relevant page for:

• User started (e.g. users#new)
• User created (users#create)
• Project started (projects#new)
• Project created (projects#new)
• Volunteer created (projects#toggle_volunteer iirc)

Having both start & create means we can see some basic funnels

"Featured project" (launched and popular)
"Actively recruiting projects" (interesting new projects)

How should we address this on homepage?

Currently, I'm seeing the same project on each category, eg: "COVID 19 - Idea Sprint" showed up 3 times.

Is there a way to exclude projects that are already on other rows?

please add in deals: https://www.humanapi.co/covid-19-response

Not sure if there is a canonical list of countries or country codes out there, but we'd like to ask projects for a specific country, in addition to the open-ended "Location" field that is there currently. Should be supplemented with "Global" as first option.

Suggested category color separation, definitely up to revision!

Color 1

• Track the outbreak
• Reduce spread
• News and information

Color 2

• Scale testing
• Medical facilities
• Medical equipments
• Treatment R&D

Color 3

• Help out communities
• Map volunteers to needs
• E-Learning
• Job placement
• Mental health
• Social giving

Color 4

• Other

Colors seem to be all over the place at the moment due to caching related issues. Also, this is semi-related to #65

As the number of projects and volunteers increases, it will be essential to integrate search in the Projects and Volunteers page. We will be integrating a simple search to quickly release this feature. The search should be able to search by name, description, and skills.

• Integrate Search in the Projects page
• Integrate Search in the Volunteers page

Initially will just list projects, newest first

Later should have some additional controls:

• highlight project (currently on the project page for ADMIN users)
• hide project (should set status=hidden maybe? Depends on #84
• maybe also voting or commenting in the future? Notes on the project

Anyone working on this might also need to add better seed data, and add their own user account as an ADMIN? Not sure

cc @sradu and @caseypugh since I'm not 100% on the best way to do this one. Maybe it doesn't need it's own special area, we can just re-use the regular ProjectsController and just sort by recent?

Let's just agree on https://helpwithcovid.com as canonical

For SEO reasons we should:

• redirect http:// URLs to https://
• redirect www.helpwithcovid.com URLs to just helpwithcovid.com

cc @sradu unless you want to go with "www." URLs. I noticed on site currently it's mostly non-www which I also prefer, DNS issues notwithstanding

After creating an account locally I noticed the nav header was breaking:

Besides the component issue, I suggest that 8 menu items is not ideal from a usability perspective.

To solve quickly, I suggest we have user-specific dropdown next to Create Project button that contains options in user context:

{menu-item label TBD}

• Your Projects
• Profile
• Log Out

It is nice knowing how many people are visiting

Bonus points to setup events for:

• start project (e.g. equivalent to projects#new)
• create project (projects#create)
• start user (user/registrations#new)
• create user (user/registrations#create)
• volunteered for project
• I think that's it

Right now they just look nice, but don't allow you to browse from there.

e.g. https://helpwithcovid.com/projects/323-coronapore

See attached

The filters on the top of the /projects and /volunteers pages link correctly, e.g.:

https://helpwithcovid.com/users?skills=Biology

UPD this field in “create a project” to either a country drop down or a search-and-select based off of where the project originated.

Q: Potentially expand this issue to allowing users to filter projects by country.

Hi,

Would it be possible to get an extract?

1. Which volunteers have signed up for which projects
2. Skill

I think we might have volunteers that are ready to help but are not actively yet on a project. And we have projects that are looking to get help. So I wanted to see if i can help here.

Some projects need funding.

From rspineanu on Discord

We've been thinking of popping up a button that says 'Apply for funding' once projects have N volunteers (N undecided). That application could go to multiple parties.

Step 1 could be to simply add a field asking for funding needs (if any) so that we record the information and we can surface it.

Can someone add that? (sorry my skills are nodejs/postgres, not familiar with Ruby enough)

Step 2 we could vet together the best projects and actually help them raise the money they need (e.g. by submitting a curated list to potential funders).

Notes:

• We would have to come up with a process to vet the projects. Maybe it starts with a simple weekly newsletter to highlight those? But it would also be good to have a working group on fundraising that can be much more proactive and help the projects that need it the most.
• If the project doesn't have a legal entity, we can find a fiscal sponsor for them or create our own ("OpenCOVID"?) to enable them to receive money (that's what we did for the open source community with the Open Source Collective). This has the extra benefit of making sure that those projects will have transparent finance (example). Happy to help here.

Before:

After (just the content, don't follow the mock-up design):

• Add project name that volunteer is volunteering for
• Add 'skill-needed' tags
  

Hi all! We'll need to add a "Short description" field to the project page. The character limit should be 129 chars. (😬 cc: @caseypugh @jamiew )

This is for our new project card design - easier for users to read on home page!

• What is this project?
• Who is behind it? (also all volunteers)
• What kind of projects are being submitted?
• How are projects being evaluated?
• Which projects should I volunteer for?
• Who can I contact with questions?
• What is Discord?
• How do I not get completely overwhelmed by DIscord?
• Your questions here:)

@ArminZ from Discord is working on a v1 of the text, but we'll need to build and style a page for it

Some Quick Feedback:

• Reduce header and sub header text-size to fit in mobile format. Recommend 24px and 16px vs. current 36px and 24px.

• Remove period for "We are 500+ projects and 9700+ volunteers strong.", add comma in "9,700 volunteers"
  

• Capitalize P in "projects" for Featured Projects Subheader
  

• Decrease project card header size to 16px vs. current 24px bold maybe if it looks good?
  

• For later: we should consider making HWC events scroll with only three components in the front homepage. The section will get big as we keep adding components.

Specifically so that multiple people can receive the volunteer notifications

Request from project owner Phil this evening. Thanks!

Another medium-sized design project. @tinnei and Cathy (what's your GitHub username?) have raised hands to take a first crack at this, but contributions and feedback are very, very welcome.

The problem: as a user landing on the site, it's hard to tell what's going on. 400+ projects are a lot to digest and makes it hard to for me to build trust in the site.

Solution: create a curatable homepage that emphasizes the most important or needy projects, and the information both volunteers and projects owners need to get the help they need. And add images to help make everything more digestible.

Tentative tagline? Helping projects get the resources they need.

Design inspiration:

• https://www.catchafire.org/
• https://kickstarter.com
• What else?

Current site traffic is 50/50 but design for mobile first.