Emilia

Cliente

Falabella

Rol

Product Designer

Duración

Proyecto continuo

Año

2023

Equipo

Equipo de diseño interno

Herramientas

Figma · Storybook

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.

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.

Dolores / fricciones a resolver

Múltiples aplicaciones con diseños inconsistentes
Alta carga cognitiva en procesos repetitivos de planificación
Curva de aprendizaje elevada al cambiar entre aplicaciones
Desarrollo ineficiente por falta de componentes reutilizables

Mi rol y responsabilidades

Product Designer

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.

Flujo principal

Cómo un usuario de planificación trabaja sobre la plataforma estandarizada, de la carga de datos a la vista consolidada del equipo.

01
El usuario entra y selecciona el módulo de planificación
Entrada
Navegación consistente entre módulos gracias al sistema de diseño común.
02
Carga los datos de su área
Entrada
Formularios y tablas con los mismos componentes y comportamientos en toda la plataforma.
03
El sistema estandariza la información
Sistema
Los datos quedan en formatos comunes, comparables entre áreas y períodos.
04
Revisa pendientes e inconsistencias
Decisión
Estados visuales claros reducen la carga cognitiva en revisiones repetitivas.
05
Confirma la planificación
Decisión
El cierre del ciclo queda registrado con trazabilidad de quién y cuándo.
06
El equipo consulta la vista consolidada
Resultado
Una sola fuente de verdad para discutir y decidir sobre la planificación.

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.

1 / 1

¿Necesitas crear un sistema de diseño para aplicaciones enterprise?

[email protected]