What is iContribute
iContribute is a mobile app that makes it easy to find, manage, and connect to volunteer opportunities for both students and organizations. Students can find volunteer opportunities of their interests within their local communities and at the same time, organizations can post available positions on the platform to reach more volunteers.
Disclaimer: This is one of the many projects I did during my tenure with iContribute
Project Overview
Problem
Currently, users can find and apply volunteer opportunities but aren’t able to see their past volunteer work or the total number of hours they have already volunteered.
Solution
Offer an option for users to see their total number of volunteered hours and events, along with the ability to view and email volunteer history.
Project Details:
Duration: 14 days / 2 Sprint weeks
Team: 2 designers
My role: Competitive Research, Low-Fidelity Wireframes, High-Fidelity Mockups & Prototype
Tools: Pen & Paper, Figma
Deliverable: High-Fidelity Interactive Prototype
Research
Competitive Analysis
We conducted competitive research of few other companies that had similar apps helping volunteers find and manage opportunities. Below are the main findings of our competitive research.
All the competitors visually showed total number of volunteered hours and events. (Point even included total monetary impact made by the volunteers).
Visual indicators stating total numbers of hours were not only included on the “Volunteer history page” but were also on user’s profile page.
The app “Golden” included the option to download/share information.
On the basis of our research, we decided to design an option highlighting total numbers of volunteered hours along with an option for users email the details.
User Demographics
User information provided by the product owners
Users: High school students
User Age: 16 and over
User Needs: Wants to share the details of their volunteer contributions with their current school or for applications to prospective colleges.
Ideation
Rough Sketches
Keeping the competitive research and user needs in mind, I started making rough sketches. On the user’s profile page, I incorporated the total number of volunteer events and hours completed along with an option to view volunteer history on the user’s profile page.
For volunteer history page, I created two design options and discussed the viability of both with the other designer.
Upon discussion with the other designer and product owners, we decided to go with the second design as it enabled the users to select and email the details of all or any specific volunteer events. Though, we decided to incorporate the total events and hours completed from design 1 as we believed that it would be a good re-enforcement for users see their contributions and will act as a future motivation.
Mid-Fidelity Wireframes
Mid-Fidelity Wireframes for User’s Profile Page and Volunteer History Page.
In the final design, the user can select all or any volunteer event by checking the box. The tiles of selected volunteer events would instantly changes their background to depict their active state. As soon as the user select one event, the option to clear the selection or email it will pop up at the bottom.
Solution
High-Fidelity Mockups
High-Fidelity Prototype
Challenges:
While designing the email flow for selected events, my co-designer and I wanted to provide an attached PDF mentioning all the volunteering details. It would have made forwarding it ahead or submitting it to a college application very convenient and simple for the users. But due to some constraints we couldn’t do it in phase 1 of Volunteer History Page implementation. So, for now we had to come up with an easier and quicker solution to make sharing possible.
Key Takeaways:
From my experience working on this project, I learned the importance of rough sketches. Sketching out the idea really helped the team (designers and product owners) to understand the architecture of the design along with a fluid connection between all the screen. It was fairly easy to create wireframes and prototypes once we had our ideas and vision on the paper.