top of page

CLAY HOFFMAN

PHILANTHROPEAS

THE BRIEF

Austin residents want to give, and charities want to receive:

Design a site to match people wishing to donate food and charities in need. 

I worked with two other UX designers. This was a two week project and at the end we had a set of design deliverables to hand off to our four person engineering team. 

​

My contributions:

  • Research

  • Sketches

  • Wireframes 

  • Logo

RESEARCH

We conducted a facebook survey and were able to get around 60 unique responses back from participants.

​

User Discoveries: 

​

  • 2/3 looking for relationship with a charity

  • 1/3 looking for one-off donation

  • 90% willing to drop-off goods

  • 22% have not donated 

  • inconvenience of dropping off cited

User preferences:

​​

  • Simpler process

  • More pickup and drop availability

  • Donation transparency

  • More info about when charities are holding events

​

We did competitive analysis on two sites - Volunteermatch.org and Stuff the Bus. We used the insights into how these sites were developed to help determine user needs.  ​

IDEATION

We had a limited time-frame and group of new developers to work on this project. Establishing and maintaining scope is important under these circumstances. It was necessary to quickly establish a list of deliverables - 'must haves' to 'it would be nice'. Through this process, we created a minimum viable product (MVP).

Due to our time limitation we created a set of proto personas. Proto personas gave us a means of understanding of our user base to help craft a clear set of possible user goals and flows around giving. We also created an affinity map which provided a framework of information categories. 

SKETCHES

We sketched pages centered on potential donor and charity organization using the site. We used the Uship website as inspiration as they also cater to two different users simultaneously. 

WIREFRAMES AND PROTOTYPE

Wireframes were constructed in a bootstrap methodology in Sketch. The team did get bogged down in this construction method and we should have worked faster in Balsamiq to get a better idea of site flow. 

USER TESTING

Testing our prototype revealed the necessity of various semantic changes for greater clarity. An example: change the charity donation descriptor from 'need' to 'accept'. We condensed our site by adjusting to a one page sign-up and taking out the tips page and including it as a featured element on the home page. Lastly, we discovered that as a next-step developers should add a auto-suggestion tool in the search bar.

STYLE GUIDE

We decided on a verdant color scheme of greens and blues to best match the theme of giving.

  • All Droid Sans --  H3 PT Sans

  • Complement each other visually

  • Wide sans-serifs aids legibility

  • Guides the user between sections

FINAL PRODUCT

At the end of two weeks we successfully delivered a style guide, interactive wireframes and high fidelity mock-ups to our development team. We were really proud of our team effort and felt like we had successfully completed the project.

WE LEARNED

  • Have a clear timeline and order of process

  • Start your rapid prototype early 

  • Clear and up-front communication with developers pays off in the end.

NEXT STEPS

  • Expand the charity and nonprofit type beyond food donation

  • Enable givers to make connections and socialize

  • Add a volunteering section, donate money

  • In-web messaging between Givers & Charities

  • Video instruction

bottom of page