ZB Marketing & Consultancy is a British Council approved UK education consultancy helping students from all backgrounds access fully funded university courses. The client needed a premium digital presence that would establish authority in a competitive sector while remaining warm and accessible to a diverse audience.
A professional front for a premium consultancy
The client's expectations were clear. A site that communicates trust, expertise, and accessibility without compromise. The design needed to serve an audience of ambitious students from all backgrounds, many of whom had found traditional routes inaccessible, while simultaneously projecting the credibility expected by institutional partners.
The goal was a clean, editorial aesthetic that sits comfortably alongside the best in the education and professional services sector. Premium without being cold. Accessible without being informal.
Editorial precision at every scale
The visual language was built from a forensic study of leading institutional sites in the sector. Weight 400 throughout. Two-tone heading splits: full ink on one line, muted grey on the next. A purple square marker preceding every section label. Zero border-radius on any interactive element. No gradients. No shadows.
Brand purple #7C3AED appears in exactly four places across the site: CTA buttons, eyebrow markers, active navigation states, and link hovers. Colour as a disciplined system, not decoration. The result is a design that holds together across five fully distinct pages without a single inconsistency.
Built from first principles
Next.js 15 App Router with a CSS-only responsive system. No Tailwind utility sprawl, no component library dependencies. Every breakpoint is a named class with a clear purpose. The sticky scroll section drives active card state directly from window.scrollY via a passive scroll listener with no third-party animation libraries.
The page transition system uses a CSS keyframe overlay. The transparent-to-solid navbar reads scroll position and transitions on the hero page only. A slide-out mobile drawer with blurred backdrop, a seamless marquee trust bar, count-up hero stats, and a filterable course grid across 19 courses and five UK locations.
Five pages. One coherent system.
Home, About, Courses, How It Works, and Contact. Every page shares the same design system, the same typographic rhythm, and the same interaction language. The site loads fast, reads well at every viewport, and presents the client with the professional digital presence the business deserves.
A consultancy that helps students access opportunities they were told were not for them now has a site that reflects that ambition clearly.
