Be A Hero is a natural disaster relief app inspired by an interest in connecting people to others in need. We identified three primary use cases and aligned them to personas:
Hero User - The Hero User wants to provide ways to help others in need. This user wants to connect to agencies doing the groundwork to provide resources and donations to people in need, volunteer and signal boost so that others can help those in need.
Prep User - The Prep User is concerned with making sure they are always prepared. They need to know what natural disasters are typical for their region, tips for safeguarding their loved ones, access to local resources and what tools they should have on hand for emergencies.
Survivor User - The Survivor User is the user who finds themselves in the midst of a natural disaster. This user needs access to news, local resources and emergency services.
We defined the primary use-case for the app as a Hero User wanting to reach out to their charity of choice using a collaborative storyboarding exercise. We explored the following scenario:
“A Hero wants to help the typhoon relief effort by sending funds to the charity of their choice.”
Rapid Iterative Testing and Evaluation (RITE)
Afterwards, we began translating this scenario into wireframes. Rough wireframes were sketched out on sticky notes that were about the size of a mobile phone screen. This approach aided us in quickly iterating on a variety of concepts. As we shared the low-fidelity prototype, we reacted quickly to feedback by simply replacing “screens” with a new sticky note to represent an enhancement. We tested multiple versions of the homepage before arriving at a map-based layout.
Once we had a solid sticky note prototype, I translated them into high fidelity mockups. At the end of three weeks, we had a taken our primary use-case and explored it through storyboards, wireframes and final design of a primary workflow for making donations.
Be a Hero is featured in the first chapter of The $1 Prototype: A Modern Approach to Mobile UX Design and Rapid Innovation for Material Design, iOS8, and RWD by Greg Nudelman. The purpose of this design was to create an app using the techniques learned in the Mobile UX/UI Design Intensive course.
San Francisco State University (2013)
UX Team: Frances Liddell-Rodriguez, Deepti Mande, Katherine Sawyer
Instructor: Greg Nudelman