Copy of Copy of Untitled Design (8).png

Role:UX/UI Designer

Platform: Desktop

Link: Prototype

Miami based Buddy System is a grassroots non-profit founded in response to COVID-19.
What began as an effort to support neighbors with access to food assistance during the pandemic quickly grew into a massive mutual aid program.

The Objective

Buddy System's goal is to empower neighbors to support their neighbors. They need a responsive website with an explicit mission to reach out to as many people who can help and get involved.

I asked myself how to assist Buddy System in gaining more donations and helping them grow together with the community they unconditionally serve every day and with limited resources?

My Role

Research, UX/UI & Strategy, usability testing.

Working and being part of nonprofit organizations in the past, I know how important it is to get and hold donations. Also, how difficult it is to send messages to potential donors and keep donations coming.

Tools

  • Adobe XD

  • Figma

  • InVision

  • Photoshop

  • Miro

  • Maze

  • Trello

Using the Double Diamond design thinking process helped me go through all phases and create a feasible solution to help Buddy System:

Discover

Define

Develop

Deliver

Secondary Research

Have you ever wonder why people donate?

  • They are mission-driven

  • Particular organization or subject matter caught their interest

  • Want to be a part of something noble.

But have you ever consider why people stop donating? There is only one simple answer:

 

They don't know how their gift is being used!

In critical times we live in, it is 2020; after all, promising news is coming. Many Americans who do have a habit of giving to charity are still making donations. In some cases, they're donating even more. Hunger relief has seen the most charitable giving.

Business&Customers

In a short period, just eight months, the Buddy System managed to help individuals with the food delivery and established and create a “Community fridges” concept, where refrigerators are located in a public space that enables food to be shared amongst the community.

To understand the current Buddy System position, I consider business problems and outcomes and user and their benefits. Sorting them in Lean UX canvas gave perspective and opened questions.

Lean UX Canvas

Lean UX Canvas

Discover

Apps on the Market

The competitive analysis will identify Buddy System competitors. Evaluating their strategies and features, determining strengths and weaknesses will help my brand define a competitive plan.

After research, I found a well-established nonprofit organization that shares similar characteristics and goals with Buddy System.

Many of the competitors have been working and serving the community longer than Buddy System, and their websites have complete websites and features Buddy System is missing.

Competitive Feature Analysis

Competitive Feature Analysis

Besides the apparent necessity for improvement, I noticed a couple of possibilities Buddy System could implement, especially regarding Donations - offering different options and ideas on how to donate.

Based in Miami, with a large South American community that speaks Spanish, I found it necessary to have the language selection, besides Spanish also Creole.

Market Positioning Chart

Market Positioning Chart

Interviews & Surveys

Still, in the Discover phase, I shared a survey on my social network and conduct six interviews including stakeholders.

I gathered 45 responses from the survey, but the real value came from interviews where I was more specific with questions.

Quantitative Data

Quantitative Data

“I don’t have time to volunteer. I do give charities money and find it very important to know how my donation will be used. If I could make my donations in a place close to my local grocery store, it would engage me to participate more.” —

Ivana Z.

“Unicef, Red Cross, I donate to them! I want more information and engagement from charities where I donate, at least via social media.” — Aleksandar P. 

"I organized fundraise at work for different purposes, mostly dedicated to children. The entire company participated. I wish I have time to volunteer but, donate via SMS or collecting goods is how I participate in the community.” — Kata K.


I decided to ask people I am proud to call my friends and who dedicated their lives to protect others via nonprofit organizations in Serbia.

I found that talking to them can help in my research and provide valuable advice to young Nonprofit organization.

Jelena Hrnjak, one of CEO-s in Atina, the association for combating trafficking in human beings and all forms of gender, established in Belgrade, was very supportive and provided advice for a young nonprofit.

“Nonprofit organization needs to have mission and narrative, to keep the spirit! Donors need to be informed about their donations and organization work, progress and achievements”—

Jelena Hrnjak, Atina.org.rs


Svetlana Vlahovic is a pioneer in Serbia and the Balkans. She is known for her accomplishments and help for the intellectually disabled community in the region. She shared her experience:

Short and measurable goals are crucial to success! Connect with small businesses around you, talk to volunteers about their connections and affinities. Define your donor and monthly goals! Get your know your community, introduce them with projects on the website and social media! And show results! —

Svetlana Vlahovic, Association for Help and Education

Define

Affinity Map

I synthesized my user interview and business findings by transcribing my notes and creating an Affinity map. I organized my notes and gleaned insights by grouping statements and identifying the patterns and trends that emerged.

Affinity Map

Affinity Map

User Persona

Based on my research, Alex represents the different types of users who might engage themselves and donate to Buddy System. Creating a User Persona Helps me understand the user's mental model - needs, experiences, behavior, and goal.

