EcoPro México
EcoPro es un fabricante 100% mexicano de tarimas industriales y mobiliario urbano fabricados en HDPE reciclado de alta calidad. El proyecto consistió en diseñar y desarrollar desde cero su sitio corporativo en WordPress con Divi, resolviendo un catálogo complejo con dos audiencias muy distintas: la industria pesada y el urbanismo municipal.
El trabajo incluyó arquitectura de información, diseño UI completo en Figma, maquetado en Divi, implementación bilingüe (ES/EN) y optimización SEO on-page. El sitio fue entregado en aproximadamente 45 días.
Etapas del Proyecto
"Un catálogo industrial con dos universos de producto completamente distintos, presentado como una sola experiencia coherente."
EcoPro opera en dos mundos muy diferentes: la industria pesada —con tarimas técnicas para almacenes, plantas y logística— y el urbanismo —con mobiliario para plazas, hoteles y parques infantiles—. El reto era construir una arquitectura de navegación que permitiera a cada tipo de usuario encontrar su solución sin fricción, sin que el sitio se sintiera fragmentado o sobrecargado.
La solución fue diseñar una estructura de menú organizada por audiencia y caso de uso, apoyada por una página de inicio que actúa como distribuidor entre ambas líneas de producto y comunica el diferencial sustentable de la marca.
Cómo lo
desarrollé
Un proceso en seis etapas que priorizó la estructura antes que el visual, y el sistema antes que la página individual.
Relevamiento y definición de audiencias
Reuniones con el cliente para mapear los dos perfiles compradores: el responsable de logística industrial y el arquitecto o funcionario municipal. Se identificaron sus necesidades, criterios de decisión y lenguaje técnico propio de cada sector.
Arquitectura de información
Diseño del mapa de sitio completo: jerarquía de productos, páginas de solución por industria, páginas de expertise y estructura bilingüe. El menú de navegación fue el artefacto más trabajado de esta etapa y requirió varias rondas de revisión con el cliente.
Sistema de diseño UI en Figma
Construcción de la paleta (verde institucional + neutros), tipografía, componentes base (cards de producto, secciones de beneficios, CTAs) y guía de estilo. El sistema se documentó para garantizar consistencia en todas las páginas del sitio.
Maquetado en WordPress + Divi
Desarrollo página por página en Divi, usando Global Presets como sistema de tokens para mantener coherencia visual. Se configuraron módulos reutilizables para los distintos tipos de página: producto, solución por industria y página institucional.
SEO on-page y performance
Definición de H1, meta descriptions y estructura de encabezados para cada página. Optimización de imágenes, configuración de lazy loading y ajuste de plugins de caché (WP Rocket) para mejorar Core Web Vitals.
Implementación bilingüe (ES / EN)
Configuración de WPML con URLs diferenciadas por idioma y adaptación del contenido para la versión en inglés, apuntando al mercado B2B internacional que EcoPro busca alcanzar.
Herramientas & Stack
WordPress + Divi como base de desarrollo, con Figma para el diseño UI y un stack de plugins orientado a performance y SEO.
Home page — versión desktop
Arquitectura del menú principal
Página de categoría — Tarimas Industriales
Vista mobile — responsive
Decisiones de Diseño
Las tres elecciones que más impactaron en el resultado final del proyecto.
Menú organizado por línea de negocio, no por tipo de producto
Un gerente de logística y un arquitecto municipal no navegan igual. Separar el menú en Industria y Urbanismo como ejes principales redujo la fricción de encontrar el producto correcto y acortó el tiempo hasta el CTA de cotización.
Fotografía como protagonista, diseño en rol de soporte
Los productos de EcoPro son su diferencial visual más fuerte. El sistema de UI se construyó para que las imágenes de producto tengan el mayor peso visual posible, usando tipografía y color como marco, no como protagonistas.
Estructura de encabezados definida en diseño, no en desarrollo
Los H1, H2 y meta descriptions se definieron en la etapa de diseño en Figma, no como tarea final. Esto permitió que cada página tuviera una intención de búsqueda clara desde el inicio, sin reescribir contenido al final del proyecto.
Lo que
aprendí
Un proyecto B2B con catálogo complejo enseña más sobre estructura que sobre estética.
La arquitectura de información es la decisión de diseño más importante
En proyectos B2B con catálogos complejos, el mayor impacto no está en el visual sino en cómo se organiza la información. El mapa de sitio y la estructura del menú tomaron más tiempo que el diseño de cualquier página individual, y fue la decisión que más afectó la experiencia final.
Divi necesita un sistema propio antes de abrir el builder
Trabajar en Divi sin un sistema de diseño definido previamente genera inconsistencias difíciles de corregir en producción. Usar Figma como sistema de diseño y los Global Presets de Divi como tokens fue la decisión técnica que más ahorró tiempo de revisión.
El SEO on-page es parte del diseño de contenido, no un paso final
Integrar la estructura de encabezados y la intención de búsqueda en la etapa de diseño (no como tarea de cierre) permite que el contenido sea coherente desde el primer día. En este proyecto evitó reescribir copy en más de 15 páginas al final del desarrollo.