Overview
I was tasked to build a volunteer-facing mobile app that encouraged users to volunteer (specifically Micro-volunteering).
What is Micro-volunteering?
According to MissionBox, Micro-volunteering is defined as:
“An easy, no-commitment, cost-free action that takes less than 30 minutes to complete. There's usually little or no formal agreement needed before a volunteer can get started, and no expectation that the volunteer will return. Micro volunteering is a great way to involve those who can't afford or aren't able to commit to something longer term.”
Challenge
How do we generate excitement for Micro-volunteering?
Create a Micro-volunteering app with a clear navigation path for users to find, review and complete micro-volunteering tasks.
- Create high-fidelity screens and a final mobile prototype
- Develop a design system that provided a clean and inviting user experience
- Create an application with incentivized micro-volunteering tasks through micro-interactions
- Develop a design system that provided a clean and inviting user experience
- Create an application with incentivized micro-volunteering tasks through micro-interactions
Persona
The app’s goal was to provide anyone the opportunity to make a difference in the world through a simple, quick, streamlined process. The app needed to be accessible to various audience types, but specifically was to target young, busy professionals between the ages of 20-35.
Wireframe Evaluation
I analyzed a set of wireframes to evaluate and develop UI components. My goal was to design a unique and dynamic interface that our demographic would be excited to use. The application would have to facilitate various micro-volunteering opportunities, be unique, relevant, and intuitive.
Approach
Competitive Analysis
Key Takeaways
The focus was on small deeds for big impact (Environmental sustainability). Sites matched volunteer skill sets with a larger database of non-profits.
What are they doing well?
Bright fun, inviting colors that enhanced a positive user experience combined with easy to use and intuitive design and user flow. Sites were relatable and inviting.
What could they improve upon?
What else could the apps provide? What was the incentive? The apps should allow users an increased multifunctional approach to volunteering.
Design Goals
How do I provide a unique or niche micro-volunteering space? What do I need to incorporate into the design process that resulted in a streamlined mobile experience facilitating micro-volunteering experiences?
Design Principles
I developed a set of Design Principles that provided the most meaningful impact on my approach. These principles would establish a specific set of standards and values for the design process.
All designs would embody these principles moving forward.
Style Tile
After completing user testing on a series of initial style tiles, I discovered users wanted a clear message, diverse and inclusive imagery (photography), clean (legible) fonts, and inviting colors. Based on this feedback, I created a final style that incorporated the “best of the best” of my style tile concepts.
Design Components
Color Palette
Icons
Photographical Elements
Typography
User Testing
The first set of hi-fi screens went through a series of usability testing. The feedback was then taken and used to iterate a second set of final hi-fi screens.
The initial goal of the application was to provide a clear message with relatable graphics and photography. The navigation should be intuitive, and the overall design should be inclusive.
Final Hi-Fi Screens
On top of updating the look and feel of the application, I also added a profile section and the ability to connect socially with other volunteers.
The instruction component was confusing to our initial testers, so it was revised to improve user flow.
I reworked the mapping component to provide additional information about the type of volunteer options available within each category. The screens below allow a user to begin a micro-volunteering task.
The location is identified using the mapping function, from there they search tasks (In this case wheelchair accessibility). Following the instruction, they can mark the task as complete in the final screens below.
