Fluxx

Fluxx‘s primary product, Grantmaker, helps the world’s largest foundations manage and award over $5.2 billion in philanthropic grants per year. Grantseeker was created to equip nonprofits (grant applicants and recipients) with equally powerful technology.

As Grantseeker’s lead designer, my responsibilities included research, feature ideation, wireframing, prototyping, testing, and collaborating with engineering throughout development. I collaborated with a small team of product managers, researchers, engineers on projects that touched all aspects of the application. Our focuses broadly fell into the following areas:

Nail the fundamentals

To simplify the signup flow for users, I created a lookup integration with Guidestar, a comprehensive database of nonprofits and philanthropies. This new approach was beneficial for both users and the company. For users, the ability to identify their organization from a pre-filled database eliminated any need for manual input of information. Fluxx, in turn, received more comprehensive data about each new organization.

Over 75% of new users who viewed the redesigned first signup page completed the redesigned signup flow. This conversion rate was an +11% improvement over the previous flow. A smooth signup process was key to Grantseeker’s organic growth which occurred with zero marketing effort.

Improve core functionality

To improve the product after its initial MVP launch, I revisited many of the core features and looked for opportunities for improvement. One of my largest projects was a complete overhaul of the homescreen (pictured at the top of this page). Insights from user research and feedback about the previous homepage led me to develop an infinite-scroll schedule that gave users an overview of upcoming events and served as a jumping-off point into other parts of the application.

In addition to revisiting existing features, we sought to create new core functionality that supported existing grants management tasks. While speaking with grant professionals at nonprofits and philanthropies, we learned that nonprofits often set annual goals that are aligned with their grants. Progress towards these goals is tracked and reported. This information is then shared with various stakeholders: donors, board members, internal teams, and the public. To help grants managers create, track, and communicate these annual organizational goals, we created a new feature called Strategic Initiatives.

After setting goals, users can update their target metrics as they progress. Through text and images, users can also craft a narrative to communicate progress and milestone achievements with internal and external stakeholders. Interviews with Fluxx users revealed that storytelling was an integral part of nonprofit work. This feature offered nonprofits a brand new way to tell stories with qualitative narration and quantitative rigor.

Design for growth and monetization

We launched Grantseeker’s first set of premium features and freemium infrastructure to account for new flows such as subscription, billing, trials, and expirations.

Adding premium and trial versions to a product experience introduces complexity. Users at different subscription stages (free, in trial, post-trial, and subscribed) must experience slightly different products. Users in trial, for example, need to know that access to features will expire so that they are not alarmed when the app’s functionality changes post-trial. To address this, I devised a visual system (via color and iconography) to help users identify trial/premium features. I also implemented an omnipresent count down that conveyed the number of days remaining in the trial. This countdown also served as a call to action which linked users to the upgrade page.

Below, you can see the first iteration of a premium data visualizations page that allows users to manipulate and interpret their grant data. Data visualizations aggregated the rich data that exist in disparate parts of the application.

A major undertaking was a redesign of Grantseeker’s minimal homescreen, since the app was gaining traction with nonprofit grant managers. We wanted to address a few glaring issues and also explore opportunities for improvement in the app’s crucial first interaction point.

Understanding users and use cases

I first set out to understand grants managers, how they worked, and what they wanted from a homescreen. We gathered information through informational user interviews, analyzing usage through Hotjar, and running queries on the user database.

Qualitative research revealed the deadline-driven nature of grants management. Nonprofits are typically funded by multiple grants, each with its own application timeline, payment schedule, and reporting due dates. Our redesign needed to consider new ways to organize and prioritize numerous competing deadlines.

Quantitatively, I looked at Grantseeker usage figures including how many records were being created and which areas of the app were most utilized. Notably, the average number of grants within each account was roughly six, more than could be displayed on the existing homescreen design.

Investigating existing problems

Both a heuristic review and user feedback revealed a number of usability issues with the existing homescreen (shown below).

• A quarter of the page was used to display a static and persistent banner. This banner was intended to guide new users, but it persists in the same state even if the user is logging in for the 100th time.
• The original design did not utilize space efficiently. In the screenshot, one can see four grants displayed above the fold. Our research showed that even the smallest nonprofits need to research, apply for, win, and archive dozens of grants. Scaling to medium and large sized nonprofits and accounting for organizations who opt for Grantseeker as their primary grants management tool would require a more efficient means of conveying information to the user.
• The left to right timeline that the original design used was neither useful nor efficient. All deadlines were represented by symbols that hid exact dates behind hover actions. To help deadline-driven Grants Managers, a redesigned homescreen would need to be more forthright with dates and relevant information.

