Project Description Page: Add Problem, Solution, and Impact Section

[phuonguvan]

Overview

We need to design an additional section on each individual project page that displays the Problem, Solution, and Impact & SDG info so that development can build the content into the site.

Details

The content design has already been created (sort of), on the Citizen Engagement page. But it may or may not fit onto the current width of the project page

Action Items

• Review the Citizen Engagement project card display layout (Figma and online)
• Review the Project Pages layout (Figma and online)
• See if you can fit the card in between two of the existing cards. If it doesn't fit (the content is too wide, etc.), brainstorm ideas about how you might reformat the content on that card to work with the layout of the project page.
• Review ideas with the design lead
• Design low-fi prototypes of the section in mobile and desktop views
• Decide if it goes before or after the resources section in the project description
• Review low-fi designs with the design and product lead
• Design hi-fi prototypes of the section
• Review hi-fi designs with the design lead

Resources/Instructions

Current page layouts

• Example of a Current Project Page
• Example of the Problem, Solution, Impact & SDG info layout on Citizen Engagement page

Where to find words to use in your mockup

• Program Areas Audit - This spreadsheet will tell you which SDG to use in your mockup for a specific project
• Writing Draft for Problem, Solution, Impact - This document has the current wording for what to use in your mockup for the Problem, Solution & Impact

Figma files

• Design Systems
• Figma - Citizen Engagement page
• Figma - Individual Project Page

[github-actions]

Hi @phuonguvan.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[gold-o]

Availability for this week:

1. Progress: I have brainstormed ideas for the issue and need to review them with the design lead
2. Blockers: N/A
3. Availability: 5 hours
4. ETA: Second week of May

Images:

[ExperimentsInHonesty]

@gold-o Phu and I reviewed your questions, and you can remove all of the items you suggested
✔️can remove picture
✔️make all text 16 pt
✔️don’t have to have the 311 title
✔️can lengthen card

[github-actions]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, May 17, 2022 at 12:21 AM PST.}

[github-actions]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, May 24, 2022 at 12:21 AM PST.}

[gold-o]

Progress: I have completed the low-fi prototypes and the design lead and I had a voting session with the team to decide which prototype to develop into a hi-fi prototype. I am currently in the progess of developing the hi-fi prototype.
Blockers: I have to brainstorm ways to enlarge the SDG icon and fit it into the prototype in progress
Availability: 4-6 hours
ETA: By the 5th of June
Pictures:

[github-actions]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 7, 2022 at 12:21 AM PST.}

[github-actions]

@gold-o

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 14, 2022 at 12:19 AM PST.}

[gold-o]

Progress: I have completed the hi-fi prototypes.
Blockers: N/A
Availability: N/A
ETA: This issue is completed (06/19)
Pictures:

This is ready for development

[kathrynsilvaconway]

@ExperimentsInHonesty Am I writing an issue to update the project page to the most recent Figma design? Just checking because this one is ready for dev, but it doesn't have any explicit action for me to take.

[ExperimentsInHonesty]

@kathrynsilvaconway Please make an issue for development to take the change to the project pages layout and make it into new code for the project pages. Do this in a new feature branch. Here is the page that they will edit https://github.com/hackforla/website/blob/gh-pages/_layouts/project.html

[blulady]

• Not sure why this showed up in New Issue Approval today, but it is closed by issue Add Problem, Solution, and Impact Sections to Project Pages #3547. If there is anything else we need to do with this, please make a comment, otherwise I think it can go into the done column.

[ExperimentsInHonesty]

Moving back to done and archiving. It was in the new issue approval column because an issue had not been made, you just didn't see it until the day you mentioned it.