Nonprofit landing page redesign

1 day design sprint

Image alt tag

Background

I like to volunteer my talents from time to time during giving season so I decided to look for a project on Catchafire.org. I found a visual website design project for a nonprofit organization and applied to volunteer.

Challenge

The client responded and scheduled a phone call. She was in a rush and said she would instead email me the requirements. When the client emailed me the information, I saw the scope was not what I was expecting. She was happy with a recent redesign of the site using Elementor website builder, and just wanted me to do some small visual tweaks. Most of the redesign was already complete.

Pivot

I decided it wasn't a good match, so I retracted my application. However, I was still excited about the exercise of redesigning the landing page so I decided to solve some of the UX/UI challenges. I proceeded with a 1 day design sprint to address the landing page. The result is a landing page that has a clean visual anesthetic with clear calls to action.

Non-profit landing page redesign

Screenshot taken 12/04/2022

Current site

I reviewed the site and assessed what could be improved. Since it was a one day sprint, I was not able to conduct user testing so I applied best practices using my nonprofit experience, and UI/UX knowledge.

Tools

  • Figma

  • Illustrator

My Role

  • UI Designer

Timeline

  • 1 day sprint

Moodboard

I read through the site to better understand the nonprofit organization, then started a mood board for visual inspiration.

Non-profit landing page redesign

Before and after

I looked at the current website and identified some areas of visual design that could be improved. The things I improved are typographic hierarchy, visual consistency, redundancies and alignments. I also planned to address spacing issues with the cards and fix color contrast issues. See the scrollable screenshots below.

Prototype

I created a fixed navigation so the donation call to action is always visible. I solved the card crowding by issue by giving them more breathing room by letting them bleed off the page and adding a horizontal scroll to that component.

Thank you for reading!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.