User Persona

User Persona

Journey Map - Donation Current State

To better understand how the user will navigate once they land on the Buddy System website, I asked my few people to help me with the task. I needed quick feedback from them. 

To conduct Cognitive Walkthrough with my users, I define:

  1. User Goal - Make a donation.

  2. Tasks - go on website, explore, donate, create profile.

  3. I recorded their toughs while completing the tasks.

Buddy System Current Homepage

Buddy System Current Homepage

Cognitive Walkthrough - Journey Map

Cognitive Walkthrough - Journey Map

Discoveries: 

  1. When we type Buddy System, their Facebook page is the first thing that pops up.

  2. The user didn’t quite understand the Buddy System mission.

  3. The most significant confusion was the DONATE button. It is not visible!

  4. Since the message was not clear, the user wanted to talk to someone and look for a chat.

  5. He wanders. Is there any way he can fundraise? Collect money, food, get a fridge?

  6. The user wanted to know the impact of his donation?

Develop

Ideation&MoSCoW Method

After brainstorming together, and another meeting with stakeholders, I was able to prioritize the following features that i found necessary. From visible and repetitive “Donate” button on front page, and clear info page

Moscow Method

Moscow Method

Problem Meets Solution

The Minimum Viable Product

Buddy System website will keep donors engaged whit a clear mission and narrative, projects, showing the impact of their donations.

All that will we support the following features:

  • Donating options — from donating food, clothing, or any goods, to possibilities for organizing fundraising or donate via a different type of activity

  • The page dedicated to donors with goals and transparent documentation

  • Language selection

  • Chat


Jobs To be Done

When User visits Buddy System website, they want to connect to their mission, goals, and values, so they feel empowered and encouraged to make a donation, which will give them a sense of hope and appreciation.

Information Architecture

As a team, we analyzed and implemented each vertical we worked on in a site map. Later we refined the steps taken to achieve successful results.

User Flow

User Flow

Site Map

Site Map

Deliver

Low-Fi Sketches

Following the information Architecture we created, I focused on sketches for the feature website. I tested it with four people in real-time. They found sketches easier to navigate and complete the task.

After usability testing, I had a few suggestions:

  • Add Billing and Personal information on one page

  • Repeat the Donate button multiple times on each page

Lo-Fi Prototype

Lo-Fi Prototype

Mid-Fi Prototypes

With positive comments and test, from Low-Fi prototype, I added few changes, to make things more simple for users.

  • Donate Button was more visible and repetitive on each page.

  • Billing and all personal info are one one page.

Mid-Fi Prototype

Mid-Fi Prototype

Usability Test

Usability Test

Visual Competitive Analysis

Before creating Hi-Fi, I went back to the feature comparison chart to analyze our competitors' visual identity.

I evaluated their essential elements, and how they engage users to make donations or get involved.

Screen Shot 2020-12-17 at 4.21.21 PM.png
Screen Shot 2020-12-17 at 4.21.09 PM.png

Brand Attributes

We talked and asked the Buddy System team to describe their organization in a couple of words. Together we created Brand Attributes that would represent the organization.

Brand Attributes

Brand Attributes

Mood Board

After exploring different nonprofit organizations, I created a mood board and conducted desirability testing to check if the aesthetic communicates the intended attributes.

Mood Board

Mood Board

Style Tiles

Style tiles provided me with a flexible and collaborative starting point to follow the brand's essence. They insisted on changing fonts and were opened to adding more colors but keep dark blue and teal.

Style Tiles

Style Tiles

Atomic Design Inventory

I created a style guide while working on the hi-fi to document the atomic elements and ensure consistency throughout the app. I did went back and forth, adjusting icons, fonts during design process.

Buddy System

Buddy System

Atomic Design

Atomic Design

High- Fi

With the visual design clearly defined, I created a high-fidelity prototype after all the research, implementing the recommendations determined from the usability testing and the design direction laid out in the style tile.

Screens 1, 2, 3: Explore Buddy System and Donate, Add Informations, Thank you note.

Screens 4, 5: Explore “How to Donate,” choose “Fundraise at work.”

Screens 6,7: Create Fundraise profile, Check Progress

Key Learnings

  • To create a space where the user needs to meet business goals, I had to understand both perspectives

  • Research is essential for any project.

  • Creating something new or different is exciting, especially from a designer's perspective, but constant testing is crucial for success.

Next Steps

Use social media for advertising website where people can donate and view future and past successful Buddy System project.

Medium Article

“Everybody can be great...because anybody can serve.”

- Martin Luther King Jr.

Previous
Previous

BeerFestival - UX/UI & WebDesign

Next
Next

App Design Hi! Hola! Ciao! Zdravo!