UX/UI Design
Volunteer Connect is a platform that easily and quickly connects volunteers to volunteering opportunities, for causes that align with their personal values and interests.
This was a 10 week project that included market research, interviews, experience mapping, sketching, wireframing, user testing and creating high fidelity designs.

My roleUX & UI
Project partner: Lisa Roux 

Tools used:
Sketch (High Fidelity Wireframing + UI)
InVision (High Fidelity Prototype)
Moqups (Initial Wireframing)
Survey Monkey (Online surveys)
Voice recorder (In person interviews)
Paper + Pencil (Sketching)
“How might we”: make it easier for people to find volunteering opportunities that align with their interests?
Interviews
We conducted interviews and sent out an online questionnaire to gather data and insight into how some people currently go about finding volunteer opportunities, and their experience of that process.

Some of the questions we asked were:

Have you ever done volunteering? If Yes, what was it for and when? If No, is there a specific reason behind it?

Why do you volunteer? What are your motivations?

How do/would you look for volunteering opportunities?

What would your ideal volunteering opportunity be? What are important aspects for you when looking for a volunteering opportunity?

Do you wish anything was different in the current process while looking for such opportunities?
                                   

Insights
Personas
Information Architecture​​​​​​​
Sketching

Once we had compiled insights and findings from our interviews, we started sketching some of our ideas and taking notes and recording our thoughts throughout the process. We realized very early on that keeping notes on our process would help us down the road in formalizing our thoughts and producing better mockups.

Through the insights, we realized the need for a platform where the volunteers could not only easily search for available opportunities in their area, but also provide feedback and their reviews of the companies they have experience with. 

This is where we decided to include a 'reviews' section on the volunteer opportunity/company page, and a way for people to connect with past volunteers at that company. We also decided to include a 'Newsfeed' tab in our global navigation, as way to provide another platform on the app where people can connect and post photos from their volunteer experiences. (We haven't explored that in much detail in the scope of this project, but the idea was to provide more connectivity amongst volunteers.) 


Wireframing

Wireframing was the point where we started to think about the design of the interface, as well as think deeper about the interactions between the screens. Taking notes while creating wireframes and the interactiong proved very helpful throughout the process.

The two stages of wireframing that we wanted to focus on was the main dashboard and the search option, since these two were the keys to our concept.



It was important for us to have a clear dashboard that displayed an editable profile, a calendar with the volunteers schedule, and opportunities they may have favourited, since that led back to our initial research of making it easy for the users to organize themselves and give them a good overview of their commitment to opportunities.





The search tab gives the user options to search for their ideal opportunities in multiple ways; through a manual search in the search bar, by selecting an option from the defined categories, or by selecting an option from the "suggestions" which are based on the individual's profile.





The 3rd main thing that we focused on was the ability to read/write reviews for different opportunities and companies. This was also an important aspect of our research, since based on our created personas, the user wanted to make sure they found the right opportunity for them that aligned with their interests.



                                   

Style Guide + Branding

Colour Palette
Typography
Logo
                                   

High Fidelity Prototype
Back to Top