Web Design / Art Direction / Motion Design / SEO Strategy
Empack — Un sistema digital escalable para un brand ecosystem multidisciplinario
Diseño de una arquitectura digital compartida para Empack, Troubadour y Walker: tres marcas independientes bajo la umbrella brand de Empack Graphics, conectadas por un mismo sistema de navegación y diferenciadas por su propia oferta comercial y expresión visual.
Cliente
Empack Graphics
Agencia
Canvas
Industria
Brand implementation, packaging y producción creativa
Ubicación
Monterrey, México
Año
2023
Duración
6 meses
Rol
UI & Motion Designer / SEO Strategy
Plataformas
Web / CMS
Herramientas
Figma / FigJam / After Effects
Alcance
Dirección de arte, web design, responsive UI, design system, arquitectura de información, investigación SEO bilingüe, prototipos interactivos y motion studies
Entregables
Investigación visual
Estrategia SEO y sitemap
Dirección de arte
Design system
Responsive interface design
Prototipos interactivos
Motion studies
Animaciones de presentación
Resumen del proyecto
Empack Graphics funciona como la umbrella brand de un ecosistema que reúne tres marcas complementarias: Empack (enfocada en brand implementation y packaging), Troubadour (especializada en creative services y producción escalable) y Walker (orientada a CGI y producción visual).
El reto de negocio no era simplemente diseñar tres sitios web, ni tampoco unificar a la fuerza empresas distintas en un corporativo genérico. El objetivo consistía en crear un sistema digital compartido capaz de comunicar la solidez del grupo y, al mismo tiempo, permitir que cada marca hablara con su propia voz a sus audiencias clave. La solución fue una infraestructura que conecta estrategia SEO, arquitectura de información, UI design y motion. Esta selección de portafolio se documenta principalmente a través de la experiencia construida para Empack e incluye una demostración visual de cómo el mismo framework se adapta a los creative services de Troubadour. Walker forma parte integral de la navegación y la estructura compartida del grupo, aunque no se ilustra con una pantalla individual en esta serie.
Una arquitectura conectada para tres marcas
Para que el usuario comprenda la magnitud del grupo sin desorientarse, la interfaz utiliza un encabezado de navegación compartido. Este elemento actúa como un hilo conductor que permite transitar sin fricción entre Empack, Troubadour y Walker, manteniendo visible la relación corporativa mientras cada marca despliega su propia personalidad en el contenido.
Empack: escala y capacidad de ejecución
La homepage de Empack se diseñó bajo una premisa comercial clara: proyectar capacidad operativa y solidez técnica ante marcas globales. El uso de una base oscura funciona como un escenario neutral de alto contraste que cede el protagonismo visual al color, la textura y los materiales de los proyectos de packaging. La tipografía a gran escala establece una jerarquía de lectura rápida y contundente.
Estructurar una oferta técnica y modular
La oferta de Empack abarca procesos complejos: producción gráfica, artwork, control de color, desarrollo estructural y preimpresión. El desafío en UX fue traducir un catálogo altamente técnico en un modelo de contenido modular, escaneable y visualmente intuitivo. La arquitectura guía al usuario desde un entendimiento general de los servicios hasta la consulta de capacidades técnicas específicas.
Responsive UI diseñado desde el sistema
Las versiones desktop y mobile no se abordaron como adaptaciones secundarias, sino como dos expresiones de un mismo ecosistema. El design system estableció reglas estrictas para grids, espaciados, variables tipográficas y comportamientos de componentes, garantizando que la experiencia mantenga su carácter premium y su claridad de lectura en cualquier tamaño de pantalla.
Motion design orientado al storytelling
El movimiento en la interfaz se aleja de lo meramente decorativo; se implementó como un recurso funcional para jerarquizar información, orientar la navegación y generar transiciones naturales entre secciones. Las animaciones aportan dinamismo y refuerzan la percepción de una marca innovadora y tecnológicamente avanzada.
Project pages que funcionan como argumento comercial
Cada caso de estudio dentro del sitio está diseñado como una herramienta de venta. En lugar de galerías estáticas, las páginas de proyecto narran el desafío, la intervención técnica y el resultado final.
SEO e infraestructura para crecimiento orgánico
Un sistema digital solo es viable si es descubrible. La estrategia se fundamentó en una investigación SEO bilingüe (Es/En) que dictó la estructura del sitemap, la jerarquía de las URLs y la optimización de contenidos. Esta base asegura un posicionamiento sólido tanto para la búsqueda de servicios de brand implementation como para la atracción de talento en las secciones corporativas.
Troubadour: la misma infraestructura, una voz creativa distinta
Troubadour es la marca del ecosistema enfocada en creative services y producción escalable. Su integración en el portafolio demuestra la flexibilidad del design system: utilizando la misma arquitectura y lógica de navegación del grupo, Troubadour adopta una composición visual más editorial, ligera y adaptada a su propio posicionamiento en el mercado.
Nota de diseño
El sistema logra un equilibrio milimétrico entre rigor técnico y expresividad visual. Al mantener una paleta de interfaz sobria y funcional, el diseño cede el escenario para que los verdaderos protagonistas sean el color, los materiales y el packaging de los clientes. Más que estandarizar, esta arquitectura dota a Empack, Troubadour y Walker de una base digital sólida para escalar su negocio en el tiempo.
Créditos
Proyecto desarrollado en colaboración con Canvas. Art Direction & Design — Giovanni Vidaurri y Chan . Web Development & CMS — Juan Fuentes .
Compartir en Linkedin 
Compartir en Threads 
Compartir en X 
Compartir en Facebook 
