Featured project
The CHEO Foundation
The CHEO Foundation website serves as the central hub for fundraising campaigns, events, research initiatives, donor information, and community outreach for one of Canada’s leading pediatric healthcare organizations.
The site required a highly flexible content structure capable of supporting a large volume of pages, custom content types, and evolving fundraising initiatives.
Challenges & Solutions
Large-Scale Content Architecture
One of the biggest challenges for this project was the sheer scale and complexity of the site structure. Beyond the primary navigation, many sections contained deeply nested content systems with custom sidebar navigation and landing pages, dynamic templates, and campaign-specific layouts.
To support this structure, I helped develop and style systems for multiple custom post types including:
- News Articles
- Events
- Fundraising Campaigns
- Financial Reports
- Specialty Programs
- Pediatric Stories
- Staff & Board Members
- Job Opportunities
Design System & Interactive States
The project relied heavily on highly customized button systems, decorative hover treatments, and dynamic component styling.
Since interactive states of these elements were not included in the original Figma designs, I developed consistent hover, focus, and accessibility behaviors across:
- Navigation menus
- Buttons
- Content links
- Icon interactions
- Call-to-action components
This included creating flexible button systems that adapted based on background colors, icon placement, and met or exceeded minimum accessibility requirements.
Responsive Gutenberg Development
Because many pages had initially been assembled using Gutenberg blocks designed primarily for desktop layouts, significant restructuring was required to ensure cohesive responsive behavior.
During development, I introduced reusable Gutenberg Patterns that allowed sections to be rebuilt consistently and efficiently for both developers and content writers, while improving:
- Mobile responsiveness
- Accessibility
- Editor flexibility
- Layout consistency
- Long-term maintainability
Cross-Team Collaboration
With multiple simultaneous CHEO websites launching on strict fundraising deadlines, strong coordination between project managers, designers, developers, and content teams was crucial.
The experience required balancing:
- Design accuracy
- Accessibility requirements
- Responsive behavior
- Translation support
- Editorial flexibility
- Performance optimization
- Tight launch timelines
The Final Result
Complex challenges.
Thoughtful solutions.
Every section, pattern, and content workflow for this project was designed in alignment with the organization’s highly detailed design standards while giving CHEO staff the flexibility to confidently manage and grow the platform long after launch.
From fundraising campaigns to healthcare initiatives, what began as a highly complex multi-site initiative evolved into a scalable, fully accessible digital ecosystem built to support the organization for years to come.
