Friends of Duncan Library's Giving Dashboard

A responsive website to help manage donations & relationships.

Role: UX Researcher/UX Designer

Goal: Develop a nonprofit dashboard

Tools: Figma, UXTweak, Miro

Comparison of the desktop and mobile versions of the dashboard homepage

Friends of Duncan Library's Giving Dashboard

A responsive website to help manage donations & relationships.

Role: UX Researcher/UX Designer

Goal: Develop a nonprofit dashboard

Tools: Figma, UXTweak, Miro

Comparison of the desktop and mobile versions of the dashboard homepage

Overview

Friends of Duncan Library (FoDL) supplements the library’s city-supported budget. FoDL raises funds primarily through membership campaigns and book sales.

The Problem: FoDL needs a tool to help manage supporter relationships. Users need to easily add new members at fundraisers, thank donors, and accurately forecast funding.

The Solution: A responsive dashboard that enables FoDL board members to easily keep supporter information up to date and track trends in sales and memberships.

getty-images-FH0OomnoaGs-unsplash
Design thinking

My process is simple and methodical.

I followed up on competitive analysis by talking with actual board members to identify their pain points and goals.

Then, I gathered and synthesized the data into actionable insights that informed the next stage of the process.

Customer Research Results

I researched dashboards designed to serve small nonprofits to identify competitor systems and their capabilities. 

Users complained about complex reporting, lengthy onboarding, confusing donor tracking, and clunky integrations.

I also talked to 5 adults who volunteer for small nonprofits, three of whom were from FoDL. I asked them about how they track memberships, donations, and supporters and what pain points they experience in the process. 

Competitive analysis of donor dashboards

My Findings

FoDL (1)

Synthesis

I uploaded the data gathered from user interviews into Miro and began looking for common themes.

From the themes I gathered, I observed the following:

FoDL needs a way to track member interactions, deliver on membership, and learn who members are.

Key functionalities are shareability; automatic reminders; tracking relationships & money.

Affinity diagram of sticky notes

User Personas and Points of View

Alma and Justina were inspired by aspects of the people I interviewed: nonprofit board members and volunteers who need to track people in order to deliver member benefits and track fundraising dollars.

Question: How might we help FoDL board members update supporter records in a more efficient way? And how might we help FoDL board members easily see trends in their sales and memberships?

Answer: Through a dashboard that helps FoDL board members track trends and update supporter records. Features include a supporter list, supporter tagging, filters, and a report generator.

Task Flows

I thought through how a dashboard to track and manage library supporters would work. As a starting point, I thought through how a user might accomplish the main tasks of the website (updating a supporter record and running a report) and created task flows.

Initial Sketches and Wireframes

Sketch and wireframe of Homepage
Sketch and wireframe of Supporters center

Figma Make's AI

I also used Figma Make to create a prototype of the Supporters page, to see how AI would design the same dashboard. The end result looks much like the wireframes I created prior to using Figma Make.

High-Fidelity Mock-Ups

The overall design was based on conventions of existing dashboards that I looked at during the competitive analysis stage.

I also designed mobile versions of the dashboard. I focused on adapting essential functions to a smaller screen by thinking about how users would use the website on the go.

Prototypes & Testing

In a low-fidelity usability study, 5 users completed both task flows quickly. Running a report confused users because the task flow did not match their mental model. Several tried to run a report through the Supporters Center.

The following were user-flagged issues and the resulting changes:

  • Adopting clearer, more descriptive labeling.
  • Making the edit button on the supporter page clearer.
  • Varying supporter names in the “recent activity” sections.

After making these changes and applying the UI kit, I created high-fidelity prototypes for each task and retested them with participants.

Design Iterations

After synthesizing the research results and feedback, I made changes to both the desktop and mobile versions.

Changes included:

  • On the Report Center: Adding functionalities, options, and a fly-out menu to standardize the table design; linked names to profiles.
  • On the mobile and desktop homepages: Retitled “Campaign Center” “Fundraising” to avoid marketing jargon.
  • On the Supporters Center: Added a redirect for people who went to the Supporters Center to run a report.

Impact and Reflection

The expected impact of a dashboard like this is that it would increase conversions (from book sale attendees to donors) and increase operational efficiency (by making it easier to manage donors effectively and accurately forcast organizational funding).   

In designing this dashboard, I learned to distill a nonprofit's technology needs into the most effective and cost-effective solution. For FoDL, I created a tool to support member and donor relationships, and to track finances. 

I also learned the importance of adapting the design to meet users’ mental models. I designed the wireframes based on existing dashboards, all of which had separate sections for running reports. What I didn’t realize was that users might navigate to the section of what they need to run a report on instead of the dedicated report section. More testing is needed to determine if the changes made to the designs will result in shorter task completion rates.

Headshot of a woman

Like what you see here?

Let's build something together!