UI/UX Design & Development 2026

SLIBS | Industrial Safety & Quote Request Platform

A precision-engineered B2B website for SLIBS — a specialist lithium-ion safety and controlled storage company based in West Sussex, England. Designed in Figma and built with WordPress and Elementor Pro, including a custom CPT-to-quote form solution that lets buyers add products directly to a quote request without a shopping cart.

Figma UI/UX Design

Custom Quote Request System

CPT Product Architecture

Platform WordPress + Elementor Pro

Project Type UI/UX Design (Figma) + Custom Development

Year 2026

Category B2B / Technology

The Project

What we built and why

SLIBS is a specialist engineering company based in Chichester, West Sussex, focused on the safe storage, containment, and management of lithium-ion powered tools and equipment in high-risk professional environments. Their flagship product — SLIDEX — is a secure sliding van drawer system with SwingLock technology, rated to 1 tonne UDL on the top deck.

SLIBS is not an e-commerce business. Buyers don’t add products to a cart and check out. They configure what they need and request a quote — a completely different buying journey that required a completely custom solution.

We designed the full site in Figma and built it in WordPress with Elementor Pro. The most technically interesting part was the quote request system: when a visitor clicks “Add to Quote” on a product or variant, they are redirected to the contact page where the Elementor form is dynamically pre-populated with that CPT product’s details — no WooCommerce, no cart, no checkout.

Stack & Tools

Technologies used

WordPress CMSElementor ProFigma (UI/UX Design)Custom Post Types (Products)Custom JavaScript (Dynamic Form Population)Elementor FormsURL Parameter HandlingACF ProMobile-First Responsive Design

Visual Work

The design across all devices

SLIBS | Industrial Safety & Quote Request Platform desktop view

Desktop — 1440px

SLIBS | Industrial Safety & Quote Request Platform tablet view

Tablet — 768px

SLIBS | Industrial Safety & Quote Request Platform mobile view

Mobile — 375px

Design Process

How we approached it

SLIBS needed a design language that matched their engineering-led positioning — precise, minimal, and credible. No lifestyle photography, no decorative elements. The site uses technical spec data, clean typography, SVG illustrations, and a dark-accented professional palette to communicate that SLIBS is a serious industrial supplier, not a consumer brand.

We designed the full site in Figma: homepage, about, product archive, individual product pages (SLIDEX), contact, and product registration. Every section was scoped around the two primary conversion actions — requesting a quote and registering a product for warranty activation.

The product page was the centrepiece. SLIDEX has spec highlights, optional extras, a SwingLock feature callout, and multiple entry points to the quote request. The design needed to surface all of that clearly without overwhelming a professional buyer who knows exactly what they're looking for.

Development

Build highlights

Custom CPT-to-Quote Form System

Built a fully custom solution where clicking "Add to Quote" on any product or variant passes that CPT product's details as URL parameters to the contact page. A custom JavaScript handler reads those parameters on page load and dynamically pre-populates the Elementor form fields with the product name, reference number, and variant — giving the buyer a clean, pre-filled quote request without any e-commerce infrastructure.

Custom Post Type Product Architecture

Built a custom Products CPT with ACF fields for product name, MFG reference, spec highlights, dimensions, load ratings, optional extras, and product images. This gives SLIBS a clean, structured backend for managing their product catalogue independently as the range grows.

Figma to Elementor Precision Build

Every page was designed to full fidelity in Figma before development started. The engineering-led aesthetic — technical specs, SVG iconography, tight typographic hierarchy — required precise Elementor implementation with custom CSS throughout to achieve the design exactly.

Product Registration & Warranty System

Built a dedicated product registration page with an Elementor form collecting serial number, purchase date, retailer, and owner contact details — activating the 12-month warranty and lifetime key replacement service on submission.

Spec Highlights Architecture

Built a reusable spec display block for the SLIDEX product page surfacing top deck load rating (1 tonne UDL), drawer load rating (130kg UDL), and closed/open dimensions — structured via ACF fields so new products can use the same block without code changes.

Mobile-First Responsive Build

The SLIBS buyer is often a fleet manager, vehicle fitter, or operations lead who researches on mobile. Every page was built and tested mobile-first, with the product spec tables, quote CTA buttons, and navigation all performing cleanly at every screen size.

Problem Solving

Challenges & solutions

Challenge

Building a quote request flow without WooCommerce

SLIBS sells via quote, not direct checkout. Standard WooCommerce with a quote plugin would have added unnecessary complexity and imposed an e-commerce UX on a business that operates nothing like an online store.

Solution

Custom URL parameter system with Elementor form injection

We built a lightweight custom JavaScript solution. Each product and variant has an "Add to Quote" button that appends the product CPT data as URL parameters. On the contact page, a JavaScript handler fires on load, reads those parameters, and populates the Elementor form fields with the correct product details. The buyer arrives at a pre-filled quote form in one click, with no cart, no checkout, and no WooCommerce dependency.

Challenge

Communicating a technical industrial product to a professional

SLIDEX buyers are fleet managers, vehicle outfitters, and industrial operators. They need precise specification data — load ratings, dimensions, locking mechanism details — presented clearly and quickly. A generic product page layout would have buried the specs the buyer actually needs.

Solution

Engineering-led page architecture with specs at the forefront

We structured the SLIDEX product page around the buyer's decision-making sequence: what it is, how it locks, key specs upfront, then optional extras and quote CTA. The spec highlights block surfaces the critical numbers — 1 tonne top deck, 130kg drawer, closed and open dimensions — before any marketing copy, because for this buyer, specs close the sale.

Outcome

Results & impact

SLIBS launched with a website that matches the precision of the products it sells. The custom quote request system gives buyers a frictionless path from product discovery to enquiry — one click on "Add to Quote" and they arrive at a pre-filled contact form, ready to submit. No cart abandonment, no checkout friction, no WooCommerce overhead.

The CPT product architecture means SLIBS can add new products and variants to the catalogue independently, and the quote system handles them automatically without any additional development.

Figma UI/UX Design

Custom Quote Request System

CPT Product Architecture

UK West Sussex Market

Takeaway

Final thoughts

SLIBS sells via quote, not checkout. A custom CPT-to-form solution replaced WooCommerce entirely and made the buyer journey faster and cleaner.

SLIBS is a strong example of building the right solution rather than the obvious one. The instinct would have been to install WooCommerce and a quote plugin. Instead we built a lightweight custom JavaScript system that does exactly what the business needs — passing product data from a CPT product page to a pre-filled Elementor form in one click. Simpler, faster, and completely tailored to how SLIBS actually sells.

Next Project

T-Room | Independent News Publishing Platform

View Case Study