[mini project] Design a generic template/format for team profiles to repurpose as module or in theme

[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

Import the Inventory team profiles from a downstream implementation and incorporate it into reusable code, either as a Hugo module or adding it to the Inventory theme

Background

Is the new feature related to a problem? Describe the problem:

The team profiles feature is one of the most useful features added to the Inventory theme, but it only exists in the downstream the unicef/inventory repository. It is not available for other downstreams like unicef/drone-4sdgtoolkit. There may be other use cases in other downstreams.

What does the new feature look like to you?:

This is more of a refactor and requires design thinking. What does a generic profile look like? What is the essential data to collect for a profile? What kinds of metadata are used in the front-matter as part of the template? What is a generic template implemented as a Team Profile in the Inventory site? What could a profile look like for the Drone SDG Toolkit?

Describe any alternatives considered:

This can remain the Open Source Inventory and be utilized as in that downstream, as it was originally designed for. But we lose out a way to increase the value of this theme as a useful building block for other downstream users, or potential new users across UNICEF.

Details

A Hugo module is the most modular and ideal approach. The module exists independently of a theme, and can be "plugged in" to any other theme that implements its features. One could have a Inventory Hugo Theme site with the team profiles module or without it. This approach requires creating a bare minimum template, in a format that could be considered "global" for our existing downstreams.

However, bundling it into this theme also works fine. It should still be generic enough that it could work for both the Inventory and the Drone SDG Toolkit, but it will not have to be as general-purpose as a Hugo module in a new repository might be. It could be imported in downstream commits in the git submodule for the theme.

Outcome

Other downstream theme users can benefit from this great new feature to the theme

[Yavnikaa]

This looks interesting to me. Shall I start working on it?

[jwflory]

@Yavnikaa Thanks for your interest here! The task detailed here is important, but it is complex in nature. It would involve working with the current implementation of the Team Profiles in the unicef/inventory repo, creating a generic version of them to include in this theme, and then updating the implementation in unicef/inventory to adapt to the new, generic version. I think it could take a couple weeks to get right.

I suggest starting with a couple of good first issues to get your bearings, and then circling back to this one if you are still keen to give it a go.

[jwflory]

I opened this issue up as help wanted and listed it as an Outreachy mini project.

[Yavnikaa]

Can I take it up as a mini project to work on?

[jwflory]

@Yavnikaa Certainly! You can take this mini-project on for the application period. Do you feel like you have the information you need to make the first steps on this, or is there any additional guidance I can provide? This task will take some user research to get going.

The first milestone for this issue would be a wireframe/mockup of the general profiles, along with an example of the data structure for a new post's front-matter used to generate the profile. This would give us a proof-of-concept to rally around for the general design, and then we can think through how more UNICEF Venture Fund-focused qualities are layered on top of the general profile. Does this make sense?

[Yavnikaa]

Sure, I'll start off and ping you whenever I face any issues. For the user research and feedback can I use the matrix room to connect with other users and community members?

[jwflory]

Sure, I'll start off and ping you whenever I face any issues.

👍🏻

For the user research and feedback can I use the matrix room to connect with other users and community members?

You can use the Matrix room for clarifying questions and for help with working with Hugo. But we will socialize the mockup/wireframe with some other stakeholders outside of the Matrix room, most likely here in this GitHub Issue. There are some specific folks who may use this feature in a downstream site, so we will solicit their input on the proposed design before moving to the code and implementation step.

[Yavnikaa]

I explored the given team profiles like this: https://unicef.github.io/inventory/cohorts/blockchain/xcapit/ and did a breakdown analysis of the page by myself to start off.

The entire page is divided as:

• About
• DPG Indicators
• Aligned SDGs
• Learn More
• Related Articles
  Do we need to add or remove a title here? Can I connect with some writers or users to understand the importance of these titles and decide if some more is needed or not?

The major issues I feel in the UI have been mentioned here:

Looking forward to any feedback and suggestions for the same :))

[jwflory]

Hey @Yavnikaa,

The entire page is divided as:

* About
* DPG Indicators
* Aligned SDGs
* Learn More
* Related Articles

Do we need to add or remove a title here? Can I connect with some writers or users to understand the importance of these titles and decide if some more is needed or not?

The titles look right. We could use localization within Hugo to make this text more customizable. It may be a better task to refactor the existing profiles, migrate them into the theme, and improve the interface.

The major issues I feel in the UI have been mentioned here:

These are all good observations. Could you propose a wireframe of what an improved view would look like? This will frame the scope of work for the profiles and how to phase the improvements.

