Designing a dashboard for the nonprofit Ceres
Case Study
The nonprofit organization needs a dashboard that allows them to view information that will help them manage their donations, volunteers, and events. They would also like to be able to search for a donor to contact them with a thank-you note and check how much money has been donated, with filters decided through user research.
Timeline
80 hours, May 2022 - June 2022
Company
Ceres
End-to-end UX/UI Designer. Research, wireframing, prototyping, visual design, user testing
My role
Tools used
Figma, Miro, Whimsical
Ceres is a nonprofit sustainability advocacy organization based in Boston, Massachusetts which seeks to advance leadership among investors, companies, and capital market influencers to drive solutions and take action on the world’s most pressing sustainability issues. They focus on advancing climate solutions, protecting global water resources, building a just and inclusive economy, and accelerating sustainable capital markets.
Research
Research methods used
I conducted secondary research and competitive analysis to better understand the features that could be expected for a donation tracking dashboard and who the target user base would be.
Individual interviews were conducted both in-person and remotely over Zoom in order to gain better insight into needs, wants, frustrations, motivations, and other observations from individuals in the nonprofit space that work or have worked with dashboards.
Sample of questions and answers
Q: What are the most important tasks you need to perform using analytics
A: Donor engagement is huge, so cultivating the existing donor base and expanding it, finding new donors, keep them interested, whether it’s a regular donation or trying to increase the donations over time
Q: How do you go about finding a donor’s contact information?
A: Yeah, I’ve met with and called donors. Sometimes I get a list and call them all up and solicit or thank them for their donations. Sometimes it’s letters, sometimes emails, social media, phone calls.
Q: In your position, have you had to have contact with donors?
A: With nonprofits, you get a lot of donations towards the holidays at the end of the year, so it’s tough to measure the status of goals. Donations tend to be cyclical so it’s important to track how we’re doing compared to the previous year. What’s typical for this time of year and what to expect in the coming seasons based on prior years.
Q: In your experience, is there anything unique to tracking donations for a nonprofit?
A: It’s a search function, could be search or I filter by the size of their last donation, the town they live in or could be by state, having to call people in Massachusetts or California. Because of my position, sometimes it’s just the big donors, $50,000 or more.
Notable insights from my research
Both participants interviewed mentioned that hitting goals and deadlines were among the most important aspects of their fundraising jobs
One participant mentioned that a major part of their job is donor engagement; done by finding new donors, keeping them interested, getting regular donations, or by trying to increase donations over time
Standard dashboard features based on competitors include: charts and visuals, donor activity feeds, goal tracking, donor analytics, donor communications (email, phone, video messages, letters), and predictive analytics and trends
With a large network of donors, potential donors, volunteers, and employees, having a search function and filters are crucial in order to save time and energy in finding specific people and groups of individuals.
Define
I took an iterative approach to this project. I gained feedback through the project that made an impact at each stage of the process.
For the information architecture stage of this dashboard, I created a user persona, some initial sketches of the dashboard, a sitemap, user flows, and low-fidelity wireframes.
Low fidelity wireframes
Design & Test
For this project, it was important for me to focus on creating a clean design that looked good. With some of my past projects, I had to design upwards of forty screens and prototype each of them. For this project, I only had to design four main screens for my user flow and, therefore, needed to make sure my design looked good and the information displayed was useable and uncluttered.
I created a functional prototype with which I conducted 3 usability tests of 3 scenarios for the dashboard’s essential flows.
Goals
Test users’ overall satisfaction with the dashboard’s usability and design
Observe pain points, difficulties, and confusion for users while completing tasks
Evaluate whether the dashboard presents enough usable information for the company to complete their tasks and if the information is presented in a usable way.
Dashboard homepage
The biggest challenge for this project was how to organize lots of information in a clear and logical way. The dashboard home needed to show the user important information at a glance. This included campaign progress, projected funding, and a way to compare funding to previous periods. It was also important that the user could sort these metrics by date, which would both help them manage donations effectively and keep the dashboard organized by reducing the number of cards on the screen.
Before and after testing
Problems based on feedback from users
The pie chart was confusing for participants. Participants said the graph would be more useful if it showed projected donations. They also said the “recurring donations” card would not be used often. And participants mentioned the need to manage and view campaign information in greater detail
Solutions to these problems
Reordered the pie chart to go from largest percentage to smallest in clockwise order to be read more logically. Changed the graph’s date range to the current year in order to show forecasted donations. Replaced the “recurring donations” card with “projected donations” for greater utility based on user feedback. And added a “campaigns” tab to the navigation which would lead to a separate campaign management page
Donor database
Another important feature of this dashboard was a database that held all of their donor’s information. Through user interviews and competitive research, I was able to determine what information was necessary for the user to have at a glance, before going into an individual user’s profile for more personal information.
Before and after testing
Problems based on feedback from users
Needed “campaigns” tab now that it is included in the homepage. The alignment in the database looked messy. Card headers were too large and the same size as page header. And % Change green color and New Donors calendar date colors needed updating to fit with the rest of the dashboard’s UI
Solutions to these problems
Included “campaigns” tab, left-aligned the database numbers, shrank the size of the card headers, and replaced the % Change green with one brighter and more fitting of positive change and the New Donors calendar dates added color to let the user know it was clickable
Donor profile
The donor’s profile needed to satisfy a number of criteria, including personal information for getting in touch, their activity history, and their personal network which could help bring in more donations. As I went through individual interviews during the research phase, I found that most donors have specific and unique reasons for donating, and therefore the users of these dashboards would need to have a way to save this information in order to satisfy these donor’s needs for continued donations and a notes card was the simpelist solution.
Before and after testing
Problems based on feedback from users
Participants mentioned that “average donation size” as a metric would not be used very often; participants also mentioned that showing how much a donor donates annually would be useful to see. The graph isn’t displaying information in a way that makes much sense, it looks as though the donor is only giving a couple of dollars every month and that does not match the other data displayed on the page (recent activity donations, average donations). The information on the notes card looks too packed together. One participant also mentioned that seeing what the donor is passionate about in relation to the organization would be beneficial
Solutions to these problems
Replaced the card that shows “average donation size” with a card that shows “average annual giving” for greater utility. Changed the “donation summary” graph to show quarterly changes in donation amounts as well as having the data points scattered less linearly to display the information more logically and clearly for the user. Also updated the dollar amounts to be consistent throughout the page, and shrank down the “new note” button to just the icon and remove the ellipses while adding hover interaction to add more breathing room to the card. I also included information about the donor’s passions in a note for the user
Messages
Another important feature that I wanted to include was a way for the user to interact with donors in order to solicit them for more donations and thank them for their support both monetarily and with volunteering. Creating a messaging feature would also allow for inter-office communication and automated messages that would go out to donors to save the user time and effort.
Before and after testing
Problems based on feedback from users
The name contact information card had alignment issues, specifically with the contact’s name, title, and time being center aligned with the rest of the card having a left alignment. There was no way of know which messages were sent automatically at a glance. And the elipses look strange by themselves, users were unsure if they were clickable.
Solutions to these problems
Left aligned contact information and fixed spacing. Included “automated message” on the messages cards to indicate which messages were sent automatically. Gave the ellipses a button around them for better aesthetics and clarity for the user
Reflection
This project had some unique challenges for me; one, this was my first time designing a dashboard; and two, for user research interviews, I needed participants that either work or worked in the nonprofit space and had some knowledge of either donor acquisition, retention or finances. This is a very niche group. Compared to previous projects, this dashboard did not require dozens of screens in order to complete the user flows, as it was more about how to display lots of information in a clear and understandable manner. Because of this, I spent more of my time and effort on the UI; focusing on my use of color, hierarchy, spacing, and data visualization. I’m happy with the end result, I think it does an effective job of displaying a considerable amount of information in a clean and functional manner, while looking visually pleasing.
Dashboard Home
Donor Database
Messages
Donor Profile
More Projects
Previous
Spotify Messaging Feature
Next
Museum of Fine Arts Boston
