UI Design for Metal Website
An industrial-strength site for a metal supplier — engineered for clarity, built for trust.
[ N° 02 // Visuals ]
Inside the work.
Drag, swipe or use the arrows to scrub through the project's key frames.
01 / 00
[ N° 03 // The Story ]
From brief
to outcome.
Overview
Heavy industry sites usually feel like spreadsheets. We restructured the IA, tightened the type, and used a focused palette to make the catalog and quote process effortless.
Problem
The supplier's existing site dumped a 400-SKU catalog into a single endless table. Procurement buyers couldn't find an alloy, couldn't compare finishes, and had to phone the office for every quote — costing the sales team hours of repetitive triage daily.
Challenge
Hundreds of SKUs across categories, alloys and finishes. The navigation needed to be both deep and discoverable.
Outcome
A clear, modular UI ready for CMS integration — with a request-quote flow that respects buyers' time.
[ N° 04 // Process ]
Problem
to pixel.
Every project moves through the same spine — research, wireframes, mockups, ship — but the weight on each step changes with the brief.
- 01 · Research01 / 04
Buyer interviews
Sat in on 5 sales calls and interviewed 3 procurement buyers. Mapped the real decision journey: alloy → form → finish → tolerance → quantity → quote. Found that 80% of calls were buyers asking questions the site could've answered.
- 02 · IA02 / 04
Information architecture
Restructured the catalog into a 3-level taxonomy with faceted filtering. Card-sorted SKU attributes with two buyers and the sales lead to validate the hierarchy before any UI was drawn.
- 03 · Wireframe03 / 04
Catalog & quote flow
Wireframed the catalog list, product detail, and a 4-step quote builder (specs → quantity → contact → review). Designed for keyboard-driven use because most buyers work in spreadsheets, not on touchscreens.
- 04 · Mockup04 / 04
Industrial UI
Designed a high-density, high-contrast UI with a focused palette, monospaced specs, and clear print-friendly quote summaries. Documented every state (empty, loading, error, success) for handoff.
