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. Their existing website made it difficult for users to find products and understand how to initiate a quotation request, the site’s single most important conversion action.

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 previous website lacked a clear information hierarchy, making it difficult for users to find products and understand how to request a quotation. This resulted in friction throughout the user journey and reduced overall usability.

Goals

Simplify navigation and information architecture
Improve product exploration and discoverability
Clearly highlight quotation-related calls to action
Design a clean and professional interface aligned with the industrial sector
Implement the design ensuring responsiveness, consistency, and performance

Research

Research was conducted primarily through competitive benchmarking of similar steel and industrial websites to identify common ux patterns, navigation structures, and quotation flows. Benchmarking focused specifically on industrial B2B sites where the primary user intent is product lookup and quotation request a conversion pattern distinct from consumer e-commerce. Key patterns identified: persistent quotation CTAs at every scroll depth, filterable product catalogs, and location/branch information as trust signals for industrial buyers operating regionally.

Key insights

Clear product categorization improves usability
Quotation requests should be treated as a primary action
Familiar navigation patterns reduce friction
Structured content improves readability and scannability

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 include Acerotam’s own sales team, who use the site as a reference 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
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/dev loop
Pixel-accurate delivery: he 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 redesigned Acerotam website delivers a conversion-focused experience built around the industrial buyer’s primary intent: find a product, assess its specifications, and request a quotation with minimal steps. By treating the quotation request as the site’s primary conversion action — surfaced persistently throughout all navigation, the redesign removes the ambiguity that caused users to exit before converting. The full HTML, CSS, and JavaScript implementation ensured pixel-accurate translation of the design to production, responsive across all devices. End-to-end ownership of design and development delivered a coherent product without the quality loss typical of design-to-development handoffs.