Pixerts home
Request a proposal

Steel Manufacturing Website Design for a Light Steel Keel Systems – Case Study

Back to case study

Company

DXL Steel

Category

Live view

Visit website

Timelines

04 Weeks

Year

2026

Service we provided

UX Design
Development
SEO & AEO
manufacturing website ux/ui design case study

Project Overview

For structural steel manufacturers, a website needs to communicate technical product information while helping buyers quickly understand which products fit their projects.

Pixerts redesigned the website for a manufacturer of Light Steel Keel systems, creating a more structured digital experience for architects, structural engineers, contractors, and construction professionals. The goal was to simplify a complex product catalog while making specifications, product options, manufacturing capabilities, and product discovery easier to navigate.

Buyer Requirements

The website needed to support buyers who evaluate steel framing and structural products based on technical specifications, dimensions, applications, and product configurations.

Product Discovery

Buyers needed a simple way to explore product categories based on their construction requirements.

Technical Specifications

Users needed clear access to dimensions, sizes, hole patterns, spacing, and other product-specific specifications.

Product Configuration

The interface needed to allow users to select product options and understand the resulting specification without unnecessary page refreshes.

The Challenges

Designing a B2B steel manufacturing website requires more than presenting products in a standard catalog. The interface needed to handle technical data while keeping the actual steel products visually prominent.

Complex Product Data

Different steel products required different specification logic. Standard fields could not be applied consistently across every product type.

Conditional Specifications

Some product details depended on user selections. For example, additional perforation information needed to appear only when a perforated stud was selected.

Visual Hierarchy

Specification-heavy interfaces risked pushing the actual product image into the background. The product itself needed to remain the primary visual focus.

The Solutions

Pixerts developed a logic-first UX/UI system designed around how construction professionals research and evaluate structural steel products.

Open 3-Column Product Layout

We created an open product page structure with the product visual on the left, specification builder in the center, and a dynamic specification card on the right.

Smart Product Configuration

Conditional interactions allow relevant specifications to appear based on the selected product options, keeping the interface focused and easier to use.

Four-Pillar Product Hub

We replaced a cluttered product grid with four clear entry points: Drywall, Ceiling, Clips, and Custom. This gives visitors a faster route into the product category relevant to their project.

Style Guide

The visual direction was created to communicate structural strength, manufacturing precision, and technical reliability. Typography, spacing, colors, buttons, cards, forms, and specification elements were developed as a consistent UI system. Product imagery remains a central visual element, supported by clean layouts and strong information hierarchy. The interface uses an industrial B2B character while keeping technical product information easy to scan. Together, the system creates a scalable visual foundation for steel products, specifications, configurations, and future product categories.

What We Delivered

The project turned a technically complex steel product catalog into a more structured digital product experience.

4

Core product categories organized

3-Column

Product detail experience

Dynamic

Specification configuration

04 Weeks

UX/UI design, development, and optimization

The Work & Visual

Homepage

An inituative homepage for navigate and find the right product easily.

Product Hub

The four-pillar navigation separates products into Drywall, Ceiling, Clips, and Custom categories, giving construction professionals a clearer starting point.

Product Detail Page

A three-column product experience keeps the product image, specification builder, and live specification summary visible together, helping users evaluate products more efficiently.

Manufacturing Capability

Dedicated sections communicate the manufacturer's production capabilities, including cold-roll forming, CNC precision, and large-scale factory output.

Responsive Experience

The interface was structured to maintain clear product information, navigation, specifications, and visual hierarchy across different screen sizes.

The Impact

The redesigned experience gives the steel manufacturer a clearer way to present complex structural products and technical specifications. Instead of forcing every product into the same template, the new UX adapts to different product requirements while maintaining a consistent visual system.

+210%

Boost in AEO & SEO Visibility

3×

Increase in User Engagement Rate

−65%

Drop in Unqualified Inquiries

Easier Product Discovery

The four-pillar product structure helps architects, engineers, and contractors reach relevant product categories faster.

Clearer Specifications

Product-specific data is presented through structured interfaces that make technical information easier to review.

Stronger Positioning

Dedicated manufacturing sections communicate production capabilities and reinforce the company's role as a structural steel manufacturer.

A Digital Experience Built for Structural Steel

Pixerts combined steel manufacturing UX/UI design, product information architecture, conditional interactions, and B2B web development to create a clearer experience for professionals researching Light Steel Keel systems.

Build your website now
We Chat QR Code