Sector(s)
Revitalizing the Canadian grantseeking experience: a future-forward web application leveraging decoupled Drupal and React.
Introduction
Imagine Canada provides programs and resources to Canadian charities that are critical to ensuring sectoral growth, advocacy, and success. Grant Connect, a fundraising resource with a 50-year legacy with Imagine Canada is instrumental in that mandate, ensuring charities can find the funding they need.
Positioned originally as a fundersâ guide and database, by working with Therefore Interactive it has become much more than that. Grant Connect is now a modern and scalable web-based solution for grantseeking and managing the fundraising pipeline.
- Customer: Imagine Canada
- Project: Grant Connect
- Duration: 3 months (6 Agile sprints) from platform redesign to new MVP
- Technology: React and the Contenta Drupal 8 Decoupled CMS
- Relationship: since 2017, ongoing

About the project
Future-proofing a product with a far-reaching legacy and potential for disruption
First launched as a print guide back in 1966 under the title âGuide to Foundations and similar grant-giving agenciesâ, Grant Connect has gone through several iterations. Over the years this has meant a cycle of different offerings and technologies as Imagine Canada worked to support the unique challenges of grantseeking and funder research through the decades.
Like most organizations, this meant a cycle of redevelopment & redesign every five to 10 years with massive investments in bespoke technology or off-the-shelf solutions, which eventually became dated, impossible to support, or failed to improve and evolve over time. The most recent iteration of Grant Connect (a custom built CMS) was over 5 years old and offered little room for new features or iteration.
Along the way, competitors have also emerged. Like every industry, disruptors come along, investing in user experience and innovation to solve old problems in new ways. Despite lacking in history and influence in the sector, these competitors gained ground through novel approaches and greater agility. While Imagine Canadaâs investment in research and data accuracy provided a compelling value proposition, its inability to improve the existing customer experience inhibited new growth.
Approaching Therefore, Imagine Canada brought an opportunity to not just modernize the Grant Connect experience, but also to pivotâ asking how a social enterprise product could work more like startup. How can Grant Connect, through iteration, feedback, and scalable technology compete and hold their market position while maintaining Imagine Canadaâs sectoral impact into the coming decades?
Key Challenges
A mountain of Legacy Data
- ~100K funder records with complex data structures
- A history of funder gifts spanning decades and millions of records
- Complex taxonomy structures (used to filter, organize, and search)
- MsSQL data migration from a custom CMS platform
Project Constraints
- A predetermined budget allowed for 6 Agile sprints.
- A long list of legacy features still used and desired by customers with the desire to move the product forward to complete.
- Data legacy; Grant Connectsâ competitive value rests in its data (both customer data, and the decades of research data to which the platform provides access).
Understanding the Customer Needs
- Grantseeking and fundraising involves in-depth research, financial and business analysis.
- Charities across Canada are diverse and service a range of causes, and populations.
- More than just research, Grant Connect supports the fundraising pipeline, from the identification of an opportunity to long-term funder stewardship.
Therefore: Best-in-class UX, Technology, and an Agile Minimum Viable Product Approach
At Therefore Interactive, our user experience focus and technical capabilities made us an ideal fit to tackle these challenges, but doing so would require working closely with the Grant Connect team through careful consideration, collaboration, and compromise. Right from day one, we considered the project constraints. To manage expectations, a minimum viable product was our goal - to ensure a viable product for end users while ensuring prioritization and efficiency to minimize a bloated product or product scope.
Identify the Customer and Their Needs
Our first step in any project is to dive deep to understand the real-world tasks of the customer to identify the true value of the product. Therefore first began with a crash course in fundraising, exploring through a reductive research process the specific needs, workflows, and processes of grantseeking. Examining competitors and similar fields (business development and sales, for example) we identified analogous or contemporary experiences to draw from in shaping our user experience.
Looking at existing analytics metrics for the product, and interviewing customers, we considered real-world usage and behaviour. We worked to identify what features worked well, what features didnât (and required improvement) and what features should be deprioritized in favour of others for an MVP.
At every stage, we considered: does this desired or existing feature serve the value proposition of the product? How can it be improved? How should it be prioritized? This thinking ensured we identified a product backlog that was achievable given the budget while still ensuring a razor-sharp focus on customer success.
Conceptualize an Ideal Experience
Once a thorough understanding of the customer need and client requirements were identified, we began to conceptualize the user experience through wireframing, diagramming, and design. Through our competitive analysis, we had identified a number of interface examples and analogous models to help us guide the process. What is the best interface pattern for managing opportunities through a pipeline workflow? What search experience will best meet the specific queries, filter parameters, and prioritization needs of a grantseeker? Looking at existing competitors and similar applications allowed us to leverage the learnings of others to design a more competitive and desirable product.
Down to the finest detail, our team worked collaboratively with Grant Connect and their subject matter experts to ensure we prioritized information in the application user interface in the most optimal ways for customer needs. With hundreds of data points for every funder that appear in the search, it was critical we establish a strong, intuitive visual hierarchy to drive efficient grantseeking research.
To ensure a cohesive design language, and a set of interaction principles which would ensure best in class experience we deferred to Google Material Design. This gave us both a design framework to help respond to specific interaction concerns with an established conversion,and an efficiency between design and development through the use of established libraries (Material UI) to quickly build out a highly usable product.
Finally, as product planning doesnât end with visual design, our team leveraged our experience with modeling complex content management systems and working with complex data interfaces to architect and document a solution which would offer tangible improvements to data quality, structure, and long-term maintainability.
Agile Collaboration and Development
Therefore Interactive believes in Agile development. As a methodology, it allows us to structure projects in an iterative, collaborative way, and focus on the delivery of customer value (not simply features on a checklist). For Grant Connect, and our tight development schedule, this meant a complete integration of our teams. Daily participation in stand-ups from their product owners and our Agile team ensured a total collaborative end product and constant course correction, adjustment, and detailed requirements gathering throughout.
Minimum Viable Product Approach
While the Agile process provides us with a strong methodology to prioritize against a budget, MVP was our north star for this product. The legacy Grant Connect had its own features and so itâs own existing customer expectations. Some customers would be averse to change or to losing features. This was a difficult course to navigate, but working closely with the Grant Connect team allowed us to demonstrate the value of stepping back and asking what features are necessary for a viable release.
The desire was to move Grant Connect from a large capital investment once every five years to tighter cycles of customer feedback and more frequent iteration, feature development, and improvement. The MVP approach allowed us to position the product in that way: bringing low usage legacy features or desired expansion features to market over time (as add-ons or based on user feedback) and to onboard customers slowly to identify usability issues, missing features, and new opportunities.
In addition, by tearing the product down to its most critical functions, we ensured minimal ramp-up for new customers and smooth onboarding to the new interface for existing customers. The product can evolve through the progressive release of complex features. By listening to our customers and analysing their new behaviour patterns, the product will evolve and change to better meet their needs.
Leveraging the Contenta Drupal 8 Decoupled CMS
Over the years, it has been our experience that for delivering highly complex content management solutions, there is only one option: Drupal.
In the case of Grant Connect, we looked to the Contenta Decoupled Drupal 8 distribution as a starting point. Contenta offered an incredible contributor toolkit for out-of-the-box service building, design, and documentation. In addition, Contentaâs packaged Material Design admin theme offers a truly improved user experience to our clients for managing this complex application.
Using Contenta, complex content structures and endpoints were built to both serve content (through complex funder searches) and interaction, allowing Grant Connect users to manage these opportunities through a pipeline workflow (including tagging, notation, and drag and drop).
Best-in-class Technology: Decoupled Drupal + React
In order to support the challenges of the product, to support iteration and improvement, and facilitate rapid development of an MVP, our choice of technology was critical. We needed to be able to move quickly, delivering a modern and highly usable end user experience with the flexibility to evolve over time, while managing large volumes of highly structured content and data in a way that can scale.
React: The Power of âBuilt Elsewhereâ
With the back-end completely taken care of by Drupal 8, we could engage parallel development streams on the front-end to quickly scaffold our front-end using React. Leveraging the Material UI library and the robust ecosystem of React components, our front-end engineers were able to work swiftly to assemble a working and interactive experience (even while data migration, and content modeling was still underway).
This decoupled, front-end/back-end approach gave us the flexibility required to deliver a best-in-class experience. The ability to work with the full range of ever-evolving front-end technologies allows for next-level interactive experiences and game-changing efficiencies while enabling Grant Connect to evolve at the speed of the web.
In the long term, we believe this approach allows much more flexibility for change. While the data model and Contenta service will stay roughly the same over time, the front-end can improve. We can work to reduce UX bottlenecks, to change labelling, or adjust interaction patterns with minimal effort using a component-driven, React-based approach to application architecture.
Perhaps in a few years a major overhaul will be required. Perhaps the UX will need to change to consider new market forces or competitors. And so be it! The power of the decoupled approach is that our Contenta service can support any and all future endpoints. Whether it be a future application redesign or an expansion of the product, for example, to include native iOS and Android apps (perhaps using React Native).
Validating at Every Step
Of course, a project and an approach arenât successful until user feedback begins to trickle in â or torrent down. At Therefore we believe in validating at every stage of the design and development process to ensure weâre building the right thing. Whether itâs prototyping at the design phase and engaging user interviews and testing, or engaging UAT testing during the development; continuing to iterate is how we improve.
Grant Connect is currently in an Alpha release, where our first round of new Grant Connect users are able to provide us with data to improve. Soon a broader rollout will provide us with more insight and more data to drive the customer experience forward.
The Experience
Grant Connect consists of three main screens. While the user experience is quite simple, the application offers a wealth of mission-critical data and ways to manage and work with that data to succeed as a charity grantseeker or fundraiser.
Global Search
- The core experience revolves around search.
- At a global level users are able to jump directly to an individual funder via autocomplete.
- More specific searches can be achieved via keyword, cause, and region global search parameters.
Search Results
- Once a user has submitted a search they are provided with a detailed listing of results.
- This list of results can be further filtered, sorted, and narrowed by additional parameters.
- The display can be adjusted for a detailed card or minimal list view, or a user can begin to engage with funder profiles.
- In the search, the funder profile cards provide high-level, yet priority decision-making information.
- Users can action cards directly by adding funders to their pipeline or managing how they appear in the search.

