CASE STUDY
Centralized Innovation Hub to Enhance Youth Mental Health Support
How Atomic Build delivered a centralized Innovation Hub for Kids Help Phone using Strapi, Next.js, and reusable content workflows.
At a glance
Project snapshot
How Atomic Build delivered a centralized Innovation Hub for Kids Help Phone using Strapi, Next.js, and reusable content workflows.
- Industry
- Youth mental health services
- Product
- Innovation Hub
- Atomic Build's role
- Product and engineering delivery for a centralized innovation and content platform.
Impact
Reduction in Operational Overhead
Consolidation of tools minimized knowledge sharing workload.Reduced Development Dependency
KHP’s team now manages content without technical support.Project Length
3 Months
Platform
- Strapi CMS
- Next.js
Expertise
- 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
Business problem
Project context
Constraints and goals
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.
Solution delivered
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
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
Next.js for its server-side rendering capabilities and SEO-friendly routing.
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.
Reported outcomes
These qualitative outcomes come from the approved project record. No additional measurements have been inferred.
Reduction in Operational Overhead
Consolidation of tools minimized knowledge sharing workload.
Reduced Development Dependency
KHP’s team now manages content without technical support.
Client perspective
“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
Related services
Capabilities used in this kind of work.
Product Strategy
Turn business goals, user needs, and technical constraints into a focused product decision and an executable delivery roadmap.
Explore service →Product Modernization
Improve an existing software product, workflow, and architecture while protecting the capabilities the business already relies on.
Explore service →Forward-Deployed Engineering
Embed a senior product and engineering team that works in your real constraints and owns the path from decision to production.
Explore service →Your product could be next.
Every engagement starts with Sprint0 — we define what to build and then we ship it.