Looking forward to any feedback and suggestions for the same :))

Does this feedback make sense?

[Yavnikaa]

I have prepared the mockup for the page, imrpoving upon the critique I mentioned before.

A couple of pointers:

• I have reduced color in the DPG indicators and made it more subtle only to connect with the different indicators.
• Links have been highlighted.
• The social media icons can be given their specific brand color on hover.
• The hierarchy of previous and next page, has been put to the bottom-most, as per the user's mental model.

Excited to hear feedback and any inputs from you @jwflory :)). Let's share this with the other stakeholders and community too soon once you approve it to get the view from those affected by it!

[Yavnikaa]

Any updates for us to proceed further on this, @jwflory ?

[jwflory]

Hey Yavnika, catching up here.

@Yavnikaa wrote…
I have prepared the mockup for the page, imrpoving upon the critique I mentioned before.

The mockup is beautiful! It also seems to reveal some other improvements that could be made to the theme, like the breadcrumb bar.

@Yavnikaa wrote…
A couple of pointers:

• I have reduced color in the DPG indicators and made it more subtle only to connect with the different indicators.
• Links have been highlighted.
• The social media icons can be given their specific brand color on hover.
• The hierarchy of previous and next page, has been put to the bottom-most, as per the user's mental model.

Excited to hear feedback and any inputs from you @jwflory :)). Let's share this with the other stakeholders and community too soon once you approve it to get the view from those affected by it!

One possible improvement would be to change the DPG indicators into a progress bar, e.g. how many indicators of the nine are already met? What percentage is complete? This is a common question that the Venture Fund portfolio managers wonder about our companies as we are working with them.

I think this mockup could move into early iteration and prototyping now. There are no immediate issues that stand out to me, although I do wonder what the scope of changes might look like, e.g. do we first make general UI/UX enhancements before modifying the Team Profile template?

I also think this would be helpful for people like @nathanbaleeta or @iperdomo if they were reviewing a Team Profile. It would be easy and quick to see things like progress on DPG indicators and where to find the open source code and community.

[Yavnikaa]

Firstly, thankyou so much for the feedback @jwflory ^.^

This makes a lot of sense to convert the DPG indicators to a progress chart, indicating the percentage too. It can easily be included in the section of Fulfilled DPG indicators. Some options I explored and liked are here:

(Instead of this complete list, double clicking that part, can reveal the name of the DPG indicator)

We can have 9 dots forming the circle, each signifying a different DPG indicator. We can give a mapping or a tooltip specifying the name.

If the DPG indicators are progressive and ordered, then we can even go for a traditional progress traching bar like this.

Which one do you find the most suitable? I'll adapt that one in our design template.

To proceed further, I was thinking on doing generic enhancements concerning this before and then the hardcore part of the Team Profiles. What do you say?

[jwflory]

@Yavnikaa The 9 dots approach makes the most sense to me. Each DPG indicator can be completed independently or mostly independently from the other. They may be completed in different orders and some projects may achieve some indicators while others achieve other indicators.

[Yavnikaa]

Thanks @jwflory for the prompt reply :))
I, also, liked the 9 dots approach the most. Here is something I've prepared further in that direction.

I was thinking of executing it like this. We can only show the fulfilled DPG indicators next to it with color codes as shown above. Here we are not showing the entire list of DPG indicators at once, to reduce cognitive load. However, on hovering over the dots, we could show the indicator name irrespective of whether it has been fulfilled or not, as a tooltip.

The other approach is to show all the DPG indicators below in a page-wide box as a Legend. The fulfilled ones would be color-coded, and the rest can be just mentioned there.

I personally like the first idea better since it gives what we want on the first reveal and further we can dig in if we need more information. What do you suggest? Shall we finalise this?

[jwflory]

@Yavnikaa The preview looks great. I also like the first idea, and we can always link out to the full DPG Standard for additional context too.

Do you have the information and context you need in order to proceed?

[Yavnikaa]

Great, thanks!

To proceed further, i was thinking on first working on the breadcrumbs section and the "Related Articles" part before actually working on the Teams template. I'll directly raise a PR for these two by the weekend. Is it fine? Or do you have another idea to implement the settled design?

[jwflory]

@Yavnikaa I think breadcrumbs and Related Articles are good places to start. 👍🏻 These pieces are smaller and likely give a better footing for tackling the larger redesign.

Note that you will need to land Pull Requests in a few places. For things like breadcrumbs and Related Articles, they should land here. Changes to the Team Profiles themselves will (for now) go to unicef/inventory where the Team Profiles code lives.