Centralized Innovation Hub to Enhance Youth Mental Health Support
Overview
Client
Project Length
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
Impact
Streamlined Operations
Consolidated tools into one platform, reducing admin workloadIndependent Content Management
KHP's team updates content without developer supportFaster Performance
Optimized platform ensures quick access to resourcesGoals & 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
- Drag-and-Drop Content Management
- Content Upload & Discovery with SEO Optimization
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
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.
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
- Custom Components
- Permissions & Security
Strapi CMS for its flexibility and ease of use, ensuring content could be managed efficiently.
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.
Configured user roles to ensure secure access for staff and youth contributors.
SEO Optimization for Visibility
- Public visibility and discoverability
- Search results
Leveraged server-side rendering (SSR) with Next.js to ensure that pages load quickly and are properly indexed by search engines.
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
- Dynamic Content
Next.js for its server-side rendering capabilities and SEO-friendly routing.
Frontend components automatically pulled data from Strapi, ensuring real-time updates.
Innovation Engine Framework
Dynamic Page Generation & Routing
- Slug-Based Routing
- Filtering & Search
Pages like blog posts or resource hubs were generated automatically based on CMS content, reducing manual setup.
Added dynamic filters for blog categories, tags, and dates to improve content discovery.
Enhanced Features for Youth Engagement
- Markdown Support
- Secure File Downloads
- Authentication
Integrate a rich text editor directly into the Admin Panel for blog creation, reducing dependency on additional components
Built templates for youth to access guides and toolkits securely.
Sensitive content is protected using role-based authentication to ensure only authorized users can access specific resources.
Overcoming Technical Challenges
- CMS-Frontend Sync
- Scalability
- User Training
Ensured seamless integration between Strapi and Next.js for instant content updates.
Designed the architecture to handle growing content and user traffic.
Provided KHP's team with clear documentation for managing the platform independently.
Impact & Results
- Reduction in Operational Overhead
- Reduced Development Dependency
- Enhanced Performance
Consolidation of tools minimized knowledge sharing workload.
KHP’s team now manages content without technical support.
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