Rather than treating the homepage, Pillar pages, Radar, and Handbook as separate deliverables, I organised them around three intentions: understanding the ecosystem, exploring emerging developments, and accessing practical guidance.

I defined the relationships between these experiences, separated future-facing exploration from actionable guidance, and introduced contextual links only where the content genuinely connects.

The project began without an established visual language or complete information architecture. Across three proposal rounds, I combined stakeholder feedback with AI-assisted exploration to progressively narrow the direction, then reconstructed the selected approach across the final page set in Figma. The approved files were handed over for implementation on 23 June, just over nine weeks after project onboarding.

Stakeholders wanted a technology-focused identity without the dark, futuristic conventions common to cybersecurity websites. Using TNO, BOM, and ASML as reference points, I developed a lighter system based on real-world photography, diagonal framing, structured typography, and reusable content modules.

The homepage presents BHoC as a living, ecosystem-backed platform rather than a static resource library. It combines the value proposition, featured resources, strategic Pillars, ecosystem partners, current activity, and newsletter subscription within one scannable entry experience.

Each dataset attribute became a visible or interactive property: clusters define thematic segments, sub-clusters create radial axes, maturity determines ring position, and contribution type controls marker style. The resulting model supports comparison across five clusters, 37 sub-clusters, and four maturity levels while revealing detailed information only when needed.

The landing page helps users compare chapters through concise summaries and key points before entering long-form guidance. Within each chapter, Handbook navigation and in-page anchors are separated by decision level, reducing hierarchy overload while preserving access to research, recommendations, implementation methods, and related Radar content.

By 23 June, the visual direction, platform structure, and core interaction models had been approved for implementation.

The work established a coherent seven-page knowledge ecosystem connecting strategic Pillars, future-facing innovation, and practical cybersecurity guidance. Post-launch usability and behavioural impact have not yet been evaluated, so the current outcome is framed as design approval and implementation readiness rather than user impact.

After the design direction was approved, I independently explored how the concept could translate from Figma into a functional front-end prototype.

Using React and TypeScript, I rebuilt a focused subset of the experience—the Homepage, Handbook landing page, and a representative Handbook chapter—to test interaction flow, responsive behaviour, and implementation constraints beyond static design.

This was a post-design experiment rather than part of the official BHoC implementation. Its purpose was to extend the approved concept into a working prototype and strengthen my understanding of the design-to-code handoff.