Alfra®
Alfra es una marca líder en la industria de la manufactura con presencia en 14 países. Con un catálogo físico masivo de más de 300 productos de comunicación visual y organización, su presencia digital requería una arquitectura altamente escalable. Lideré el rediseño completo de su experiencia web, transformando un extenso catálogo físico en una vitrina digital intuitiva, ágil y totalmente responsivo.
Escalando un Catálogo Digital Complejo
Mi Rol: UI/UX & Diseñador Web
Colaboradores: Desarrollador y Project Manager
Responsabilidades: Investigación de usuarios y mercado, Arquitectura de Información, Diseño UI/UX y Prototipado Responsivo.
Herramientas: Adobe XD, Photoshop, Illustrator
Reto Principal
El sitio anterior de Alfra enfrentaba dos grandes obstáculos estructurales:
-
Escala del Catálogo: Gestionar más de 300 productos divididos en docenas de categorías hacía que la búsqueda y navegación fuera abrumadora sin un motor transaccional de e-commerce.
-
Audiencia Fragmentada: La plataforma debía atender de forma simultánea a tres perfiles totalmente distintos: compradores corporativos que buscaban adquisiciones al mayoreo, administradores escolares en fase de planeación, y consumidores finales buscando artículos para oficina o el hogar.
Objetivo
Construir una experiencia de usuario unificada que simplificara el inventario masivo en un catálogo digital ligero y fácil de explorar, guiando a cada tipo de usuario directamente hacia las soluciones que necesita.
Product Details View
Vista de Categorías
Tipo de Entorno
Micro-Animaciones
Investigación y Estrategia
-
Benchmark de Mercado: El análisis reveló que la competencia dependía de catálogos tradicionales, planos, sobrios y sobrecargados de texto.
-
Oportunidad de Diseño: Posicionar a Alfra como un referente moderno y dinámico en la industria mediante el uso estratégico del color, motion design con propósito y narrativa visual de alto impacto, sin perder la sobriedad técnica que exige un entorno corporativo.
Arquitectura de Información
Para lograr que la navegación entre más de 300 productos fuera ágil y sin fricciones, diseñé un sistema de navegación de doble vía:
-
Por Entorno de Uso: 6 casos de uso contextuales (Oficina, Hogar, Escuela, Sala de Juntas, Industria y Negocios).
-
Por Familia de Productos: Tipos de producto específicos (Pizarrones, Línea Infantil, Pizarrones Tecnológicos, Mobiliario, Mesas de Dibujo).
Diseño UI y Sistema Visual
-
Branding por Entornos: Asigné un icono y un código de color único a cada uno de los 6 entornos para reducir la carga cognitiva del usuario.
-
Microinteracciones: Integré animaciones fluidas para que la navegación a través de una base de datos corporativa tan amplia se sintiera ligera, moderna e interactiva.
Resultados e Impacto de Negocio
El rediseño fue un éxito rotundo tanto para la marca como para su red de distribuidores. Al modernizar la interfaz con microanimaciones fluidas y una paleta cromática alineada a los manuales de marca, la plataforma superó por completo la estética obsoleta de la competencia.
Estructuralmente, la nueva navegación de doble vía simplificó el descubrimiento de productos, permitiendo a los clientes potenciales encontrar especificaciones técnicas en segundos. Como resultado, los equipos comerciales a nivel global contaron con una herramienta mucho más ágil para presentar el catálogo, lo que generó un incremento significativo en la interacción de los usuarios y en las solicitudes de cotización digital.