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.
- 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.
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.
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.
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.
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.