SKEP Academy

Overview

SKEP Academy is a professional training academy for industrial and technical skills, serving engineers, technicians, students and companies across Morocco and Africa. It teaches twelve specialities — from industrial electricity, electrical maintenance and PLC automation to instrumentation, mechanics, industrial safety, hydraulics, energy, water treatment, HVAC and renewables. I designed and built its entire digital presence: a French-language site whose job is not to describe the academy but to turn industrial professionals and employers into training leads.

My Role

I was the sole designer and engineer on the project, owning it from a brand-derived design system through to the production deployment, the CMS behind it and the SEO work on top.

• Built the design system out of the SKEP logo — emerald and lime greens against anthracite and paper, with Space Grotesk, Inter and JetBrains Mono as a deliberately technical type pairing.
• Designed and implemented every page and component: adaptive header, searchable domain catalogue, lead forms, FAQ accordion, contact tabs and scroll-reveal motion.
• Moved the content out of the codebase into Sanity, writing idempotent migration scripts so the switch was repeatable rather than a one-way manual copy.
• Ran a full technical SEO and structured-data audit of the finished site, then implemented the remediation myself.
• Wired analytics so that nothing loads and no cookie is set until the visitor has actively agreed to it.

What I Built

Training Catalogue

Twelve technical domains, each with its own page covering objectives, topics, audience and prerequisites, sitting behind a searchable catalogue index. Related domains are computed from real topical adjacency rather than a hand-kept list, so every page cross-links to disciplines that are genuinely adjacent to it instead of repeating the same three suggestions.

Lead Generation

The site is organised around conversion rather than presentation: contextual lead forms, a dedicated B2B route for in-company and custom training, a four-step walkthrough of how an enquiry becomes a scheduled session, quote requests, and a persistent WhatsApp channel — which is how this market actually does business.

Sanity CMS Migration

The content began as hardcoded TypeScript. I modelled it in Sanity — domains, posts and categories, with a custom Studio structure — and wrote migration scripts that upsert by slug so they are safe to re-run: each image is uploaded as a Sanity asset (reusing one already present rather than duplicating it), the documents are created, and references are wired in a second pass once every target exists to point at.

The GROQ layer derives values on the server instead of in components. Reading time falls back to a word-count estimate when an editor leaves the override blank, catalogue numbering is computed from the sort order so reordering in the Studio never means renumbering display strings by hand, and images resolve to plain CDN URLs so next/image optimises the remote originals exactly as it optimised the local files they replaced — nothing downstream had to learn about Sanity asset references.

Consent-First Analytics

Google Analytics 4 and Microsoft Clarity are both gated behind the cookie banner: no request is made and no cookie is written until the visitor accepts. Consent can be withdrawn again from the footer, which purges the analytics cookies it had set, and GA loads only in production so local development never pollutes the property.

Technical SEO

I audited the finished site, scored it at 57 out of 100, and worked the findings down. Canonicals were added across the site; a per-route og:url replaced the single URL that had been repeated on all twenty-four pages; og:image, previously absent everywhere, is now generated from the brand mark. Structured data became a proper @graph with a stable organisation identity — EducationalOrganization, WebSite, BreadcrumbList, ContactPage, Course with hasCourseInstance, and BlogPosting. H1s were realigned to the keywords each page actually targets without changing how any of them look. AVIF output, a 31-day image cache, six security headers, an honest sitemap, an /llms.txt for AI crawlers and IndexNow submission finished the pass.

Tech Stack & Architecture

Next.js 16 with the App Router, React 19, TypeScript and Tailwind CSS v4, rendered as fully static pages. Sanity supplies the content layer through next-sanity and Portable Text, with an embedded Studio and a webhook-driven revalidation route so editors see their changes without waiting for a redeploy.

The site is French-first with the architecture left ready for English, and every trust component — trainers, testimonials, clients, accreditations, statistics — is built but renders only once there is real content behind it.

Impact

SKEP Academy went from no digital presence at all to a complete self-serve lead channel: twelve documented specialities, a blog for organic reach, a dedicated route for corporate training, and a Studio the academy can operate without a developer in the loop.

The discipline that mattered most was shipping nothing invented. Sections that depended on facts only the client could supply — real trainer profiles, testimonials, certifications, contact details — were built and left dormant rather than filled with placeholder credibility, so everything the site claims about the academy is true.