[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.

[Neha9849]

I would like to work on this issue. But some things are not clear for me. Wishing to learn more about this from you.

[jwflory]

@Neha9849 Thanks for your patience with a follow-up. You can take this one on; I'll assign it to you in the meantime.

What questions do you have, or is anything specifically unclear to you? I can share more general information, but it will help to better understand what is unclear to you.

[Neha9849]

@jwflory Will we Hardcode the data in the Report card ? The Status and evidence fields in the report card should be dynamically updated. So, How are we going to evaluate the status of a particular project? Is there any program that DPG provides to check the status? Or do we evalute them manually and provide status and evidence?

[jwflory]

Will we Hardcode the data in the Report card ? The Status and evidence fields in the report card should be dynamically updated.

Yes. Data is hard-coded into the front-matter of a project report card (see this example). Perhaps there is a more intuitive way of doing this, but it might be separate from the scope of this issue (i.e. an interface overhaul).

The status and evidence fields in the report card are pulled from the expected front-matter inside the report card post, like what is linked above.

So, How are we going to evaluate the status of a particular project? Is there any program that DPG provides to check the status? Or do we evalute them manually and provide status and evidence?

Good question. This is done manually now. A project that gets scored will meet with an Open Source Mentor assigned by UNICEF. The Mentor meets with project teams every month for 10-12 months. The Mentor would be the one who creates the profile of a project and publishes it on the website, after a conversation with the project team.

There is a possibility a project team submits updates and changes to their report card as well – but this is a potential use case, not an actual one.

[Neha9849]

@jwflory @Idadelveloper I tried testing out the dpg-report card partial by incorporating it in a team profile in the inventory repository.

This was the outcome-

This partial is more over like a layout as it contains sidebar, related articles section,breadcrumbs etc. I want to modify the dpg-report card partial so that it only contains the table. Do you have any other thoughts or should i make the changes?

[jwflory]

This partial is more over like a layout as it contains sidebar, related articles section,breadcrumbs etc. I want to modify the dpg-report card partial so that it only contains the table. Do you have any other thoughts or should i make the changes?

We want the DPG Report Cards to be their own layout, and not to be embedded inside another layout like the team profiles. The best place to look for this at the moment is the unicef/coach repo (see example site).

Perhaps instead of a partial, it should be its own layout. Then a page could inherit the template by declaring type: dpg-report or something like that.

Does this make sense?

[Neha9849]

I did not understand where i should add this dpg report cards. In unicef/coach repo we have only added report card of oky under the blockchain cohort. There we didnt implemented the profile for that startup team. Do you want to have report card in seperate page? If that's the case than, should i add a button to link to the report cards in the profile page?

[jwflory]

@Neha9849 wrote… I did not understand where i should add this dpg report cards. In unicef/coach repo we have only added report card of oky under the blockchain cohort. There we didnt implemented the profile for that startup team.

Ah! So, originally I did not see the DPG Report Cards being shared with the Team Profiles feature. I was looking at them as two separate features.

For example, the Open Source Inventory will feature Team Profiles of start-up companies working with the Venture Fund. The Coach Cards site would feature DPG Report Cards of different open source projects tied to the UNICEF Venture Fund. Does this make more sense?

@Neha9849 wrote… This partial is more over like a layout as it contains sidebar, related articles section,breadcrumbs etc. I want to modify the dpg-report card partial so that it only contains the table.

Circling back to this part, I understand what you are asking now. I hadn't thought of moving the table into its own partial before. I'm not sure what the advantage to this would be. Is there a reason you would recommend it as a partial, different from keeping it as a layout?

@Neha9849 wrote… Do you want to have report card in seperate page? If that's the case than, should i add a button to link to the report cards in the profile page?

I suggest to avoid connecting the Report Cards and the Team Profiles. In the future, we could look at integrating and tying the two together. But first, I think it is best to prototype the profile cards and get something we are happy with. Once we have an improved user interface, we can get feedback from other UNICEF mentors who would update the report cards.

[Neha9849]

Ah! So, originally I did not see the DPG Report Cards being shared with the Team Profiles feature. I was looking at them as two separate features.

@jwflory yep i got it now :)

Circling back to this part, I understand what you are asking now. I hadn't thought of moving the table into its own partial before. I'm not sure what the advantage to this would be. Is there a reason you would recommend it as a partial, different from keeping it as a layout

I said this as i thought we will be embedding the table in the team profile.

I suggest to avoid connecting the Report Cards and the Team Profiles. In the future, we could look at integrating and tying the two together. But first, I think it is best to prototype the profile cards and get something we are happy with. Once we have an improved user interface, we can get feedback from other UNICEF mentors who would update the report cards.

Makes sense, Thanks.

[Neha9849]

Currently we are using bootstrap grid for the report card.

Current behavior:

I suggest using table for this purpose as our table already has custom stylings and we can modify it a bit to get desired result. I think this will improve the UI a lot. @jwflory What do you think?

[Neha9849]

Preview of what it might look like with my proposed changes-

Mobile view -

What changes i did -

• Made the DPG report-card using HTML table.
• Changed the status column styling by using colored themify icons to represent the respective status.

I think this little changes has improved the UI a lot and also made it responsive. This is just a starting point there is still scope for many improvements. @jwflory @Idadelveloper What to think of this changes? Looking forward to get feedback on this layout :)

[jwflory]

Hey @Neha9849, thanks again for your patience here. Your mockup looks off to the right start! 🔍 🚀

@Neha9849 wrote… Currently we are using bootstrap grid for the report card. I suggest using table for this purpose as our table already has custom stylings and we can modify it a bit to get desired result. I think this will improve the UI a lot.

That is a good question. The Bootstrap grids were most appealing because of how they were designed to be responsive first. The mobile interface is important and likely an area we can improve on, given only about ~13% of the current traffic we get is from mobile devices:

For this reason, I think it is good to continue using grids so we benefit from flexbox responsiveness. Ideally we could achieve a mobile-first design, even though the Inventory is not built that way as of now. I'd like to push this number up. Additionally, this table could expand to more columns in the future.

@Neha9849 wrote… I think this little changes has improved the UI a lot and also made it responsive. This is just a starting point there is still scope for many improvements.

I agree your mockup is a big improvement from the current version. I would like to see if we can pull it off with grids first in order to be forward-thinking. 🙂

[Neha9849]

Yep that makes sense! Using table can be problematic in mobile view when we increase columns in the future. But using responsive grids in the desktop view will make it look a bit unarranged( like before which is not aligned properly) This problem can be sorted using fixed sizes for the columns, but i think going with table can be easier to acheive responsiveness. Tables can be made responsive by making the columns horizontal for mobile view. Here is a image which showcase my idea-

@jwflory what do you think of this idea? or Do you have any other ideas for sorting the problem which we are facing while using the responsive grids? I am still thinking of better layout ideas as i agree that using table is not the best pracitce.

[jwflory]

Catching back up here… the mock-up is a good reflection of the direction we would go. However, now that the internship is started, we will focus on the main deliverables. This mini-project can be an end-of-internship stretch project depending how the sprints go.