[mini project] Complete a user interface overhaul of DPG Report Card layout

[jwflory]

Note: This is a mini project intended for Outreachy May 2022 round applicants. This task is more advanced and will take more time to complete during the contribution period.

Summary

Complete a design exercise to redesign the DPG Report Card layout, implement the design, and create 4-5 profiles on the production site using the layout.

Background

Is the new feature related to a problem? Describe the problem: A prototype of DPG Report Cards was described in unicef/coach#1 and implemented in #44. The layout is not polished, it is not responsive, and needs additional personalization.

What does the new feature look like to you?: Take a look at the DPG Report Card layout and evaluate shortcomings and where it could improve. You will first create a wireframe/mockup of the Report Cards on a laptop and mobile device viewport. Then you can move forward with updating the layout.

Details

This one leaves creative direction to you on how to solve this. But there is some important information to capture before creating a mockup. (Penpot or Figma are good tools for this) Consider these details:

• DPG Report Cards are created for startup companies that create one or more open source projects.
• Links to the open source projects made by a company should feature prominently, like verification of the information source. They may exist on GitHub and GitLab. Some report cards will have one link, others may have 10 or more.
• Dynamic data (e.g. about each company, project, and their progress) should be set as frontmatter in the file. The content in the file of the report card should be descriptive about what the company does and what their general open source progress is.
• Responsive / mobile-friendly design should be considered first when improving the interface.

In design interviews, here was feedback shared by other UNICEF colleagues that is yet to be fixed:

• Assigning a score: Could a company receive a single-number score or indicator of their progress? Ideally, this would be at the top of the card and would be a summation of their results shown further down in the report.
• Cohort assessments: How much progress has a cohort made towards achieving DPG certification status? Some way to aggregate company progress for a cohort and offer quick visual comparisons, perhaps on the home page view.

You can also ask any questions to help clarify your understanding of the DPG Report Cards.

Outcome

Lead the release of a production-ready layout to support an emerging use case of the UNICEF Inventory theme.