Acerotam

Web Redesign UI/UX & Web Design

April, 2024

Role/Services

Web Design UI/UX

Designed & Built

HTML5 CSS3 JavaScript Figma Responsive Web Development

Client

Acerotam, Designed at PROINTERNET

Category & Year

Project Overview

Acerotam is a steel products company serving industrial buyers across northeastern Mexico. As a returning client, Acerotam brought two structural problems to this redesign: a large, unstructured product catalog that made it difficult for buyers to find what they needed, and the complete absence of a quotation channel. Even users who found the right product had no way to request pricing without leaving the site.

I led the full redesign and front-end development, covering UX strategy, information architecture, interface design, and implementation in HTML, CSS, and JavaScript. Owning the complete process from first wireframe to shipped code meant every design decision was validated against technical feasibility before delivery, with zero handoff friction.

Problem

The catalog had grown large and unstructured over time, organized around internal inventory logic rather than how industrial buyers actually search for products: by application and use case. This made product discovery slow and frustrating. Compounding this, the site had no quotation channel at all. A buyer who successfully found a product still had no formal way to request pricing, meaning every potential lead had to go through manual contact methods or was lost entirely.

Goals

Restructure the product catalog around buyer intent, not internal inventory categories
Introduce a quotation channel where none existed
Make the quotation CTA persistent and unambiguous throughout the site
Design a professional interface aligned with industrial B2B expectations
Implement the design ensuring responsiveness, consistency, and performance

Research

Competitive benchmarking of other industrial suppliers revealed two consistent gaps in Acerotam's site: competitors organized their catalogs around buyer intent, by application or industry use case, rather than internal inventory logic, and most had some form of direct quotation or RFQ channel, a standard expectation in industrial B2B that Acerotam's site didn't meet. These findings directly shaped the two priorities for this redesign: restructuring the catalog's information architecture around how buyers search, and introducing a quotation channel Acerotam previously lacked entirely.

Key insights

Buyers think in terms of application, "what do I need this for," not in terms of how the warehouse organizes inventory. Aligning the catalog to that mental model was the single highest-leverage change available.
A missing quotation channel doesn't just lose leads. It silently caps the ceiling on how much traffic can convert at all, regardless of how good the rest of the site is.
Designing for two audiences at once (self-service buyers and Acerotam's own sales team using the site as a reference) meant category and product pages had to work as both a discovery tool and a sales-support tool.

User profile

Primary users are industrial buyers and procurement professionals visiting with clear intent: find a specific product, verify specifications, and request a quotation. Secondary users, identified through the client brief, include Acerotam's own sales team, who reference the site during client calls. Both profiles share the same core need: fast access to accurate product information with minimal navigation friction.

Main user flow

The experience guides users to:

Find the product they need
Review relevant product information
Request a quotation with minimal steps

UX & UI decisions

Content organized into clear and logical categories aligned with buyer intent
Strong visual hierarchy to guide key actions
Consistent navigation and call-to-action placement
Sober color palette and readable typography aligned with the industry
Structured layouts to support technical content

Design + Development

One of the distinctive aspects of this project was owning both design and development end to end. Working across the full process, from Figma to shipped code, produced concrete advantages:

No handoff friction: design decisions translated directly to implementation without interpretation loss
Real-time feasibility validation: when a UI decision proved technically complex, it was adjusted immediately without a design and development loop
Pixel-accurate delivery: the same person who designed and built the product ensured consistency throughout
Performance-aware design: responsiveness and load time were considered as design constraints from the start, not afterthoughts

Outcome

The redesign restructured the product catalog around how industrial buyers actually search, reducing the steps and decisions required to locate a product. It also introduced a quotation channel that didn't previously exist, giving Acerotam a direct path from product discovery to a qualified sales lead for the first time. By treating the quotation request as the site's primary conversion action, surfaced persistently throughout navigation, the redesign was built to remove ambiguity at the point where buyers had previously been most likely to drop off. The full HTML, CSS, and JavaScript implementation ensured pixel-accurate translation to production, responsive across all devices.