Buddy System
The objective of this case study was to develop a website for the nonprofit organization Buddy System. The main focus of this project was to streamline the volunteering process, including onboarding and finding a team.
It was the Ironhack UI/UX Bootcamp’s final project, and the prototypes were developed during a 2 week-sprint using Adobe XD, and the whole project was organized using Miro and Trello.
“We don’t want to just feed them and not look back…We want to make sure we empower them so they can help others in their own communities.” — Marketing stakeholder on interview
The client needed a website that would make it easy for new volunteers to join the community. Buddy System is a Florida-based nonprofit organization in Miami-Dade county. They were founded in response to COVID and after only 6 months they had over 800 volunteers in their network.
The website would have to be able to:
- Show the volunteers benefits of joining
- Legal information
- Guide them through the onboarding process
Discover Stage
The discover stage tends to be the longest portion of the project, and it usually continues through the whole process. I am constantly comparing my research data to data from users, and iterating the process according to both resources.
After filling the Lean UX Canvas with my assumptions and hypothesis, I did research on the market of nonprofits. This way I could create new hypotheses based on research data.
This part of the research is broader, I started looking for:
- Non-profit trends: A general overview of budget cuts, cybersecurity issues, changes in charitable giving, natural disasters, donors and sponsors, crowdfunding and volunteering — Statista 2020
- Biggest challenges of nonprofits in the US and Canada in 2019: Small/transitioning staff; donor cultivation, acquisition, retention, and communications; economy's national mood; tax laws, leadership issues, mission/purpose, ending or starting a campaign, strategic plan, etc. — Statista 2020
- Volunteer matching systems — volunteermatch.org
- Number of nonprofits in the US: 1.54 million in 2016 — Statista 2020
- Expenses of reporting nonprofit in the US: 2.48 trillion dollars in 2016 — Statista 2020
- Miami/Dade County household and income demographics — miamidadematters.org
- Food waste in America: Context and repercussions
- Average hours of volunteer work in the US: 137 hours/volunteer in 2017 — Statista 2020
- Number of volunteers in the US in 2017: 64.4 million — Statista 2020
- Reasons why people volunteer
There were 3 different segments to pay attention to:
- Non-profit organizations — structure, impact, and organization
- Volunteering — onboarding, managing, and keeping volunteers
- Food Waste — the consequences and how it looks like in Miami/Dade County
After understanding more about the market, I did some research on the "competitors" (other nonprofits fighting food waste and food deserts), to understand what they were doing right, and what could they improve.
Most of the competitors have been in the market longer than Buddy System, and display more maturity on their website content and branding. In order to choose which features to compare, I started analyzing Buddy System's website, as well as their social media (Instagram, WhatsApp group, and Facebook).
Here is what I found:
There was a lot of information on the website, with large texts, centralized paragraphs, and little typographical or structural hierarchy.
Most of the important content was there, but they made the volunteering and donating jobs harder for the user: The journey to reach the main features like donations or volunteering seemed bigger than I hypothesized it should be.
With a look into both Buddy System and competitors' websites, I came up with a competitive market analysis and a competitive feature analysis.
Analysis of 14 websites with descriptions, most common, common, and uncommon features, win/loose aspects, and important remarks. At this point, I didn’t focus on choosing the features, but how they related to the solutions the competitors were offering.
For this board, I reduced the number of competitors to 6, focusing only on the ones who offered a very similar strategy in their fight to end food insecurity.
Though some of the competitors had more complete websites with some important features, I had yet to discover what was relevant both to volunteers and Buddy System.
After comparing features, I developed a SWOT analysis to compare strengths, weaknesses, opportunities, and threats surrounding Buddy System, and based on that I structured a market positioning chart.
This is one of my favorite tools. The market positioning chart helps me picture the market scenario as it is, and visualize where I would like the company to be.
The blue ocean strategy is a tool that shows uncontested market spaces "ripe for growth".
INTERVIEWS
Stakeholder interviews help me see what they see, know more about their expertise, and compare their assumptions of what the user wants and need to what the users actually think and feel. User interviews allow me to get qualitative data, observe user’s spoken and unspoken answers, and put myself in their shoes.
- Stakeholders: I interviewed 4 stakeholders, and was able to examine their assumptions on what volunteers wanted, to what they wanted from volunteers in return. This gave me insights on what their own roles and objectives were, and I was able to map the duties the organization required.
Here are some phrases from each interviewee:
“We are completely volunteer-run” — Stakeholder
“Steady volunteers have bigger responsibilities”- Stakeholder
“The System is working on-its-own for now” — Stakeholder
“I wanted to engage with the community as much as possible”- Stakeholder
“I want to help build leaders”- Stakeholder
“It would be awesome to have an electrician to set up the fridges. Our own electrician.”- Stakeholder
- Volunteers: When interviewing the volunteers, we had already performed the survey, and had an idea of what questions to ask. I was able to compare some of their answers to the stakeholders, and noticed that:
Stakeholders were overwhelmed with the amount of work on their hands. They expressed that they needed more organization and that most of them were learning on the process, without planning.
On the other hand here is an excerpt from a volunteer interview:
“They are amazing, so organized… I don’t think there is much to do, but I am always asking to know if there are small tasks here and there.”
“They know what they are doing. I love to help, I just wanted someone to tell me what to do and I would love to do it. Sometimes I feel a little bit lost.”
This contrast was very revealing and indicated to me an opportunity to redistribute and reorganize roles, making sure volunteers’ efforts would maximize efficiency, and skills were utilized appropriately.
SURVEY
Surveys are an excellent way to validate or invalidate my initial assumptions and expand my knowledge on the user’s pains, needs, and motivations.
The survey was distributed amongst more than 800 users through the organization’s WhatsApp and answered by 14 of them. This strengthened the hypothesis that though they had an impressive number of new volunteers in a small amount of time, there was very little engagement and responsiveness.
- Community: Over 78% of the users answered that being part, or bringing back to the community were their main motivators to volunteer.
- People: 57.1% of them said their main reason to volunteer was to find and meet people with similar interests and ethics.
- Guidance: When asked how could the organization improve volunteer engagement, half of the respondents asked about the need for guidance and directions on how to help.
- Instagram: While the channel through which new volunteers discovered the organization varied greatly, the most common channel they reached Buddy System through was Instagram.
- No onboarding: Almost 80% of the volunteers did not receive onboarding training or were told about the organization’s policies, code of ethics, or best practices.
Define Stage
When it comes to the define stage, it’s time to distill my top insights and takeaways and organize them with Affinity Mapping, which I separated into Propellers, Deterrers (communication, structure, and market), What the Company Wants, Who Are the Students, and What the Students Want (collaboration, structure, and organization).
After that, I used the Value Proposition Canvas (user side) to be able to put myself in the user’s shoes. Instead of creating a primary persona first, my Personas was created based on the insights I got from those tools:
I then started creating my personas based on the previous tools, which derived their data from research on the previous stage.
Primary Persona: College Candance
Secondary Persona: Harold The Helper
By understanding more about the user’s goals, motivations and frustrations, I drew down IBM’s As-Is Scenario Map, which feels like a perfect tool to use before Journey Mapping. As-Is helps me define the most important pieces first and then organize them visually to get the most of Journey Maps.
With the Journey Map in hands and the user journey laid out. I came up with Problem Statements based on the lowest points on the map.
Develop Stage
Based on the Problem Statements, I started Brainstorming and pulled out some of my cohort classmates and web developers to help me with this. Here are the results from my Miro board:
From the Problem Statements and Ideation (brainstorming), I used the Moscow Method to separate the ideas into "Must have", "Should have", "Could have", and "Won't have"
From that, it's easier to separate the "Must have" ideas into another one of my favorite tools, the Impact vs Effort chart. Once more, I pulled a web developer friend, who helped me devise which ideas would be easiest to implement and which ones would take more investment to deploy.
The second side (business side) of the Value Proposition Canvas helped me see how could my solutions could create Gains and relieve Pains, based on the user side.
Finally, based on the Problem Statement showed before, I asked myself
“How might we help the volunteers know who Buddy System is, and have them offer the kind of help Buddy System needs?”
and by framing the problem with the How Might We, I could write down the project MVP (Minimum Viable Product).
The last step of this stage was the Jobs To Be Done, which focuses on stating what jobs does this solution I’m developing must be done for the user.
Deliver Stage
The deliver stage is when I use all data collected and distilled in the previous steps, and apply it to prototypes in order to test it with users. With that I can make any needed changes as fast as possible, saving the organization's money and making sure we are not deploying something that users don't want or need.
USER FLOW
The user flows were based on the findings from previous tools like the As-Is scenario, journey map, and requisites from Ironhack’s challenge.
ONBOARDING: Candance entered the website and went through the home page. She then clicked the volunteer link to know more about the volunteering process and the organization’s culture. After reading through the volunteer’s page, she decided to join the community and filled out a form with basic information and her time availability.
When Candance submitted the form, she was taken to an onboarding process, in which she choose up to 5 soft skills and as many hard skills as she had. The next step was reading and signing the code of conduct and the policies documents, then to join a team based on her skills and available time.
Finally, after being given access to her team information, she received the links to the community channels and became a Buddy System volunteer and member.
LOW-FIDELITY PROTOTYPE
Low-fidelity prototypes help me structure my ideas first, thinking about the general composition instead of the visual details or written content. It makes it easier to get rid of assumptions with users very quickly and saves the project time and money at the same time.
This first prototype helped me devise the overall architecture of the website. It helped me see which sections were critically important and troubleshoot some semantics. The majority of the data gathered from this step was qualitative.
I found out that the onboarding process was still too long and there were too many options to select on the “Skills” screen. I also added more pages and decluttered the homepage.
MEDIUM-FIDELITY PROTOTYPE
The mid-fidelity prototype or wireframe helps me create both visual and content hierarchy. This way I can think about prioritizing features and create guidelines for the information without delving too deep into User Interface (UI).
Through the wireframes I uncovered two important issues:
- The onboarding had to be on different screens and offer fewer steps for the user to choose from — I removed the “Mission, Vision, and Commitment” steps and the number of documents to go through on the “Documents” step.
- The form had to include information on availability so the team pairing would be more accurate
INTERFACE
Before going to the high-fidelity prototype, I make sure to know what the competitors are doing, what message they are passing, and which message does this project/company want to convey. Visual competitive-analysis and mood boards make it possible to test and make informed decisions on the project interface, by tracing every step back to the brand’s attributes.
After the mid-fi prototype, I went onto visual competitive analysis and brought elements of our biggest “competitors’‘ websites (GOODR, Restaurant Opportunities Centers United, Feeding America, and World Central Kitchen). Read more in the complete case study.
The Brand Attributes were given to us by the organization, and I created a mood board based on them, taking into consideration a possible visual rebrand using some of the old elements. After that, I was then able to craft an identity that took all those aspects into consideration and respected the client’s wishes; “keep the blues and don’t change the logo too much”.
Brand Attributes:
- Down-to-earth
- Community
- Social Justice
- Supportive
- Friendly
HIGH-FIDELITY PROTOTYPE
The high-fidelity prototype is the part of the project that simulates the true product or system. By this point, I already tested content and organization with my users, and I can let them focus on the user interface and the visuals.
The high-fidelity prototype was developed using photography from Pexels and from Buddy System’s former website. I also designed visual documentation of icons, buttons, menus, images, etc., using the Atomic Design System as a reference.
SUCCESS AND FAILURE METRICS
There is no design if the project isn’t deployed. Because this is a data-driven process, it’s very important for me to take into account the results and consequences. The project does not finish after the high-fidelity prototype; iteration and refinement after launch are also part of the process.
- Volunteer experience satisfaction surveys
- Unique volunteers and more service hours
- Increased percent attendance on online meetings
- Monthly volunteer retention rate
- Volunteer conversion, selection rate, and training costs
- Number of virtual interactions held monthly
- Photo collection and reports by volunteers and volunteer managers
- Number of successful campaigns reported by volunteer cell
NEXT STEPS
These are either suggestions or things that I would like to approach after the delivery of this part of the project. Iteration is part of the user experience and grows along with users’ needs.
- Generate high-quality visual content for the website
- Elaborate volunteer cell composition parameters (which skills should be combined, who will manage the cells, etc)
- Conduct a survey on volunteer availability and engagement now
- Build the rest of the website
- Work on the responsiveness for mobile website version
- Make the website live
Thank you for reading.
