Emilia
Sistema de diseño para una plataforma web de planificación en la gerencia de cadena de abastecimientos de Falabella, optimizando flujos y estableciendo una identidad visual coherente.
Cliente
Falabella
Duración
Proyecto continuo
Equipo
Equipo de diseño interno
Año
2023
Herramientas
Contexto y problema
Falabella necesitaba mejorar los procesos de planificación dentro de la gerencia de cadena de abastecimientos. Existían múltiples aplicaciones desarrolladas internamente sin una identidad visual coherente, lo que generaba inconsistencias y aumentaba la carga cognitiva de los usuarios que trabajaban con estas herramientas diariamente.
El problema
Las aplicaciones internas carecían de estandarización visual y de interacción. Los usuarios enfrentaban interfaces inconsistentes, lo que dificultaba el aprendizaje de nuevas herramientas y aumentaba los errores en procesos repetitivos de planificación.
Mi rol y responsabilidades
Fui responsable de diseñar el sistema de diseño completo para Emilia, definiendo los fundamentos visuales y creando una librería de componentes que estandarizara todas las aplicaciones de planificación.
Lo que hice directamente
- →Definir los fundamentos visuales: tipografía, colores, iconografía
- →Diseñar componentes reutilizables: botones, campos, módulos
- →Establecer criterios de uso basados en función, no preferencia estética
- →Documentar el sistema para facilitar adopción por otros equipos
- →Asegurar que el diseño reduzca carga cognitiva en tareas repetitivas
Enfoque de trabajo
Abordé el sistema de diseño priorizando la función sobre la estética. Cada decisión visual tenía que justificarse por su rol en la comunicación de información, no por preferencias personales. El objetivo era que el diseño desapareciera para que los usuarios pudieran enfocarse en su trabajo.
Tipografía
Montserrat para texto general (legible en diversos tamaños) e IBM Plex Mono para números, facilitando la lectura de datos en tablas.
Sistema de color
Colores con roles asignados por función: jerarquía, estados interactivos y diferenciación de elementos. Cada color tiene un significado específico.
Iconografía
Biblioteca Feather Icons por su simplicidad. Íconos simples reducen carga cognitiva y son reconocibles en pantallas pequeñas.
Componentes
Botones, campos y módulos diseñados para reutilización, con estados claros y documentación de uso.
Resultados e impacto
El sistema de diseño Emilia se convirtió en el estándar para todas las aplicaciones de planificación en la gerencia de cadena de abastecimientos, mejorando la consistencia visual y reduciendo tiempos de desarrollo.
Impacto observable
- Sistema de tipografía optimizado para datos: Montserrat + IBM Plex Mono para números
- Paleta de colores con roles definidos, facilitando modificaciones futuras
- Librería de íconos Feather integrada, priorizando simplicidad sobre detalle
- Componentes documentados: botones, campos y módulos reutilizables
- Adopción del sistema por múltiples equipos de desarrollo interno
Decisión clave y aprendizaje
Decisión clave
Elegí asignar roles a los colores basándome en su función (jerarquía, estados, diferenciación) en lugar de crear una paleta estéticamente atractiva. Esto facilita modificaciones futuras y extiende el sistema a múltiples puntos de contacto sin perder coherencia.
Lo que aprendí
En aplicaciones enterprise de uso intensivo, el diseño debe priorizar la comunicación clara sobre la estética. Los colores deben tener significado y seleccionarse intencionalmente. Los íconos detallados aumentan la carga cognitiva; la simplicidad ayuda a los usuarios a comprender rápidamente.
"Un buen sistema de diseño no se nota. Si el usuario piensa en la interfaz, algo está fallando."
Módulos
Imagen principal de los módulos del sistema Emilia.
¿Necesitas crear un sistema de diseño para aplicaciones enterprise?
📧 Escríbeme: [email protected]