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.
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.
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.
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.
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.