charity: water

The Problem

One of the best things I have done for my personal growth was volunteering at a nonprofit. I have learned so much from it. I feel like it has made me a better person. I wanted to solve a problem space for my favorite nonprofit charity: water. Since charity: water is global nonprofit funding thousands of water projects and serving millions of people with many donors and volunteers. I came across a design challenge where the scope was to create a responsive site that can view this kind of data at a glance while sending a thank you note to their donors.

Since I have two years' worth of experience in designing and maintaining dashboards, I figured building a responsive dashboard for charity: water was in my wheelhouse.

The Solution

I built a responsive dashboard that can view water projects, donors, and donations while having the capability of sending a thank you note to donors using research and one on one meetings with a charity: water representative.

The Obstacles

I couldn't rely on the internet. I knew nothing of nonprofits. This forced me to understand a domain from the ground up. I had to rely on people and chat one on one with them to understand the domain, goals, and pain points. Because nonprofits is a niche domain, I had a small pool of people to work with. So how exactly did I manage? Keep reading for more.

Understanding the Domain

The nonprofit sector is a new space for me. I knew that I needed to cover all of my bases when it comes to secondary research. I volunteer for a nonprofit, so I knew that was a good starting point to ask people how they manage their data and understand their overall operations. I spoke with four representatives from different nonprofits (including one from charity: water) to help me understand the space, how they operate, and what tools they use to track their donations and volunteers.

Speaking with Subject Matter Experts & Representative from charity: water

In order to understand how nonprofits operate, I needed to ask the right people how this specific industry works and what data management tools are used.

Here are the key insights from the SME interviews:

