| Client | ÇEKÜL Vakfı (Foundation for the Protection and Promotion of the Environment and Cultural Heritage) |
| Scope | UX/UI Design, Information Architecture, Drupal Platform Engineering |
| Year | 2024 |
| Stack | Drupal 10, Migrate API, custom content types |
ÇEKÜL Vakfı had been publishing on the same platform for more than a decade. Content had accumulated across seven program areas and forty-plus pages, the navigation and visual structure had not kept pace, and the Drupal 7 codebase underneath was approaching end of life. OctoHaus rebuilt the site end to end: a new information architecture and visual language on the front end, and a Drupal 10 platform with a redesigned content model and a full content migration on the back end.
01 / The Challenge
The existing site had accumulated decades of content without the structure to support it. Two navigation layers competed at the top of every page. Program pages all looked identical, giving users no visual sense of where they were or how programs differed from one another. Inner pages relied on heavy left sidebars that made content hard to scan and navigate.
Beyond the structural issues, ÇEKÜL operates across seven distinct program areas, each with its own audience and purpose. A first-time visitor trying to understand the foundation's work and a returning supporter looking to donate were navigating the same undifferentiated experience. The site needed to serve both without losing either.
Underneath the surface, the platform itself was part of the problem. The site ran on Drupal 7, a version that reached end of life in January 2025, on a content model that had grown organically for more than a decade instead of being designed for it. Fixing the navigation without fixing the platform would have meant building a better interface on top of the same structural debt.
Old Design
New Design
02 / Approach
The project started from a brief and a close look at the existing site, on both the design and engineering sides. Rather than run formal user research, we drew on the foundation's own understanding of its audiences and content, and on what the old site made painfully visible: too much information, not enough structure, running on a platform that could no longer support it comfortably.
We approached the redesign in layers that moved in parallel: navigation and information architecture, the visual language, and the platform underneath. Before a single screen was designed, the full information architecture was mapped: seven sections, more than forty pages, each with a defined content structure. That map became the basis for both the new page templates and the new Drupal content model described in section 05.
Before designing a single screen, the full information architecture was mapped: seven sections, forty-plus pages, each with a defined content structure.
03 / Simplifying Navigation
The existing site had two competing navigation layers. The top bar carried the main menu, Hakkımızda, Haberler, Makaleler and so on. Below it, a second full-width bar listed all of ÇEKÜL's individual programmes, effectively creating a parallel navigation with no clear hierarchy between them. Users had no consistent way to understand what was primary and what wasn't.
We collapsed this into a single primary navigation with four grouped categories. Secondary actions like social media links, the shop, and the newsletter moved to a utility bar above, separating wayfinding from destination.
Old Design
New Design
The same problem, across every inner page
Every inner page followed the same pattern: a left sidebar carrying the full section menu, competing with the main content for attention. The sidebar didn't help users navigate, it added noise before they even reached what they came for.
The Akademi page is one example. The sidebar was removed, section context moved into the persistent top navigation, and the page was restructured to lead with content. Training content is now organized by audience and program type, accessible directly from the page.
Before
After
Contextual content components were added to each page based on what users needed next, without relying on a sidebar to carry the full menu.
Same structure, different page
The donation page followed the same pattern: a yellow sidebar listing every donation option, a dense text block, and bank account details stacked at the bottom. The page asked users to process too much before they could act.
The new page leads with a clear headline, organizes giving options as scannable cards, and moves the bank details below the fold, visible when needed rather than competing for attention from the start.
Before
After
04 / Program Color System & Contextual Navigation
ÇEKÜL operates across nine distinct program areas, but the old site made them all look identical. Same layout, same accent color, no visual distinction between programs.
Before
Each program was assigned a distinct color, applied consistently across its header, navigation elements, and action buttons. A user reading about reforestation and a user exploring cultural heritage now have completely different visual contexts and always know exactly where they are.
Each program carries its own color, applied consistently across navigation, headers, and cards.

The system scales across the whole site

The color system wasn't limited to program pages. Every cross-linking component, CTAs, promotional blocks, and editorial sections on the homepage, inherits the color of the program it points to. A block promoting Bilgi Ağacı content appears in teal. A publishing section appears in blue. Users don't need to read the label to understand the context; the color does it first.

Homepage components inherit program colors; the system works without any extra navigation cues.
05 / Platform & Migration: Drupal 7 to Drupal 10
The visual and structural redesign only holds up if the platform underneath can carry it, so migrating the CMS was part of the same project, not a follow-up phase.
Upgrading in place was not realistic. Going from Drupal 7 to Drupal 10 is not an incremental update, it is effectively a rebuild: a new theming layer, a new module ecosystem, and, in this case, a content model that needed to change shape anyway to support the new information architecture. Rather than a lift-and-shift, we treated the migration as an opportunity to redesign the database schema around the structure the new site actually needed.
The old schema had grown one field and one content type at a time over more than ten years, with program pages, news, and articles stored in overlapping and inconsistently structured node types. We rebuilt the content model outward from the new information architecture: each of the seven program areas became its own structured content type carrying its assigned color, its own taxonomy for training and news content, and defined relationships to shared content types (news, articles, events) instead of duplicating fields per program.
With the new schema in place, we used Drupal's Migrate API to move the old content across: articles, news, program pages, staff, and training content spanning more than a decade of publishing. Old taxonomy terms were mapped to the new program structure so that existing content picked up its program's color and placement automatically, instead of being re-tagged by hand. The migration ran in stages, content type by content type, validated against the live site before each cutover, rather than as a single big-bang launch.
The result on the Drupal side: a platform on a supported, actively maintained core, a content model that matches how editors and visitors actually use the site today, and every piece of legacy content carried forward instead of lost in the move.
Have a Drupal platform that needs a rebuild, not just a redesign?
Whether it's an outdated CMS, a content model that no longer fits the site, or years of content waiting to be migrated, we can help.
