Nonprofit hub
Redefining content and framework performance for an enhanced journey on the portal where nonprofits find Microsoft grants, training and partners.
- Company
- Microsoft · philanthropies
- DURATION
- 5 months
- Systems
- Moray, accessibility
- PRIMARY PERSONAS
- Nonprofit program manager
A portal full of help that wasn’t being used
The hub lets nonprofit organizations find services, donation and grant opportunities, training resources and partner connections — and register for grants or manage licenses and subscriptions.
Nonprofits weren’t engaging with the hub, so grants and resources that could help them were going unused.
Why aren’t nonprofits taking advantage of resources that could be helpful to them?
Starting from a third party’s work
A third-party design group had already defined five personas and produced designs in Zeplin and Marvel. This effort focused on the program manager, who oversees staff, services and program quality — and the designs needed to move to Microsoft’s design system standards.
Outdated content & design
- Content didn’t curate for individual nonprofits.
- A missed opportunity to take advantage of resources.
- Third-party designs weren’t compliant with Microsoft standards.
Decreased revenue
- Down $1.3M if the hub wasn’t delivered in H1 of FY22.
- Delays would impact a $110M web direct budget.
- The tech department could lose the ability to assist nonprofits altogether.
Themes that pointed to “helpful & clear”
Getting organized
Onboarding to a new team can be overwhelming, so I noted who was on the cross-functional team, collected shared resources into one list, and kept a personal timeline to stay accountable.
Cross-functional alignment
A journey-map jam session with the cross-functional team mapped which communications users receive during registration.
Contact Us first, then the rest
I started with the Contact Us page, which eventually informed how to update the rest of the pages. Working from the original, the live site and the agency version, I tested five layout options with the team, then moved on to the Azure grant page.
Updated content shaped the layouts
Prioritizing
The team aligned on priorities based on dependencies, with a monthly release plan; progress lived in our project manager’s action-items document.
Applying feedback
Refinements used Moray grid systems, components and icons, and confirmed photo usage rights. For Azure, I made versions without images so we could focus on layout.
Hand-off
Each page got a links-and-assets page for easy access, plus responsive designs for this customer-facing site. As content arrived, program managers reassessed sections — like holding new sections for a later phase.
Extras
A Moray cheat sheet for my developers, and accessibility versions covering headings and screen-reader order — the accessibility team’s office hours were a big help.
I didn’t need to be as thorough with responsive and accessibility hand-offs on every page — only where necessary.
More jam sessions with program partners on content, to align sooner and better understand time constraints.