Mary's Place is a Seattle organization providing services and shelter for homeless families. It is unique for its partnership with Amazon, who has converted its unused hotel properties into temporary housing.
Unfortunately, their website has not been able to keep up with the growth of their services and they sought the help of my team via School of Visual Concepts.
Over the course of ten weeks, we researched, ideated, wireframed, prototyped and tested our way to a mobile-friendly design for a new website focused on gaining volunteers and online donations.
During the research stage, I wrote questions for a survey to get a better perspective on people’s donation and volunteering habits. One of the most startling findings was the amount of distrust toward Amazon Pay — 16% of users said they would not be comfortable using it as a method of donation.
Amazon is Mary’s Place's most important sponsor and currently the only payment method featured on the front page. I would need to keep their Pay widget in a prominent place on the site but I also didn’t make it the default option and displayed other payment methods as well.
FINDING ORDER IN THE CHAOS
The original brief gave us a list of required features and after doing our research, we had ideas for a few more. We wrote these features and ideas on individual post-it notes which we could organize and re-organize until categories emerged. Those categories would inform the contents of the main menu in the first wireframes.
TIME IS MONEY
On the current site, Volunteering was grouped with a list of other less-common donation options, buried inside a menu. Since the original brief told us getting volunteers was just as important as monetary donations, we gave Volunteering a front page call-out next to Donation, thinking of Volunteering as giving time rather than giving money.
Although the website is focused on Mary’s Place receiving donations, it was also important that potential guests could quickly learn about what services are offered. Our first solution was splitting the front page into two choices: "I Need Help” (services) or “I Want to Help” (Donate).
After testing however, users were confused by what “I Need Help” meant and who it might be for. Ultimately it turned into “See how we help”, which is meaningful whether you are a person in need or a donor who wants to be sure their money is well-spent.
The stakeholders of Mary’s Place liked our presentation but implementation will depend on their funding as well as time from their volunteer development team.
NEVER STOP LEARNING
This was a truly comprehensive UX project and very illuminating to participate in every aspect of the UX process from beginning to end. Some things I learned beyond the technical skills-
Brainstorming as a first step seemed like it might yield some unrestrained creativity but actually, it led us down unproductive paths. We did end up keeping a few of the ideas from brainstorming but in the future, I would prefer to wait until after the research.
I also saw the importance of saving visual design for the end. Uneeded visuals will bog down later iterations, especially with so many people in the group making their own changes.