Empowering minds, connecting creators, where learning meets community, and curiosity sparks collaboration, turning knowledge into shared experiences that inspire growth and innovation.
Case Study
A Content-Driven Web Strategy
Design Engineering
Brand Identity Design
10
2021
Hackages had grown into a fragmented set of learning tools and sub-projects, each with its own UI. The job was to unify them into one platform without flattening what made each part useful , free tutorials, structured trainings, webinars, and enterprise courses all had to live under one coherent system. The strategic constraint was content-driven: the site had to scale by adding content, not by designing new pages, so the design system and the CMS were designed together.
I audited the existing interfaces, pulled out the recurring patterns, and consolidated them into a single design system , reusable components, layout primitives, and style guidelines scoped to work across every sub-project.
Then I built it in Webflow, mapping components to symbols and content to CMS collections, so trainings, webinars, and tutorials render from data through shared templates. Interaction and responsive behavior were defined once at the component level and reused across the platform.
I replaced a patchwork of one-off UI across the company’s platforms with one system , a shared token set, a component inventory, and naming everyone could reach for.
Consolidation was the strategic move: it gave the brand a consistent surface and made every screen after it cheaper to build.
From the system I built reusable components and layout templates as Webflow symbols, wired to CMS collections so content scales without touching layout. Adding a training, webinar, or tutorial is a data entry, and the matching list and detail pages render through the same templates , consistent and performant by construction rather than by review.
Motion and responsive behavior were built into the components with Webflow Interactions, so reveals, hovers, and transitions stayed consistent instead of being re-authored page by page.
Community flows for instructors and learners were designed to be obvious on first visit, lowering the friction between landing on the site and taking part in it.
Every screen renders from the same system , shared components and CMS-driven templates carrying trainings, tutorials, and webinars through one consistent language.
Hackages came together as one platform instead of a collection of tools. A scalable design system, built in Webflow and backed by CMS-driven templates, gives learners and instructors consistent access to trainings, webinars, and tutorials , and lets the team grow the site by publishing content rather than redesigning pages.