Problem and goal definition

A collation of our findings revealed a few obvious redesign opportunities. A successful redesign would use the homescreen space more efficiently by increasing the amount of grant data displayed. Furthermore, the new homescreen should implement a more intuitive way to highlight the most proximate upcoming events for grants managers.

Testing divergent options

After validating the concept of a time-based design for the homescreen, we arrived at two possible solutions for a primary homescreen feature: a calendar grid and an infinite scroll schedule list. User testing revealed a preference for a calendar, however we were hesitant to create a calendar product that would simply duplicate functionality already available via Google or Outlook calendars. Deeper questioning uncovered that while users acknowledged the power of new features afforded by a schedule view, they preferred a calendar mostly out of familiarity.

After consideration, we moved forward with the schedule list as the centerpiece of the redesigned homescreen. The schedule list addressed many of the issues that we had identified at the beginning of the redesign including efficient use of space, elevation of dates, and focus on the most pressing deadlines and tasks. Acknowledging users’ affinity for a familiar calendar view, we devised a way to allow users to integrate Grantseeker with existing calendar products (more details below).

Incorporating feedback

In response to both user preference for the calendar option and user distaste for duplicated grant-tracking work, we created a calendar integration that allowed users to port data from Grantseeker to their Google or Outlook calendars. This feature would allow Grantseeker to plug into and enhance users’ existing workflows and tools.

Design and iteration

We began design on the full homescreen that featured a scrolling schedule list. Since the schedule only showed discrete tasks and deadlines, we also wanted to incorporate a way for users to view a snapshot of their grants.

Below, you can see a rough, early version of the new homescreen. On the left side is an infinite-scroll schedule. On the right side are indexes of grants in different states with associated deadlines. Feedback on this design prompted us to play with the relative weight of the schedule and the indexes. Furthermore, while we doubled the number of possible grants shown on the homescreen, we sought to increase this even more as we moved towards a final design.

Each scheduled event is represented by a single row in the schedule list. To provide additional context and information but not overwhelm the user, we created an expanded state for each scheduled event. Upon click, an event such as an application deadline would show additional information about the associated grant and funder. Because the data associated with events differ (for example, a scheduled task has an assignor while a payment date has no assignor but does have a currency value), I mapped and planned what information would appear in each event’s dropdown.

Final design

We launched with the design below. Guided by research insights and product-engineering collaboration, this new approach addressed the original homescreen redesign objectives that sought to convey more data to the user and highlight approaching deadlines. A number of tangential improvements also shipped with the redesign.

• The number and organization of viewable grants above the fold increased significantly. Whereas previously only three or four grants were immediately viewable from the homescreen, the redesign essentially allowed the user to view or access any of their grants in the above the fold homescreen experience.
• The new, filterable schedule provided an elegant way to emphasize the most immediate dates and deadlines.
• The most pressing information about each grant is presented upfront while giving the user the option to view even more detail in an expandable state.
• We added an index of grants to the left column. Using pagination, sortable columns, and tabs, we were able to give users access to a large volume of grants on the homepage.
• Given the significant increase in information presented, we utilized color hierarchies and iconography to help users visually distinguish between different types of grants in different states.

Retrospective

The new homescreen helped Grantseeker’s userbase double to over 5000 users in the year. We successfully incorporated input from users and internal stakeholders to create a markedly improved utility. After launch, we shifted gears to other projects on our backlog which were crucial to growth and monetization. I will note two major opportunities for further improvement and exploration.

1. The final homescreen placed more emphasis on the schedule (2/3 of the screen width) than the index of grants (1/3 of screen width). This was based on the understanding that grants are time and deadline driven. However, we also know that many Grants Managers are accustomed to using spreadsheets. In fact, some Grants Managers with whom we spoke used spreadsheets in lieu of any grants management software. I would be interested in seeing how users would react to a flipped emphasis, where the homescreen’s focus is an index of grants augmented with features and utilities.
2. The salutation feature at the homescreen’s top left was created to humanize the experience, but I would have liked to explore ways to make it more useful. Perhaps it could reveal tidbits of information in a similarly genial tone (“You’ve just applied for over $100,000 this year!”). Or it could alert users to newly created grants (“MacArthur Foundation just opened the Green Award. Learn more!”).