How we built a Webflow CMS content hub for an educational non-profit website

Prohuman Foundation is an education non-profit. They have a vast amount of lessons in their curriculum, so they approached Silver Arrow Creative to make everything accessible on their website.

‍

The requirements:

‍

• Design an information hub for all the lesson content, to allow users to quickly find the right lesson with advance search & filter functionalities.
• Migrate 400+ Google Docs files into Webflow CMS as rich text to make them SEO friendly.

‍

‍

Sitemap

‍

‍

‍

Wireframe

‍

‍

Key design components

‍

‍

Layouts

‍

‍

Advanced search

‍

• With such a large database that we just created, a search and filter function is crucial to help users navigating and interacting with the all the content with ease.
• Allow users to search any keyword within the full content of lessons (not limited to titles or metadata).

‍

Filter

‍

• Enable users to apply filters across multiple categories.
• Each category should support multiple selectable options.
• Users must be able to combine filters from different categories simultaneously.

‍

‍

A gated content function was requested by the client to collect information from the users

‍

After discussing with the client about the content of each lesson, we setup the CMS with custom code block inside.

‍

We populate all the content from Google Docs to website with CMS

‍