Empire Metal Products Website Case Study

Four key screens: homepage proof, company context, service routing, and the resources hub for forms, references, and contractor tools.

Web Design UX Content Performance Resources Hub

Overview

A fabrication shop website built around the way contractors and facility buyers actually use a shop site: verify capability fast, find the right service path, get a form or reference, and make contact without digging.

The old trap for this kind of site is brochure thinking: vague capability claims, stock-like copy, and a contact page doing too much work. This rebuild puts the useful things closer to the surface: real job photos, service categories, quote paths, resource links, and mobile layouts that still make sense from a truck or jobsite.

The information architecture separates the shop's work into recognizable lanes: HVAC sheet metal, curbs and adapters, custom fabrication, delivery, and resources. Each page is written to answer buyer questions before the phone call: what the shop does, what kind of work fits, what to send, and how to take the next step.

The Resources hub is the functional shift. Instead of burying order forms, submittals, and calculators behind counter calls, the site gives contractors direct access to routine documents and tools. That makes the website part of the shop workflow, not just a digital sign.

Problem

Real work, service fit, and routine documents were not surfaced clearly enough for busy contractors.

Solution

Rebuild the structure around project proof, service routing, mobile field use, quote flow, and a self-serve resources section.

This is not a brochure site. It is a working extension of the shop floor and the front counter.

At a Glance

Client

Empire Metal Products

Role

Design · UX · Copy · Build

Stack

HTML/CSS/JS · JSON-LD · Formspree

Focus

Speed · clarity · self-serve resources

Audience

Contractors · estimators · field crews · facility buyers

URL

empiremetalproducts.com ↗

Why It Matters

For a fabrication shop, the website is often the first prequalification step. A contractor does not need a poetic brand story. They need to know whether the shop can build the thing, how to ask for it, and whether the company looks organized enough to trust with a real job.

The page structure has to reduce uncertainty before the first call: show work, route visitors to the right service, make quote requests obvious, and keep common documents reachable when someone is already in the field.

What Changed

Real project imagery moved into the front of the experience so capability is visible before the copy has to argue.
Services were split into buyer-recognizable categories instead of one broad "we do fabrication" bucket.
Quote/contact paths were repeated where intent is highest, not saved for the footer.
Resources were grouped into a self-serve section for forms, references, and tools.
Static HTML/CSS/JS kept the site fast, portable, and easy to host without a heavy CMS stack.

Implementation Details

Information Architecture

The navigation is built around how people ask for shop work: services, resources, contact, and proof. The point is to reduce "where do I click?" time for contractors who already know what they need.

Structured Data

JSON-LD was added where it helps search engines understand the business, pages, breadcrumbs, and service context without relying only on visible copy.

Form Flow

Formspree handles contact and quote intake without requiring a custom backend. That keeps the site simple while still giving visitors a direct action path.

Static Build

The site uses plain HTML, CSS, and JavaScript so the pages stay fast, understandable, and easy to maintain for a small business site that does not need application complexity.

What The Screens Show

Homepage

The homepage sets the decision path: show the shop, show real work, move visitors toward services or a quote request, and avoid making the hero area carry the whole site.

About

The about screen gives context without turning into a biography. It supports trust by explaining standards, shop character, and why the company has earned repeat work.

Services

The services screen breaks work into scannable categories so a contractor can tell whether Empire fits the job before reaching out.

Resources

The resources screen groups order forms, submittals, and calculators so the site can answer routine needs without adding another phone call.

What I Built Into It

Real-Work First

The site shows real jobs and recognizable fabrication categories before asking visitors to trust the language.

Field-First UX

Large tap targets, short sections, readable cards, and repeated action paths make the site usable from a phone, not just from an office desktop.

Resources Hub

Routine documents and references live in one obvious place so the site can support contractors after the first visit.

Stronger Positioning

The copy is direct and shop-literate: less marketing gloss, more evidence that the company understands fabrication work and customer urgency.

My Take

Shops do not need fancy language. They need pages that respect the buyer's time. A good fabrication website should answer three questions quickly: can you make this, have you made things like it, and what should I send you next?

Show the work early.
Keep the copy specific to the services and constraints.
Make forms, resources, and contact paths easy to find.

What I'd Do Next

Add more service-page case studies with tighter photo sets and short job writeups.
Expand the resources section with more calculators and shop-useful references.
Build a lightweight update flow so new jobs and galleries can be added faster.
Track what pages people use most, then keep sharpening those first.

Project Outcome

The result is a site that has a job beyond looking current. It shows the shop's work, separates the services, gives contractors a resources path, and keeps contact/quote actions close to the moments where visitors are ready to move.

That is the win here: better presentation, fewer unnecessary calls for routine information, and a website that behaves like part of the business instead of a detached brochure.

Need something like this?

Let's build a clean, fast site that actually gets used.

I design for the field - clear paths to action, real-work proof, and tools your team will actually use. If you are a shop, contractor, or small manufacturer, I can help.

See the live site ↗ Start a project

Contact

Tell me what you're building, fixing, or trying to figure out. I'll read it and get back to you.