Create common design resources and templates for prototyping and wireframing

[jwflory]

Summary

Create a common library of design resources and/or templates to accelerate the speed of prototyping new changes.

Background

Is the new feature related to a problem? Describe the problem: In the process of development, we usually start with a prototype or wireframe of the change to better understand its appearance and get everyone on the same page. The problem is, setting up a wireframe can take some time, yet it is still something we do very often.

What does the new feature look like to you?: A successful implementation of this issue is a set of resources, patterns, visual assets, etc. for using in common tools for building wireframes, mockups, or prototypes. This could work in something like Figma.

Describe any alternatives considered: Design resources for the open source prototyping tool, Penpot, would also be helpful.

Details

The success criteria for this issue looks like tools and resources that any developer can use for quickly visualizing new ideas for the UNICEF Inventory theme. They can quickly emulate the look-and-feel of the site, and make changes in the wireframe to drive discussion for new changes.

I'm not an expert on this topic, but I think it is something important for the contributor experience. At a minimum, I would like to see templates and/or patterns for use in Figma. But there is room for this task to go beyond the bare minimum too. It will take some creative thinking and likely a bit of research.

Let's also hear your ideas for what this design library could look like?

Outcome

• Less barriers for prototyping and visualizing new ideas to work on the UNICEF Inventory theme
• Easier for developers to follow steps for proposing changes by visualizing their changes first using this design library

[jwflory]

@siddharth628 Sure! You can lead on this one.

Before you get too far along, let's discuss it together. What ideas do you have for tackling this issue with the above context? What kinds of things do we test?

[jwflory]

This is fair feedback. You also identified other points that could go into new issues. The scope is big!

If we could narrow it down, what do you think a good first step would be to make prototyping and testing ideas easier? We could identify interviews and exercises to better understand the site UX. Maybe this is where we should start, but for the context of the Outreachy contribution period, we will need a narrow scope for something to achieve within a week or two.

@siddharth628 wrote…
I think a strong UX case is needed before making a general UI style guide.

What does putting together a strong UX case look like to you? Are we looking at static documentation or something dynamic?

This issue was open-ended because it was something I thought would be helpful, but I lacked a clear picture of what tools and resources could be generated to address this need.

[jwflory]

I moved this issue into the backlog and tagged it as a good first issue.