Nonprofit Dashboard

Designing a responsive internal dashboard for a local nonprofit
Dashboard cover image
BACKGROUND
RESEARCH
DEFINE
DESIGN
TEST
CONCLUSION
Background

Overview
The goal of this project was to design an internal facing responsive dashboard for a nonprofit organization that manages their data for donations, volunteers, and/or events. I contacted a local nonprofit, Downtown Frederick Partnership (DFP) located in Frederick, MD, that expressed interest in having a dashboard designed that allows them to view their important key performance indicators (KPIs), display reports and data at a glance.

My role consisted of conducting research, design and testing of the responsive design.

My Role:UX/UI Designer, UX Researcher

Tools Utilized: Pen and Paper, Figma, Zoom, Google Forms, Google Drive

Duration: 2 Weeks

View Prototype
Research

Competitor Analysis, Stakeholder Interview

I performed two methods of research: competitor analysis and a stakeholder interview. I began with competitor analysis focusing on nonprofit dashboards for volunteer logistics and dashboards for donor management.

I then conducted a 1:1 interview with a stakeholder of the DFP, Associate Director Danielle Doll. This provided me direct insights to my future user and her goals,  pain points, and key metrics that would be important.


Summary of Findings

  1. Purchasing a fully customized dashboard is costly for nonprofits and there are many features that are not included in their standard plans
  2. DFP current solutions for donations, volunteers, and events are managed in separate dashboards making it time consuming to perform daily tasks
  3. Manipulating data and creating reports within the dashboard is a main motivator for the stakeholder
  4. Key metrics of DFP include: volunteer total hours, number of volunteers, financial goals for fiscal year and monthly, sponsorship and donations, and KPIs across different initiatives (gifts, online performances, donor relationships)
  5. The stakeholder’s goal is to have a clean and organized dashboard where she can see important mid-term and long-term information at a glance and access more extensive information quickly
define

Information Architecture Site Map
My discussions with a stakeholder from DFP provided me insights to what the organization’s current goals and pain points were. With this information, I focused my efforts in the define stage creating a sitemap and user flows for the dashboard. This helped me further determine how my stakeholders would be interacting in the dashboard on a daily basis and what would meet the needs of the organization moving forward.

Design

Sketches
My design process began with creating sketches of the dashboard screens, different variations of widget components, and tables. As this is an internal facing dashboard, I focused on the function of the components and what the stakeholder requested while also including unique visual elements.

Wireframes & Style Tile
I iterated on my sketches and I moved onto mid-fidelity wireframes in Figma of the responsive design. My initial wireframes included the dashboard homepage displaying graphs, lists and widgets and the donation page which included designing tables and a spreadsheet element across the different screen viewpoints of desktop, tablet, and mobile. I gathered feedback from an informal testing on the screens and incorporated adjustments as needed.  

wireframes

Next, I put together my hi-fidelity UI screens incorporating additional necessary screens for the stakeholder to accomplish her goals. I also included the color scheme and logo of the nonprofit, making the dashboard personalized for the stakeholder. I took into account the requests of the stakeholder to keep the overall feeling of clean, functional, and systematic.

style tile
Test

Hi-Fidelity Prototype and Usability Testing
I converted my designs into a working prototype in Figma. Due to time constraints, I chose to test the desktop design only with three other participants who had some experience working with dashboards. Unfortunately, my stakeholder was not available within the time constraints of this project to provide feedback to me. I performed my usability testing remotely via zoom calls and recorded the user’s moving through the flows and asked probing questions.

View Prototype

For testing the UI elements of this project, I decided to focus on the following:

  1. Test layout, sizing, and aesthetics of the dashboard and its features
  2. Understand areas of improvement in the design and how users expect to interact with a dashboard
  3. Test the general flow of user Add a new donor to the database, editing donor information, and adding a new fundraising campaign
  4. Understand any pain points and frustrations of the user while interacting with the dashboard

Affinity Map and Priority Matrix

I compiled the responses of my usability test into an affinity map categorizing the key takeaways into positive, negatives, fails, and suggestions. I then created a priority matrix for the areas of improvement that I identified.

Summary of Feedback

  • Overall the UI and aesthetics of the site were favorable with comments such as “clear and simple” and “easy to navigate”.
  • Users expressed wanting to customize their dashboard view, moving widgets around or adding/removing widgets. But as this is intended to be primarily a strategic dashboard with minor input functionality, layout with the stakeholder would be solidified before production for optimization
  • Users had no problems executing the tasks and the general flow was intuitive and easy
  • Majority of pain points centered around small issues such as status of donors or volunteers and including a key for the color coding in the to-do list
  • Users wanted to be able to access more reports across other years and create reports to export

Iteration & Implementation

Based on these results, I decided to go back and implement some changes to those issues I identified as top and high priority.

conclusion

I felt this project was an opportunity to expand my skills as a designer and take a swing at data visualization. I gained confidence as a designer and new skills in creating tables, widgets, and internal facing dashboards. This project was a daunting task to complete in the two week timeframe allowed. I have many ideas about expanding the dashboard further to include things such as creating reports, additional spreadsheets, messages within the platform to other users, importing and exporting data options, and events pages.

My main obstacle was creating a functional and delightful dashboard that my stakeholder would be proud of. Although our timelines did not match up to complete this assignment with input from the stakeholder, I do feel that the DFP would find value in the dashboard with increased functionality of employees' daily tasks.  

more projects