NONPROFIT CROWDSOURCING APP

Event planning and fundraising can be overwhelming, especially to those who have never done so. This app makes it easier.

For my thesis project, I designed a mobile app, where individual users could help promote fundraising events via their social networks for a specific cause. I tailored this app to the Be the Match Foundation, a non-profit, near and dear to my heart, that helps find matching bone marrow donors to those in need. However, this app could be used for any non-profit for fundraising events.

Some app features include making a donation, promoting a donation/fundraising event, and recording a compelling video message to engage others to act.

To create a solid app, my work involved: user research, interaction design, digital prototype creation, and user testing.


INTERACTION DESIGN





Planning the flow of an app can be challenging. I created a rough flow in Illustrator and then marked it up to see the unique screens which would need to be designed out for the prototype. From there, I created storyboards mapping the various screens to each other.


DESIGN AND PROTOTYPE DEVELOPMENT


Main menu from Illustrator



Creating the prototype in Fireworks


I used Illustrator to build out the UI. After some serious investigating, I decided to create the digital prototype using Fireworks (with the help of some jQuery and PHP), which I found through an Adobe tutorial by Matthijs Collard. It’s based on clickable image map areas and layers, which at the time was easier for me to whip up than trying code something that wouldn’t look as polished.


USABILITY TESTING


Mobile Usability-Testing Sled


Video from the webcam

The best way to see if your designs and interactions work is to test them. The more realistic the testing can be, the better (i.e., test on the final device, rather than with a paper prototype). For this project, I created a mobile usability-testing sled, which was a webcam mounted to some flexible conduit attached to a Plexiglas base. The phone was placed on the base and users held the base while testing the app. The webcam recorded a top-down view to see how users interacted with areas on the screen. I’ve since modified my DIY/punk-rock testing sled to a better one.


ITERATION


Sketching the edits


Iteration is the key to making things better. Based on the results of my usability tests, I ended up redesign the app to include more visuals, less text, and better chunking of information to guide the user down a path of action.

Below are the original and revised screenshots for the app's event planning screen and video message help screen.

EVENT SCREEN


Before testing


After testing

VIDEO TIP SCREEN


Before testing


After testing

 

Created using Foundation (v4.3.2)
michelletchin @ mac . com

Twitter icon    LinkedIn icon    Instagram icon    Flickr icon