Funder Profile
- Each funder is provided with a profile.
- The profile is information-rich, providing all of the necessary data to identify a funding opportunity (qualify a program), determine a request size through gift history data, assess the requirements for application, and contact the funder.
- Again, tangible funder opportunities can be added to a grantseekersâ pipeline so the opportunity can be managed through its lifecycle.

Pipeline
- As opportunities are identified, they must be qualified, cultivated and solicited over time.
- Managing this works much like a sales or marketing workflow where we manage opportunities or leads through a funnel.
- With the ability to add notes, request size, and to track program deadlines through a funnel, the pipeline provides grantseekers with a tool to not only identify opportunities but also manage and track the complete grantseeking workflow.

Whatâs Next: From Awareness to Advocacy, Partnering on The Grant Connect Customer Journey
Therefore began working with Imagine Canada in 2017, ahead of the Grant Connect project, engaging the broader organization in research and strategy to consider the big picture ahead of a number of possible future digital investments. It was our purview to look at Imagine Canadaâs digital strategy in a holistic way and offer recommendations and insights. The outcome of this engagement was a vision and a roadmap for an integrated, cohesive customer journey across program areas and properties at Imagine Canada.
The Grant Connect product redesign was the first step on this roadmap. The product is not where the customer journey begins. Therefore is currently working with Imagine Canada to design and develop a platform for strategic marketing and customer success to drive new customer growth, sectoral advocacy, and in general the success of Imagine Canada.
As an agency, we believe that this kind of integration with our clients is truly valuable. Instead of a vendor-to-client relationship, we believe in the value of partnership. Our best work is achieved when our project outcomes have a return on investment and help a company grow, reach its goals, and flourish. Working with Imagine Canada, weâre eager to continue developing both Grant Connect as a product (through iteration and improvement) and the Imagine Canada customer journey. For us, itâs not enough to only deliver a well-built product; itâs important to deliver true value for our clients and their customers.
Why Drupal was chosen
Drupal offers an unparalleled ability to model complex content relationships, taxonomy, and user structures in a way that can be easily maintained by our clients. Moving into Drupal 8, the inclusion of core support for developing RESTful services, managing authentication, complex data migrations, and generally providing a platform for decoupled and multi-channel publishing reaffirms Drupal as a powerful tool in delivering enterprise content management solutions.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Contenta CMS
- Out-of-the-box service building, design, and documentation.
- Contentaâs packaged Material Design admin theme offers a truly improved user experience to our clients for managing this complex application.