A Grantseeker banner ad I made for our "Mission Control" soft launch. Marketing collateral... oh yeah!

A Grantseeker banner ad I made for our "Mission Control" soft launch. Marketing collateral... oh yeah!

Grantseeker

Grantseeker is a free grants management tool available on the web that nonprofits can use to collaborate on proposals and and grants, stay on top of their upcoming payments and reports, and more.

As the sole designer on this new and rapidly evolving product, I am responsible for validating that features we build successfully meet nonprofits' needs. Making sure that every interface they interact with is consistent, clear, and polished has been a prerequisite as I took this application from launch to its current state of growth: adding 200 new organizations every month.

Case studies

  • Making related data more useful
  • Unifying the grantee experience for Fluxx foundations (coming soon)
  • Bringing consumer design to the nonprofit world (coming soon)

Note: I worked on many of these design files before or at the same time as my initiative to unify all of the Fluxx applications with one consistent design language. If you see differences in details such as color, spacing, or icons in the images accompanying these case studies, they are because some of the elements have been updated since.

 

related-header.jpg

Making related data more useful

Related data is a core piece of Grants Management in Grantseeker because a Grant itself is actually comprised of a set of payments and reports in addition to its own metadata. Considering that team members can assign tasks and tag updates to records, there can be quite a lot of data related to a given proposal or grant.

The original approach to related data

In older versions of Grantseeker, related data would stack up to the right of a record, and the entire sidebar would morph into a container with a set of cards for each saved Question / Answer from the Answer Bank while in edit mode.

Grantseekers often couldn't figure out how to get to their answer bank when they weren't editing (because it wasn't possible), and with variable heights, the actual position of any given block was very inconsistent across records.

 
  Earlier version of Grantseeker.  Left: Grant in view mode, with related data to the side. Right: Grant in edit mode, with the answer bank to the right

Earlier version of Grantseeker. Left: Grant in view mode, with related data to the side. Right: Grant in edit mode, with the answer bank to the right

Exploration and iteration on sidebar tabs

I quickly moved away from the horizontal tabs because there wasn't enough space for us to fit the tabs at a comfortable size, even without text. I continued to iterate and run quick usability tests using the inspector and chopped up screenshots. Using the existing pages from the browser allowed me to design, refine, and gather feedback much more quickly than by designing mockups from scratch.

 
related-exploration.jpg
 Very rough experimentation on the sidebar tabs alongside early concepts of the Funder Management UI changes.

Very rough experimentation on the sidebar tabs alongside early concepts of the Funder Management UI changes.

Results

I supported the development team by implementing the production HTML & SCSS, along with Javascript for the collapsible subsections and semi-fixed sidebar positioning.

While I'm continuing to optimize and fine-tune functionality such as the collapsible subsections for each model type, adoption and feedback has exceeded our hopes.

On recent feedback sessions, Grantseekers have used related data tabs on specific records to navigate in lieu of filtering or searching for other records from the list views. While this speaks volumes for the usability of the tabs, it also meant there was some work to be done on improving the filtering & searching UI.

 

Highlights

Fixing the tabbed sidebar to the top of the page on scroll

Participants quickly saw the value in having a fixed sidebar that they could use to compare across data in the main column. To maximize efficiency and reduce pagination button-mashing, the paging mechanism doubles from 5 items per page to 10 items per page when the screen is tall enough.

Rethinking the Answer Bank as a standard tab

The original Answer Bank allowed Grantseekers to copy answers into a form field while editing, but was absent otherwise. That meant our Answer Bank was only useful in the grant writing process, rather than also for grants management. This and the fact that people often struggled to find the Answer bank during usability tests at all made joining the Answer Bank with the other tabs a no-brainer.

final-related-vert-cursors.jpg
 The redesigned sidebar & tabs were released alongside other Form UI improvements I worked on separately from this case study

The redesigned sidebar & tabs were released alongside other Form UI improvements I worked on separately from this case study