We conducted Four 1-on-1 interviews with potential users. Our target demographic was people who have donated before. We wanted their thoughts on the donation process and how they feel about nonprofits in general.
We asked them a total of 16 main questions, and asking them to expand upon each answer. This provided qualitative data to draw our key insights from.
In a 45 minute interview, I received many useful insights from the founders themselves and their thoughts on nonprofits.
They reveled that they need a way for users to safely donate, a way to showcase transparency, and a way for users to find out more information about the nonprofit and the causes.
An online survey of 10 questions was sent out and completed by 46 participants. This gave us useful quantitative data that we were able to draw insights from.
3 Competitive Heuristic Analyses were done to compare and contrast existing and similar nonprofits in order to draw inspiration for the final design.
Somethings we liked included:
Then we arranged all insights and data points into an Affinity Diagram. This provides a useful way to analyze the data. I can see common occurrences, pain points, and key insights to follow.
Some of the valuable insights include:
Now that all the data has been compiled and analyzed, we can use the key insights and to develop our User Persona. She is a conglomerative representation of all of our research.
Our user scenario shows how she might actually come to land on our page and use our services.
Any project needs to focus on a few features at first. What would be the minimum viable product?
The 3 most important features go hand in hand with our goals:
Below are some of our early and initial sketches. These are showing a variety of ideas, including:
Below are some of our initial wireframes. They are a bit higher fidelity than usual, but the team agreed to make it look as “real” as possible from the get go. This helped us to really hash out what works and what does not once we tested the designs through usability testing.
Below are some different versions of pages we had. From A/B testing, we were able to iterate and bring forth some see which designs worked better for our users. We ended up going with a slide in donation form instead of a donation form that takes you to a separate page.
The Donation Iteration was a big one here. Based on feedback from testing, we added a background blur effect and increased the font sizes. More importantly, we decided to have the form slide in from the side.
Users are still able to scroll through the rest of the page without having to go back, just in case they clicked “join us” by mistake, or just to see what happens. There are more prompts to donate as they scroll without overwhelming the user. This eliminates frustration and they can donate straight from the current page.
From low to mid to high fidelity, testing was crucial every part of the way. We had to make a couple of changes to the overall design including:
After 3 rounds of testing and 9 total participants, our prototype is ready to show the clients. Check out the video below for a scroll through of the prototype!
We are also working on a responsive web design for mobile as well. Everything we designed was made to fit into mobile.
The stakeholders and founders have been contacted and shown the prototype. They are thrilled with the overall design!
Our next steps will be to continue testing, finish designing the contact page, and implementing the design and developing a real web page so they can start to collect donations online.
The nonprofit Arms of Love now has a design for their online presence, and they are excited to have it built.
Feel free to send me a message here.
Don't want to send me a message here? Fine. No hard feelings. You can also reach me at:
