Case Study — Maritime Research & Technology
Clean Maritime Research Hub
A central resource website for the UK National Clean Maritime Research Hub — built precisely from Figma designs by Kit Studio, with custom animations and a CMS that lets the client easily manage all content.
Role
Developer
Client
Clean Maritime Research Hub
Stack
WordPress · Custom Theme
Services
Front-end Dev · CMS · Animation
Project Gallery
Overview
About the project
This website was built for the UK National Clean Maritime Research Hub as a central point for the organisation to host all their resources and information. Figma designs were provided by Kit Studio, and I precisely translated the designs into a fully functional website whilst ensuring the client could easily update all content on the site.
Designs by Kit Studio. My role was to implement the designs with pixel-perfect accuracy, build custom animations that brought the interface to life, and configure a flexible CMS so the client has full control over their content going forward.
Front-end Development · WordPress CMS · Custom Animation · Contact Forms · Figma to Code
Challenge & Approach
Bringing the designs to life.
The Challenge
Precision implementation
Working from detailed Figma designs provided by Kit Studio, the goal was pixel-perfect implementation — every spacing, animation, and interaction needed to match the intended design whilst being built on a CMS that the client could maintain independently without developer involvement.
The Approach
CMS-first build
WordPress was configured so that every section of the site — resources, news, team members, contact details — is editable through a straightforward admin interface. Custom animations were coded to match the motion design specified in the Figma files, and contact forms were integrated to connect visitors with the Hub directly.
Tech & Build
WordPress platform
✦ WordPress CMS & custom theme
✦ Custom animations (CSS & JS)
✦ Contact forms integration
✦ Easy-to-update CMS for client
Key Findings
What worked, what I’d change.
What Worked Well
Building directly from Kit Studio’s Figma designs provided clear direction and allowed for a fast, focused build. The CMS configuration worked well — the client was able to take ownership of the content immediately after handover without needing ongoing developer support.
What I’d Do Differently
Earlier collaboration with Kit Studio during the animation phase would have streamlined the handover between design and development. Some motion specs required interpretation which added iteration time — a shared motion brief at the start of the project would have made that process smoother.
Interested in working together?
Book a free discovery call or browse more of my work below.