I Volunteer
Connecting individuals with safe, educational, and ethical volunteer programs abroad.
Background
Volunteering abroad demands thorough planning and research from prospective volunteers. Committing to travel and work in a foreign country is a significant undertaking, requiring individuals to ensure their participation aligns with a safe and ethically conducted program.
Typically, developing countries are the primary destinations for volunteers seeking international programs (Vandenberg, 2020). These locations host numerous charitable organizations with long-term volunteer programs and exciting programs. Many individuals, particularly from first-world countries, believe they can make a substantial impact by dedicating their time to these countries.
Despite the altruistic intentions associated with volunteering abroad, there's a potential for unintended harm. Volunteer programs often come with associated costs, requiring upfront fees covering room and board. While ethical organizations utilize these fees appropriately, some view volunteer programs as for-profit programs. This can result in programs that are unsafe, unethical, and harmful.
It's worth noting that 53% of individuals who volunteer abroad are female (Lough, 2006), predominantly falling within the 15-24 age group (Lough, 2006). Given the young demographic involved in this industry, it is essential to establish systems that connect individuals with safe, ethical, and educational programs. This ensures that volunteering abroad contributes positively to both volunteers and the communities they aim to support.
of individuals who volunteer abroad are female. (Lough, 2006)
is the primary age range for international volunteers. (Lough, 2006)
Individuals enrolling in volunteer programs abroad may find themselves in situations that are both unethical and unsafe, often falling short of the expectations initially established during registration.
The Problem at Hand
A trustworthy platform for individuals to research and sign up for international volunteer programs.
The Solution
After identifying the stakeholders affected by the shortcomings in the research and registration process for volunteer programs abroad, I began to explore potential solutions. To begin this journey, I revisited my user interviews to grasp what elements were lacking in the current experience. Here are some insights gathered from the feedback received during these interviews -
User Story
As the primary UX/UI designer, your role involves conducting thorough research, ideation, design, and testing phases to create an optimal user experience and interface.
My Role
As the primary UX/UI designer, your role involves conducting thorough research, ideation, design, and testing phases to create an optimal user experience and interface.
After conducting interviews I synthesized data using affinity and empathy mapping. The topics of safety, the impact of one's work and information reliability came up consistently throughout my user interviews which led to three main insights -
Based on my user interviews and data synthesis, I reflected on who this application should be created for. Based on my findings, I created 2 primary personas, The Volunteer and The Program Coordinator.
Sketches
After creating my user story I went ahead and created sketches of what my red routes would look like. Below are sketches for my primary red route, searching for a volunteer program. These sketches are the beginning of bringing my idea to life and I conducted my first round of testing to gain user feedback.
After I conducted Guerrilla Testing to gain initial feedback on what was and was not working in my design.
Search Bar Placement
The search bar will not be a banner running under the logo at the top of the page. Because of its location and size on the page, it appears to be the main search feature as opposed to the hamburger menu which is the main menu for the mobile interface. I am going to add the magnifying glass search logo as an actionable button for the search feature, located at the top right-hand side of the page. Hopefully reducing this feature’s real estate on the page will shift the user’s attention to the menu.
Notification Visibility
All the features that require notifications are located under one section of the app (the profile picture expandable menu). Instead of only displaying notifications when the user expands the menu, notifications will be displayed by a solid red circle in the top right-hand corner of the menu icon which is located on every page of the application.
Missing Functions
Currently, there is only a feature to review a program and no way of editing or deleting a past review. A feature will be added where the user can go through the same flow they went through when initially adding their review, but instead of seeing the prompt for “Review this Program”, they will be given the option to “edit” or “delete” their past review.
Wireframes
Based on the feedback I received from my Guerilla Testing, I brought my sketches to life by building out my wire frames. I wanted to create the exact blueprint of what my application would look like so that I could establish my branding and then directly apply it to what was built.
Wireflow For My Primary Red Route
Wireflow For My Primary Red Route
Visual Design Process
I started my visual design process by creating a mood board with both UI and Imagery inspiration. The UI inspiration was chosen based on designs that I want to curate for I Volunteer users. Each design displays an intuitive and aesthetically pleasing interface, and the clean and organized design also instills confidence in the user. The imagery inspiration consists of earthy colours that are calming and inspirational, two emotions I want users to experience when using the application. The photos selected evoke the feeling of wanderlust, inspiring individuals to sign up for an experience where they can be the person in the picture.
Moving on to selecting my colour palette, I kept with the colour scheme from my mood board and added accent colours that went with the primary theme but also stood out based on the elements they were assigned (such as rating scales and error messages).
The UI elements feature only colours from my colour palette, meant to be clean and uniform with the rest of the application.
Branding Comes to Life
Once I established my brand's guidelines, I applied my branding to my wireframes. Below are 4 of the application's primary screens that display the various branding elements.
Usability Testing Round #1
After applying my branding to my wireframes, I put together a prototype of the application and began user testing. I conducted my usability testing with 5 participants. I had my testees run through various tasks within the application, and speak their way through the steps of each task. I gained a lot of insight by simply observing each participant go through each task, however, I was open to feedback at the end of each usability test and gained lots of information on both the UX and UI aspects of my design. There were 3 primary takeaways from my first round of usability testing -
Critique #1 - Unclear Verbiage
One of the tasks was for the user to favourite a volunteer program. After they favourite the program, they are taken to a screen confirming that their action was successful. I wanted to give the users multiple navigation options after adding a program to their favourites list, however, the options provided caused confusion. Some users voiced that they expected to be directed back to the program listing, others suggested a third option be added, and some thought that there should be two options, but that one of the existing options should be substituted for another.
Solution
Instead of giving the user multiple options after favouriting a program, they are shown a completion notification, that once closed, takes them directly back to the listing and they can navigate to their desired screen from there.
Critique #2 - Inconsistent UI
Throughout the application, I designed the listing elements to be clickable. They consist of a grey box, surrounding the program name, key image, country and star rating. However, on the "My Trips" page where individuals can go to rate past experiences, the UI was inconsistent. The listing itself was not clickable, but there was a button to the right of each listing that users could tap and be taken to the program information. Users initially tried clicking on the listing image as they did on previous pages and when nothing happened they expressed that it was confusing as it was inconsistent with the experience they encountered on other pages in the application.
Solution
Include the listing as they appear throughout the application as one clickable element.
Critique #3 - Unnecessary Elements
The original design for the program listing page included tabs that the user could horizontally scroll through to access different topics on the page. Users immediately began to scroll through the page using their thumb and did not use the tabs provided at the top of the page. When asked why they did not use the tabs provided at the top of the page, they replied that their automatic action was to begin scrolling on a mobile device and that the tabs were not useful in this case.
Solution
I reconfigured the top section of the listing, removing the horizontal scroll bar and adding more beneficial information for the user such as the program's location and rating.
Usability Testing Round #2
I conducted my second round of usability testing with 5 new participants. I had them run through various tasks within my application, and again, speak their way through the steps of each task. There were 3 primary takeaways from my second round of usability testing -
Critique #1 - Lack of Direction
The program's filtering mechanism lacked clear guidance for users. Each dropdown featured a multi-select menu, but as users navigated through the application, they mistakenly perceived it as a single-selection scenario and failed to utilize the multi-select option.
Solution
I added a short and clear prompt, informing users that they could select as many options as they liked in each category provided.
Critique #2 - CTA Refinement
I had CTAs throughout the application follow the same design, a button in the brand's signature green, with bold white text in the center. The feedback I received was that, although the CTA buttons were eye-catching, they did not take up enough real estate on the page, and their text was too small to read at a glance.
Solution
I elongated the CTA buttons to take up more space on the screen, which allowed me to increase the text size and become more eye-catching and legible.
Critique #3 - Reviews Page UX
One of the main goals of the application is to allow individuals to review past volunteer experiences. Users expressed that the process of getting to the reviews page was confusing. To review a program, users go to their "My Trips" page, click on "Past Trips" and select the program they want to review. They are then taken to the page displayed to the right. Users did not understand what use case would call for volunteers to contact past programs. They also mentioned that Reviewing the program should be the only CTA as that is the primary goal of allowing volunteers to view thier past trips.
Solution
The program listing was made immediately available and users are provided with one CTA on the page, "Review this Program".
Testing Summary
Throughout the 10 usability tests I conducted, each participant found the flow of each task within the application to be intuitive, with the UI helping to guide them through each task. After dedicating 6 months to this project, I became intimately familiar with it, making the external feedback particularly refreshing. This feedback allowed me to take a step back, objectively assess the functionality and design, and identify areas for improvement.
Receiving feedback from both individuals with UX experience and non-designers provided a well-rounded perspective of how I could improve the application. The constructive feedback gathered during user testing played a pivotal role in refining the application. As a result, I believe I came out of user testing with a much stronger, seamless and aesthetically pleasing product.
Addressing the Problem Statement
"How might we enable volunteers to be matched with safe, ethical and educational volunteer programs abroad?"
Creating a one-stop shop for sourcing volunteer programs
Providing filtered searches to streamline the research process
Crowdsourcing reviews and featuring authentic feedback
Creating a network of like-minded individuals
I Volunteer Prototype
Please check out the most recent iteration of the I Volunteer application.
Final Reflection
Working through this project, I encountered significant learnings that provided insights into navigating the design process and understanding my role as a designer. Some of the key takeaways and learning opportunities include:
Seek feedback throughout the design process
I should not wait until user testing sessions to get feedback on my design. I need to ask for critiques and advice throughout the process to make the best use of my time. In the future, I should not take the time to “perfect” designs before conducting my next round of testing. Striving for perfection is not realistic, especially if I not conducting testing in the meantime.
Compare UX against simmilar platforms
As it has been conveyed to me many times, it is not my role to reinvent the wheel of design. There are elements in applications similar to mine that I should have turned to for inspiration. I will never set out to copy the design of another, but understanding the industry standard of certain elements will save me time in the design process in the future.
Better articulate my design choices
For upcoming projects, I would like to be able to confidently justify my design choices. I have a rationale for each aspect of my design and I would like to be comfortable having a dialogue with users when they critique my work.
Ultimately, I am proud of I Volunteer, and I believe I've designed an application that can effectively assist individuals in discovering safe, ethical, and educational volunteer programs abroad.
Sources
Lough, B. (2006). International Volunteerism in the United States, 2005. Retrieved from https://openscholarship.wust.edu/cgi/viewcontent.cgi?article=1823&context=csd_research
Vandenberg, S. (2020) Best Volunteer Abroad Programs, Organizations, & Projects. Retrieved from Volunteer Forever website: https://www.volunteerforever.com/article_post/best-volunteer-abroad-programs-organizations-projects/
User Research
User Feedback
Personas
Exploring the Problem
Despite the availability of numerous platforms for individuals seeking international travel programs, the research and registration process lacks streamlining. The overwhelming and often unreliable information that individuals must sift through independently when researching and registering for volunteer programs abroad indicates that the current system connecting individuals to these programs is inadequate. This inadequacy poses a disadvantage to both volunteers and the organizations that rely on their support.
How might we enable volunteers to be matched with safe, ethical, and educational volunteer programs abroad?
Exploring a Solution
Taking into account the pain points in the current research and registration process, I crafted the user story for my red route. The presented MVP reflects my vision for the application's foundational elements — simplicity and intuitiveness. The goal is to provide users with accurate and relevant information in as few steps as possible.
Advanced functionalities like volunteer reviews, messaging, rating, and favouriting programs are not included in the MVP as the focus is on establishing a strong foundation for the application.