Client
Kids Help Phone
Product
Innovation Hub
Overview
Kids Help Phone (KHP) is a Canadian national helpline offering free, confidential support to youth through calls, texts, and online resources. With over 60 million interactions since 1989, KHP provides 24/7 mental health tools, focusing on marginalized and vulnerable groups. However, fragmented systems made it challenging to manage innovation, prompting the need for a centralized, user-friendly platform to enhance youth engagement and service improvements.
3 Months
Strapi CMS
Next.js
CMS configuration and customization
Front-end development
Dynamic routing and page generation
Content security
User experience design
Authentication and access control
SEO Optimization for Visibility
Streamlined Operations
Consolidated tools into one platform, reducing admin workload
Independent Content Management
KHP’s team updates content without developer support
Faster Performance
Optimized platform ensures quick access to resources
Goals & Challenges
Engaging Youth Effectively
KHP wanted to ensure that youth feedback and ideas were central to their innovation process but lacked a structured system to capture and act on these insights.
User-Friendly Platform Needed
The solution had to be accessible to non-technical users, including internal staff and community partners, while maintaining clarity and ease of use.
Scalability
The platform needed to scale to accommodate KHP’s growing needs and diverse user base.
The Solution
Atomic Build developed a centralized Innovation Hub that
Embedded Submission Integration
Atomic Build incorporated embedded solutions to integrate the innovation submission systems KHP already used. This avoided disruption, preserved existing workflows, and made it easier for contributors to submit ideas through familiar interfaces.
Idea Submission Form
Drag-and-Drop Content Management
The platform includes a flexible drag-and-drop CMS, enabling staff to quickly prototype and publish new content without developer support. This approach ensures KHP can evolve the platform easily, adding new pages, resources, or features as their innovation needs grow.
Content Upload & Discovery with SEO Optimization
To support continuous feedback and knowledge sharing, the hub enables users to upload supporting materials (e.g., documents, toolkits, media). A user-friendly discovery system ensures that all shared resources are easy to search, browse, and access making the knowledge access more efficient and informed.
Technical Approach & Challenges
Our goal was to build a flexible and scalable content management system (CMS) that seamlessly integrates with our frontend while providing a user-friendly experience for administrators and contributors. Below is how we achieved this:
CMS Configuration & Component Creation
Platform
Strapi CMS for its flexibility and ease of use, ensuring content could be managed efficiently.
Custom Components
Built reusable content blocks (e.g., forms, blogs, resource libraries) so KHP’s team to create pages effortlessly using a drag-and-drop interface without requiring coding skills.
Permissions & Security
Configured user roles to ensure secure access for staff and youth contributors.
SEO Optimization for Visibility
Public visibility and discoverability
Leveraged server-side rendering (SSR) with Next.js to ensure that pages load quickly and are properly indexed by search engines.
Search results
Configured custom meta tags and structured content in Strapi, allowing KHP to fine-tune how pages appear in search results.
Frontend Development with Next.js
Framework
We used Next.js to ensure fast, responsive pages with server-side rendering (SSR) for enhanced performance.
Dynamic Content
Frontend components automatically pulled data from Strapi, ensuring real-time updates.
Innovation Engine Framework
Dynamic Page Generation & Routing
Slug-Based Routing
Pages like blog posts or resource hubs were generated automatically based on CMS content, reducing manual setup.
Filtering & Search
Added dynamic filters for blog categories, tags, and dates to improve content discovery.
Enhanced Features for Youth Engagement
Markdown Support
Integrate a rich text editor directly into the Admin Panel for blog creation, reducing dependency on additional components
Secure File Downloads
Built templates for youth to access guides and toolkits securely.
Authentication
Sensitive content is protected using role-based authentication to ensure only authorized users can access specific resources.
Overcoming Technical Challenges
CMS-Frontend Sync
Ensured seamless integration between Strapi and Next.js for instant content updates.
Scalability
Designed the architecture to handle growing content and user traffic.
User Training
Provided KHP’s team with clear documentation for managing the platform independently.
Impact & Results
Reduction in Operational Overhead
Consolidation of tools minimized knowledge sharing workload.
Reduced Development Dependency
KHP’s team now manages content without technical support.
Enhanced Performance
SSR with Next.js and custom SEO boosted site speed and search rankings.
Atomic was the very best vendor we've ever worked with. Great communication and trust throughout the entirety of the engagement.
Jocelyn Rankin (she/elle)
Innovation Analyst