Designing an impactful and informative website for women of color impacted by the Justice System seeking economic resources

Develop for Good is a 501(c)(3) nonprofit that works to design and build digital products & platforms for other non-profits while providing students the opportunity to receive hands-on experience working in the tech field with clients. Develop for Good recruits and manages teams of product, engineering, and design students from diverse backgrounds. I was assigned to be a designer for J*Crow.org.

J*Crow is an early stage nonprofit that seeks to empower Black women and women of color impacted by the U.S. criminal justice system with financial and economic resources. Black Women and Women of Color make up <11% of jail and prison populations, yet pay >60% amount of fees to the U.S. criminal justice system.

Before we started designing, we identified our target groups and aimed to understand their goals and pain points.

We read literature regarding the niche topic space to ground ourselves.

➺ Include persuasive storytelling and empowering CTAs, so that target users feel empowered to better their situation and for investors to feel empower to make a donation for a meaningful cause
➺ Craft a color palette that honors the organization’s values and is culturally sensitive, which requires a close collaboration with the stakeholder to understand their vision

While developing the mid-fidelity designs, we went through multiple iterations, experimenting with different colors, shapes, layouts, and images to refine the overall design.

My specific design contribution to the team was Version B. I emphasized using geometric shapes in the website’s visual design, specifically in the hero image. I incorporated bold colors, including orange, yellow, green, and purple, to enhance the impact of these shapes.

We presented various versions of our design to senior designers, and rapidly iterated between each interview. We received overall and specific feedback on the brand identity, user flow, page layouts, etc.

➺ We incorporated more colors to our web pages, in order to create a more vibrant and empowering identity.

➺ We refined visual assets to include intentional and meaningful shapes rather than random ones.

I was in charge of creating a prototype of the website with both desktop and mobile interactions so that our stakeholder could test them out before we moved into the development phase.

1. Embrace the fact that changes will happen and iterate with your team as much as you can. Working as a team enabled us to quickly iterate on multiple designs and adapt to the client’s evolving needs. Despite these ongoing changes, we successfully delivered the final product on time by the end of the project.

2. Don’t be afraid to admit you don’t know how to do something and need help. I was responsible for developing the prototypes for both desktop and mobile versions, but I struggled to make the transitions look smooth. I reached out to a team member for assistance, and she suggested using components with variants in our prototypes. She even walked me through the process of creating and applying them. Following her guidance, I was able to successfully create seamless transitions in the prototypes.