QNP Group — Website & CMS
Website Design & Development
QNP Group
Working proposal
UX/UI, frontend & CMS planning
QNP / FIELD NOTES
Fully customed frontend + backend + custom features (beta testing).
Powered by NextJS and PayloadCMS
Overview
One system, from interface to management.
The website and its Payload admin were designed as a connected product, bringing content, products, media, forms and site management into one tailored interface.
The public website and the tools used to manage it were treated as one connected digital system rather than two separate experiences.
.webp)
The CMS as a design decision
The interface was only the beginning.
The project extended beyond the front end into the tools used to build, edit, organise and maintain the website.
The following system moves from the public experience through reusable blocks, nested layouts, styling, forms, redirects and media management.
Give the business one coherent digital system.
The public website, login experience and customised Payload admin share the same QNP visual language across both customer-facing and internal interfaces.
.webp)
Edit the structure and see the result.
Pages are assembled from configurable content blocks while Live Preview shows how those changes translate directly into the website.
.webp)
Build pages from reusable components.
A library of purpose-built blocks gives editors repeatable sections for heroes, content, forms, cards, sliders, testimonials and other page structures.
.webp)
Make content flexible without rebuilding it.
Blocks can be reordered, duplicated and nested, giving editors control over page composition while retaining the underlying component structure.
.webp)
Let components work inside components.
Nested card structures allow content to be repeated and organised within larger blocks, supporting more flexible layouts from the same editing system.
.webp)
Expose variation without duplicating components.
Individual blocks can support style variations, class overrides and component-level settings, allowing the same structure to adapt to different presentation needs.
.webp)
Change production styles without touching the global system.
Local Tailwind classes, component style data and custom CSS provide targeted overrides while keeping broader application styles isolated.
.webp)
Keep navigation changes manageable.
Redirects are managed directly inside Payload, allowing internal destinations or custom URLs to be configured from the admin interface.
.webp)
Build forms around the actual workflow.
The quote experience combines reusable form blocks with structured fields for product requirements, uploads and customer details.
.webp)
Manage the form as structured content.
Fields, labels, defaults and validation requirements are configured through the admin, separating the form's structure from its front-end presentation.
.webp)
Make image preparation part of the CMS.
The media workflow includes WebP conversion, automatic resizing and an image editor for cropping and focal-point adjustment directly inside Payload.
Payload MCP · AI Assistant
Manage the CMS by simply asking.
.webp)
I integrated the Payload MCP plugin and developed an AI assistant that can interact directly with the CMS, allowing content updates and ad hoc administrative tasks to be executed through natural conversation rather than manual intervention.
The assistant operates within defined Payload MCP permissions and is being explored as a faster way to search, create, update and manage content across the application. This functionality is currently in testing and remains in beta while its capabilities, safeguards and workflows are refined.
WYSIWYG · Visual Editing
Edit the website where you can actually see it.
.webp)
I am experimenting integration with a visual editor that brings a what-you-see-is-what-you-get workflow directly into the website, allowing individual elements to be selected and edited within the rendered interface rather than through traditional CMS fields alone.
Changes can be reviewed before being applied back to the underlying source, creating a more direct connection between visual editing and the application itself. The editor is currently in testing, is not fully implemented, and remains an active work in progress.
The website and the system behind it were designed as one product.
The QNP project brought interface design, frontend development, content modelling and day-to-day administration into one connected system instead of treating the CMS as something separate from the finished website.
Related Projects
Loading archive items
Explore HZ Designs & Project Archives - A curated collection of design projects, case studies, and creative work.
Explore HZ Designs & Project Archives - A curated collection of design projects, case studies, and creative work.
Explore HZ Designs & Project Archives - A curated collection of design projects, case studies, and creative work.