Discovery.

What are we building and why?

My initial meeting with Angie, needed to cover everything to make sure the project was feasible. The developer gave me a list of functional and non-functional requirements he needed more info on and I crafted questions to determine the why, how, and feel of the site.

My normal OCD tendencies and carefully typed questions were out the window. It was time to roll up my sleeves, grab a pen and work quickly.

Due to the short amount of time for this project, I knew I wasn’t going to be able to delve into as much research as I’d prefer but I was optimistic that I could gather enough info to create a solid first iteration in order to meet the deadline.

Condensing my research meant determining where I could get the most valuable information quickly. Too uncover how to best share information about the cause and encourage donations, I compared 8 non-profit sites and over 20 articles on non-profit sites and statistics, jotting down notes instead of taking the time to create a presentation-worthy analysis.

This gave me a jumping off point for features to include and visual references for the layout.

8

Non-profit Sites Compared

20+

Research Articles Reviewed

Key features to focus on:

Make it easy to give

The average online conversion rate for nonprofits is just 17%

Accessible from any device

Mobile devices account for 54% of non-profit wwebsite traffic

Globally distributed

31% of worldwide donors give outside their country of residence

Design.

one-click to donate

As I entered the visual phase of the project, my ultimate goal was to drive donations.

I incorporated ‘donate’ buttons throughout the site so there is always a one-click to donate opportunity, ensuring that visitors are never left searching for a way to contribute.

Responsive for all

With over 50% of non-profit traffic coming from mobile devices, making the site accessible from any device, no matter the resolution, was a key focus. This meant it needed to operate with or without javascript so it would still render, even when someone is using an older device or browser.

Accessible worldwide

As a non-profit being shared with people worldwide, we wanted to make sure a long load time wouldn’t hinder donations.

Working with the developer, we discussed image optimization and a globally distributed content delivery network so the product was closer to the end-user, reducing the request time.

Safe & Secure Giving

With 54% of donors worldwide preferring to give online with a credit/debit card, ensuring the entire checkout process felt secure and conveyed trust to the end user was a primary concern. We opted to use Stripe because it is trusted globally with the highest level of security, supports languages and currencies worldwide, and it’s optimized for any device (including Google Pay and Apple Pay).

Once I had an idea of how to best provide the needed info, I transitioned to mid-fi wireframes so I could quickly swap colors and images for the client to review.

Colors to convey a feeling

Angie spoke of her mom as being positive and optimistic, so I pursued color palettes that conveyed that while also aligning with Angie’s personal style which is modern and serene.

The wireframes started coming to life as I added colors and stock photos for Angie’s feedback. I presented her with two layout options and 6 color palettes, to get a better idea of the direction she wanted to go in.

Hiccups.

Sometimes things don’t go as planned

Angie was running into difficulty getting the 501 (c) setup and thus the bank account she planned to link to Stripe for donations. The day before the site needed to be live. But attitude is everything - she remained positive and we were determined to make it happen.

So we pivoted, doing some research to ensure the Stripe account could be setup as personal and switched to non-profit once she had all the legal documents and edited some of the text.

Reflections.

What I learned

This project was a monumental learning experience for me in so many ways! As the first live site collaborating with a developer, I gained a lot of real-world experience I didn’t have in bootcamp.

Communicate with your developer early and often.

While I do have experience working directly with clients and design teams in past positions, this was my first time working on a live site with a developer outside of my own portfolio.

I learned to be more aware of technical constraints- like how design translates to code (hex colors in Figma are not the same as web-safe RGB colors!) and what we can create in short order when we communicate about what we need and expect from each other.

This project has given me a better sense of how things work with development so, as a designer, I can provide the deliverables they need in a way that works best for them.

A glimpse into the life of orphaned children in West Africa.

Not all lessons learned are about design and business. This project opened my eyes to the plight of over 12,000 children orphaned by the ebola epidemic. It was heartbreaking and inspiring all at once.

What we discovered while creating a website for Trish House was so humbling, we provided all design, development and hosting free of charge as our way of giving back.

Looking Ahead

Increasing reach and sharing the impact of Trish House.

Moving forward, we are already planning additional work to build on the site’s initial success - making updates now that all 501 (c) paperwork has been finalized.

I would love to add more information about the 16 kids living in Trish house, the impact donations have made for them and different way to donate - I believe that giving people the option to donate by dollar amount or sponsoring a specific need, such as bedding or toothbrushes, might increase engagement and generosity.

Objectives:

Increase donations for 2023

Key Results:

1. 1.Increase donation page conversions by 25%
2. 2.Develop a plan to show one-time or occasional donors the value of committing to monthly giving, by end of Q2.
3. 3.Increase private donations 30% by EOY.