• Finances: Success is dependent on being fully transparent with where money is dedicated (administrative costs and the actual charity donations) with publicly available documentation to prove it.
• Branding: Success is also dependent on the visual appeal and branding of the charity. There are hundreds of charitable organizations, creating a minimalistic brand identity that is also recognizable helps you stand out among donors of all ages.
• Flow: A beautiful and simple way to navigate through a website to donate also plays a large success in a charity's longevity while keeping it consistent with the brand's identity.
• Transparency: Being transparent with your business model from the get-go is imperative. For example, the 100% business model (a business model where 100% of donations go to the cause) has its downfalls (private donors covering the administrative cause can potentially sway where a charity puts money in their projects), but if a charitable organization is transparent with their business while mastering the art of visual rhetoric such as minimal design, feel-good stories, brand identity, "standout" branding, displaying abstract ways of a design into real life (for example, charity: water's brand is a yellow water jug, they also display this in real life photos) then you are almost guaranteed to continue to be a successful organization.
• Digital Donations: Subscription-based services have been on the rise, and charitable organizations have implemented this so they can let donors feel like they are constantly feeling like they are part of the feel-good story.
• Culture and integrity: To keep a charitable organization honest and healthy, the administrative side that drives the organization is also imperative. The staff needs to stay healthy within for long-term success and help drive the vision of the organization. When you have a group of noble and passionate staff, you make it difficult for other charitable organizations to compete with you for donor dollars.

‍

Since a majority of nonprofits use spreadsheet-like software (no dashboard available) to track internal information, business intelligence dashboards (requiring an application to be installed), and CRM tools  (also requiring an actual application to be installed with heavier setup) I went ahead and compared a few of these tracking based products.

My competitive analyses findings include:

• Spreadsheets: None of the spreadsheet products can transform data into dynamic actionable insights.

• CRM Tools: Some nonprofits use CRM tools (a relational database in which you can store data) and can create dashboards from that specific tool, but you are limited within the product's framework.

• Dashboards: Dashboard products (like Tableau and PowerBI) require an application to be installed to access and view analytics.

The results motivated me to:

• Focus on using interviews to learn about key insights they want to see at a glance.
• Use the interviews to help drive the design and architecture of a web-based dashboard.
• Build an internal responsive web-based dashboard that is easy and quick to use.

I knew I had to dig deeper on how nonprofits operate for my primary research. I wanted to learn about daily operations, goals, pain points, important insights, and sought out features. So I conducted one on one interviews with users who use data management tools for their operations. Each set of questions had a purpose, so I categorized them based on sets (Introductory, Motivation, Desirable, Sentiment, Valuable, Wrap Up)

View Research Debrief in Notion

What I found was that dashboards served the purpose to have data tell a story clearly and quickly. These stories involve any topic within the business, but for the most part, they were related to projects and the financial health of the business.

• Save Time: Users deal with heavy data on a daily basis, they like to be able to glance at visualizations to help them understand the status of the business quickly.
• Operations: Users like to see money-related and project-related insights when it comes to data visualizations.
• Clarity: Users use dashboards to look at data more clearly instead of spreadsheet software.
• Universal Understanding: Data visualizations help explain data to all users from different departments and backgrounds.

"One thing that I'm always trying to achieve is, translating data to the non-accountant person."

"Being able to consolidate data points helps us understand what's going on."

After conducting the research with subject matter experts, speaking with a charity: water representative, and completing my research interviews, I had enough data to know how nonprofits operate and what kind of dashboard I was going to design for them. Users prioritize a dashboard that is easy to use, has relevant data, and is able to go through it quickly.

After reviewing and summarizing the interview results, I created a persona and empathy map to help guide my design. After creating my persona, this guided me to create the site map and user flow.

After building my persona, I went through a number of iterations with the sitemap and user flow. I went through another set of changes after creating the mid-fidelity design as well. At the end of the day, the priority for the charity: water dashboard is to be able to look at relevant data (donors and donations) at a glance.

The user flow illustrates the path an internal employee from charity: water can take when quickly looking for donors.

Designing Data That Matters

After sorting out my sitemap and user flow, it was easier to create the dashboard for charity: water. I was able to figure out Low-Fi wireframes, Mid-Fi wireframes, UI kit, and Hi-Fi wireframes.

Digital Sketches

I wanted to have alternatives when choosing a design for the dashboard based on general research and the architecture analyzed since most dashboards are accessed through desktops. Drawing digital sketches helped me explore a variety of ways how I can display certain dashboards while making them modular and scalable enough for mobile (responsive).

After selecting one of my alternatives, I created a mid-fidelity design. The wireframes included a Dashboard Page (general data insights) and a Donations Page (general insights, list of donors with a donation, and option to send a thank you note).

I was able to find the brand design guideline on charity: water website. I created a mini style guide for me to follow while creating the high-fidelity design for the dashboard in connection with the UI Kit I created.

I had to keep in mind that I was working within a very important constraint. I had to keep that dashboard aligned with charity water's design guidelines. This was one of the most challenging dashboards I have ever created. In the past, I had more freedom in developing and designing a dashboard. In this particular case, I had to work within a set of colors while mixing and matching to find the right balance of being within charity: water design constraints and keeping it visually appealing. I also had to use the same vocabulary charity: water users. For example, charity: water has specific categories for donors:

• The Spring: Public donors.
• The Well: Private donors.
• Campaigners: Donors who set up a fundraiser.

Below is the first version of my design, after some testing - there were a number of changes made for the final design after the feedback was given.

Testing the Details

A remote usability testing was conducted using a high-fidelity prototype design on Figma. The reason for this test was to examine the flow of design, ease of navigation, and the extent to which design reflects the values of the brand. This test also tries to view and understand users' pain points, goals, and recommendations. The test was conducted with five participants via remote video calls. The Otter AI application was used to transcribe the dialogue live to pick out keywords used to analyze and compare with other participants.

The goals for the usability testing:

• To test the end-to-end flow of the design and ease of navigation.
• To see if the overall look of the website reflects the brand's values.
• To validate if the design solves the user's needs and pain points that were captured during the research phase.
• To observe any areas of setbacks, questions, confusion, hesitation, or difficulty for the user.

View Usability Test Planning in Notion

Usability Testing Summary

The usability testing and the prototype were a success. Overall, the participants were able to complete the tasks in a timely manner and enjoyed the flow of the site, design, and navigation.

View Usability Test Findings in Notion

"It's good at showing information, and the sort of CRM capabilities of sending a thank you note are relatively simple."

"Overall it's pretty solid. I really like certain aspects like the multi-select capabilities and the Thank-You Note."‍

With the feedback provided, I made the necessary changes for for the second version of the dashboard with an updated prototype. Below is also the process to thank a donor after the priority revisions were completed.

Sometimes things do not go as planned. There are days when technical difficulties can arise, such as data not being able to load on the backend. This edge case was considered to let users know that this would need to be fixed within the same cards of the dashboard.

A Time to Reflect

I took the time to reflect on what it entailed to create and design a dashboard from scratch.

My Biggest Challenges

There were a few challenges I had to truck my way through while designing the dashboard for charity: water:

• Researching: I couldn't rely on the internet this time. Even though I volunteer at a nonprofit, I still did not know how they operated at all. This forced me to look for people to chat one on one with to understand the business, their goals, and pain points. I heavily relied on people this time, the subject matter experts.
• Niche: Continuing on the above, this project had a very tight and intensive deadline. In my previous design project (Hoken Insurance), it was easy for me to find information about insurance and it was easy to find people to do one on ones with because insurance is so common in North America. Since nonprofits and dashboards are niche/specific, I had a very small pool of research and specific people to choose from to help drive this project. Finding people and getting the right research took time.

What I Learned

I learned that there are many variables when designing a dashboard. If you are able to identify commonalities and focus on striking a balance between delivering human-centered and business-centered insights, users from all departments can understand and digest data.

• Never Under Estimate: This is exactly what I did. Since I had experience in creating and maintaining dashboards, I thought designing this dashboard would be easy. I was wrong. This was the hardest dashboard and most time-consuming dashboard I have ever done. The research, the optics, and understanding the business so I can then design the dashboard using everything I have learned was my biggest challenge and biggest personal development towards learning how to design a niche product.
• System Oriented: I learned how important it is to be system-oriented. I created a flow and template on how I wanted to approach this project (Figma flow for design and Notion flow for synthesis). In my opinion, you can't be goal-oriented if you are not system-oriented. Having a personal system in place helps you achieve goals and time-sensitive tasks.

Next Steps

With that being said, the next steps of this design process would be:

• Contact charity: water: Since a representative from charity: water gave their insight on what they would look for with this dashboard, I would send the design to them for feedback.
• Test Priority Revisions: Conduct another usability testing to see if the revisions improved the overall experience.
• Iterate & Test: If necessary, iterate and testing to be conducted for other potential improvements.
• Developer Handoff: Export projects and assets to developers to deploy.