← Back to portfolio

0-to-1 product · client engagement

HikmahEdu

An education brand and digital platform I led from initial brand direction through product structure, user experience, visual design, and a reusable design system — translating an education-business concept into a cohesive, launch-ready product. Built for a client.

Executive summary

HikmahEdu needed to exist as a credible, coherent institution online — not just a website. I led the 0-to-1 build: brand positioning and identity, product and information architecture, UX and visual design, a design system that bridged brand and code, and the platform itself. The distinctive work is the design-to-engineering system that turned brand decisions into maintainable interface primitives.

My role

Led the full 0-to-1 as designer and engineer for the client: product ideation, brand development, UX architecture, visual direction, design-system design, technical decisions, application development, and launch. I was not handed finalized Figma — I produced the direction and carried it through to a shipped platform.

Constraints

  • An ambiguous concept with no prior brand or product
  • Multiple content types and audiences (learners, educators, parents, community)
  • Editorial flexibility vs. visual consistency in tension
  • Designed for both visitors and content administrators
  • SEO without compromising design
  • An achievable initial release with a deferrable roadmap (e.g. membership, monetization)

Architecture

Content & Administrative Layer (CMS)
        ↓
Content Models & APIs
        ↓
Application & Rendering Layer
        ↓
Reusable Design System (tokens → components)
        ↓
Public Website, Profiles & Member Experiences
        ↓
Analytics, SEO & External Integrations

A CMS-driven content layer feeds typed content models through a rendering layer built on a reusable design system. The system separates content configuration from presentation, so non-technical authors can publish without engineering involvement.

Design-to-engineering system (the distinctive part)

The most valuable work was bridging brand and code. Brand decisions were encoded as a token layer that downstream components consumed directly:

  • Design tokens — colour variables, type scales, spacing rules
  • Layout primitives — responsive, composable building blocks
  • Reusable components & content patterns — consistent across every page type
  • Responsive behaviour & accessibility constraints — baked into primitives, not re-derived per page
  • Authoring rules — so content editors work within the system rather than against it

This is what keeps a brand-driven site from becoming unmaintainable — a flexible visual system expressed as deterministic engineering primitives.

Key decisions

Context: Editorial flexibility and visual consistency pull in opposite directions.

Decision: A token-and-primitive design system: authors compose within constrained, on-brand components rather than free-form layouts.

Tradeoff: Less per-page creative freedom, in exchange for a site that stays coherent and maintainable as it grows.

Context: The site must serve both visitors and content administrators.

Decision: A CMS-driven content-model layer that separates content configuration from application code.

Tradeoff: Up-front modeling investment, in exchange for authors publishing without engineering.

Context: Everything can't ship at launch.

Decision: A defined launch scope with membership and monetization deferred to a roadmap, keeping the first release achievable.

Tradeoff: Deferred revenue features, in exchange for a credible, shoppable launch sooner.

Reliability & quality

  • Reusable design system enforcing accessibility constraints at the primitive level
  • Responsive-image handling and performance-conscious rendering
  • SEO and metadata architecture without compromising design
  • Content-model design that prevents the site from becoming hard to maintain
  • Deployment and ongoing content-update workflow for the client

Leadership & ownership

Carried an ambiguous idea through implementation: product ideation, business requirements, brand development, UX architecture, visual direction, technical decisions, application development, content-system design, deployment, and stakeholder communication — communicating fluently across technical and non-technical concerns.

Results

A cohesive, launch-ready brand and platform where brand strategy became design tokens, design tokens became reusable components, and those components became a maintainable, CMS-driven site — demonstrating 0-to-1 product ownership, design engineering, and product strategy end to end.

Retrospective

  • What I'd change: formalize the design-system documentation earlier — the tokens were right, but authoring rules matured after launch.
  • Intentionally deferred: membership and monetization flows, deliberately scoped out of v1.
  • Next version: personalized profile experiences and richer community capabilities on top of the existing content model.

Proof

  • Live site — hikmahedu.com
  • Brand identity, design system, and architecture documented above
  • Final desktop and mobile screens available on request

Want to talk?

I'm open to senior product-engineering and technical-lead roles.

Get in touch