Nava University (nava.edu.sa) is a Saudi higher education institution offering undergraduate and postgraduate programmes. The project came through HKS, working in collaboration with MRM — MRM handled the design and provided the Figma files, HKS managed the client relationship and technical delivery.
The Brief
MRM's design team provided a Figma file with a fully specified homepage widget — layout, typography, spacing, component states, and responsive behaviour all defined. My role was clean implementation inside the client's existing WordPress environment using Elementor, without touching or breaking the surrounding theme structure.
What I Built
Translated the MRM Figma designs into a production-ready Elementor widget on the Nava homepage. This involved writing custom CSS to match the design system exactly — fonts, colours, spacing, hover states — since Elementor's default controls couldn't cover the full spec. Built and tested across desktop, tablet, and mobile breakpoints. Coordinated with both the HKS and MRM teams on review cycles and incorporated feedback until sign-off.
The work required reading an existing WordPress theme carefully to avoid conflicts, scoping all custom styles correctly, and delivering something that felt native to the site rather than bolted on.
Stack
WordPress · Elementor · Figma · CSS · PHP
Context
This was part of the same HKS contract engagement where I built Kinder Middle East's "Back to School" and Ramadan campaigns — the same workflow of Figma handoff to pixel-accurate production build, applied to the education sector.
Outcome
Widget shipped to production on nava.edu.sa. Pixel-accurate to MRM's Figma spec, fully responsive, zero theme conflicts, delivered within the sprint timeline.
Figma-to-WordPress implementation of a custom homepage widget for Nava University (nava.edu.sa), built with Elementor during a contract engagement at HKS.