Design System

inicio

trabajos

sobre mi

inicio

trabajos

sobre mi

crehana

design system

crehana

design system

crehana

design system

CREHANA

Design System

Ante el crecimiento del producto, la librería anterior generaba fricción e inconsistencias. Lideré el diseño de un sistema modular y escalable para Web y Apps móviles, priorizando la accesibilidad (WCAG) y la sincronización continua con Front-end.

Role:

Senior UI Designer

Team:

Diseñadores Senior (2 UI Designers y 1 Product Designer de distintos equipos).

Company:

Crehana, HR Platform

Company:

Project for a MicroDegree in UX Design

Timeline:

2023

¿Cómo comenzamos?

Para construir un sistema realmente útil, primero identificamos las necesidades de nuestros usuarios internos: el equipo de diseño. Facilitamos un workshop para mapear los pain points de la librería anterior y priorizar hallazgos en áreas clave como color, tipografía, grids, botones, inputs y feedback.

Hallazgos clave (Takeaways)

🔍

Documentación y visibilidad:

Falta de claridad sobre qué componentes ya están construidos fuera de la librería base, generando duplicidad de trabajo.

Documentación y visibilidad:

Falta de claridad sobre qué componentes ya están construidos fuera de la librería base, generando duplicidad de trabajo.

📁

Arquitectura y organización:

La estructura de páginas del sistema de diseño actual no es intuitiva, lo que dificulta encontrar y reutilizar patrones.

Arquitectura y organización:

La estructura de páginas del sistema de diseño actual no es intuitiva, lo que dificulta encontrar y reutilizar patrones.

📝

Escala y jerarquía tipográfica:

Falta de flexibilidad tipográfica. Al depender solo de Regular y ExtraBold, la jerarquía visual resultaba o muy pesada o demasiado liviana, sumada a una limitada variación de tamaños.

Escala y jerarquía tipográfica:

Falta de flexibilidad tipográfica. Al depender solo de Regular y ExtraBold, la jerarquía visual resultaba o muy pesada o demasiado liviana, sumada a una limitada variación de tamaños.

🎨

Color y accesibilidad (WCAG):

Contraste insuficiente en varios colores clave. Necesidad de garantizar un ratio de contraste adecuado y definir combinaciones óptimas para Light y Dark Mode.

Color y accesibilidad (WCAG):

Contraste insuficiente en varios colores clave. Necesidad de garantizar un ratio de contraste adecuado y definir combinaciones óptimas para Light y Dark Mode.

Hacia un producto unificado

Las librerías independientes entre Web y Mobile generaban una experiencia inconsistente. Para unificar el producto, definimos que la cohesión reside en los Foundations y estructuramos el sistema en 3 capas modulares:

Foundations (Globales): Color, tipografía y grillas que actúan como la columna vertebral del producto.

Librería Web: Componentes adaptados para escritorio.

Librería Mobile: Componentes optimizados para iOS y Android.

Foundations (Globales): Color, tipografía y grillas que actúan como la columna vertebral del producto.

Librería Web: Componentes adaptados para escritorio.

Librería Mobile: Componentes optimizados para iOS y Android.

Evolución tipográfica:

La actualización tipográfica fue una de las decisiones visuales más relevantes del proyecto, enfocada en resolver problemas de legibilidad y escala:

Reemplazo de Nunito por Poppins: Se adoptó Poppins como nueva tipografía secundaria por sus trazos geométricos afines a Gilroy y su superior rendimiento en textos extensos.

Optimización de pesos en Gilroy: Se ajustó el uso de la variante ExtraBold —que generaba ruido visual en botones pequeños y frases largas— dando paso a una jerarquía más equilibrada.

Ampliación de la escala tipográfica: Se integraron nuevos tamaños y pesos para ofrecer mayor flexibilidad compositiva, respondiendo directamente a los hallazgos del workshop.

Evolución cromática y accesibilidad (WCAG)

La accesibilidad se convirtió en un pilar fundamental del nuevo sistema. Ampliamos la paleta de 4 a 6 matices por cada color, agregando tonos más claros y oscuros para garantizar combinaciones de contraste óptimas (cumpliendo estándares WCAG).

Esta extensión otorga mayor flexibilidad a los diseñadores y previene errores de legibilidad al construir nuevos componentes, tanto en Light como en Dark Mode.

El uso incorrecto del color secundario afectaba negativamente la accesibilidad global, ya que todos los links de la plataforma en Light Mode fallaban en los test de contraste.

Corregimos este déficit aplicando el color primario a los enlaces en modo claro y manteniendo el secundario únicamente para Dark Mode, logrando una experiencia accesible sin perder consistencia visual.

El uso incorrecto del color secundario afectaba negativamente la accesibilidad global, ya que todos los links de la plataforma en Light Mode fallaban en los test de contraste.

💡

Solución:

Reemplazamos este tono por el color primario en Light Mode para garantizar la legibilidad, conservándolo únicamente en Dark Mode. Esta regla sienta la base para una futura transición hacia un sistema de Design Tokens más robusto y semántico.

Solución:

Formalización de color no documentado

Se integró oficialmente a la librería un tono cromático que ya se utilizaba de forma recurrente en la plataforma, pero que carecía de documentación en el sistema anterior, eliminando vacíos en las guías de UI.

Estandarización de nomenclatura

y Tokens Semánticos

Estandarización de nomenclatura

y Tokens Semánticos

En colaboración directa con el equipo de Front-end, definimos una arquitectura de nomenclatura semántica para alinear los componentes de Figma con la librería de código. Se nombraron los colores según su función dentro de la plataforma y se les asignó una escala numérica que indica la intensidad o saturación del tono:

Red-main ➔ alert-400 (Color base para mensajes de alerta)

Red-dark ➔ alert-600 (Variante oscura para estados activos o de mayor jerarquía)

Red-main ➔ alert-400 (Color base para mensajes de alerta)

Red-dark ➔ alert-600 (Variante oscura para estados activos o de mayor jerarquía)

Impacto en el Rebranding de Crehana

Impacto en el

Rebranding de Crehana

La solidez de las bases visuales trascendió el producto digital. Durante la definición de los Foundations (paleta cromática y tipografía), colaboramos con el equipo de Marketing para evaluar la nueva dirección del sistema.

Al comprobar la consistencia y flexibilidad de la propuesta, Marketing adoptó estos mismos fundamentos para ejecutar el rebranding global de Crehana, alineando la comunicación de la marca (redes sociales y piezas promocionales) con la nueva experiencia de interfaz.

Componentes

Escalabilidad y densidad en Inputs y Dropdowns

Anteriormente, los inputs y dropdowns contaban con un único tamaño pensado para páginas promocionales, el cual resultaba invasivo y desproporcionado al aplicarse en flujos complejos dentro de la plataforma.

Para adaptar el componente a la densidad de cada entorno, definimos dos variantes clave:

Small(sm): Optimizado para la interfaz del producto, maximizando el espacio de trabajo.

Medium(md): Reservado para landings y formularios de conversión.

Para adaptar el componente a la densidad de cada entorno, definimos dos variantes clave:

Small(sm): Optimizado para la interfaz del producto, maximizando el espacio de trabajo.

Medium(md): Reservado para landings y formularios de conversión.

Paralelamente, refactorizamos la estructura del componente en Figma (Auto-layout, Component Properties y variantes), haciendo su configuración mucho más intuitiva para los diseñadores.

Refinamiento de Botones

Actualización tipográfica: Implementación de Poppins para mejorar la legibilidad y alineación del texto.

Ajuste de radio (Border Radius): Incremento del redondeado de esquinas para una estética más moderna y amigable.

Preservación del patrón: Se mantuvieron los estados e interacciones clave para no generar fricción en la curva de aprendizaje de los usuarios.

Actualización tipográfica: Implementación de Poppins para mejorar la legibilidad y alineación del texto.

Ajuste de radio (Border Radius): Incremento del redondeado de esquinas para una estética más moderna y amigable.

Preservación del patrón: Se mantuvieron los estados e interacciones clave para no generar fricción en la curva de aprendizaje de los usuarios.

Optimización de Contraste

Actualización tipográfica: Implementación de Poppins para mejorar la legibilidad y alineación del texto.

Ajuste de radio (Border Radius): Incremento del redondeado de esquinas para una estética más moderna y amigable.

Preservación del patrón: Se mantuvieron los estados e interacciones clave para no generar fricción en la curva de aprendizaje de los usuarios.

Actualización tipográfica: Implementación de Poppins para mejorar la legibilidad y alineación del texto.

Ajuste de radio (Border Radius): Incremento del redondeado de esquinas para una estética más moderna y amigable.

Preservación del patrón: Se mantuvieron los estados e interacciones clave para no generar fricción en la curva de aprendizaje de los usuarios.

Flexibilidad y arquitectura en Dialogs

El problema: Dialogs era uno de los componentes con mayor tasa de detach por parte del equipo. Al ser una estructura rígida e informativa, no permitía personalizar el contenido según las necesidades de cada flujo.

Simplificación y nuevos tipos de Dialogs

A partir del workshop con el equipo de diseño, identificamos que las variantes más complejas no se utilizaban y que la mayoría de los casos de uso requerían una estructura mucho más ágil.

Para reducir la fricción y facilitar la adopción, simplificamos el componente definiendo dos tipos principales:

Basic / Default: Para mensajes directos de confirmación, alertas o acciones rápidas.

Custom / Complex: Para flujos que requieren layouts personalizados, formularios o contenido interactivo.

A partir del workshop con el equipo de diseño, identificamos que las variantes más complejas no se utilizaban y que la mayoría de los casos de uso requerían una estructura mucho más ágil.

Para reducir la fricción y facilitar la adopción, simplificamos el componente definiendo dos tipos principales:

Basic / Default: Para mensajes directos de confirmación, alertas o acciones rápidas.

Custom / Complex: Para flujos que requieren layouts personalizados, formularios o contenido interactivo.

Basic / Default

Se utilizan para comunicar mensajes puntuales, alertas o confirmaciones que requieren interacciones o accionables simples.

Custom / Complex:

A diferencia de los informativos, estos dialogs están diseñados para flujos donde el usuario debe interactuar activamente o completar tareas complejas. Su arquitectura interior es modular y flexible, permitiendo integrar diversos patrones de UI (como formularios, selecciones o inputs) según el caso de uso.

Custom / Complex:

Documentation

Documentación y Changelogs: Trazabilidad del Sistema

El crecimiento del equipo generó cambios constantes en la librería sin un registro de autoría. Lo resolvimos integrando Changelogs por componente que detallan fecha, ajuste y responsable, garantizando transparencia y un control de versiones claro para diseño y desarrollo.

Patrones de UI: Empty States

Para resolver las inconsistencias visuales en la plataforma, unificamos los Empty States como nuestro primer patrón de UI documentado (anatomía, lenguaje e interacción). Este avance sienta las bases de un repositorio modular que continuará creciendo para alinear y acelerar el trabajo de todo el equipo.

La Nueva Experiencia Visual

Conclusiones y Aprendizajes

Con las bases de la librería consolidadas, el siguiente paso estratégico es la arquitectura e implementación de Design Tokens y variables globales. Esto permitirá escalar temas (Dark/Light mode), espaciados y estilos de forma automatizada entre Figma y código."

Siguiente paso en la hoja de ruta

siguiente proyecto

competencias

Did you love

what you saw here?

Did you love

what you saw here?

Drop me a line!

behance

dribble

Did you love

what you saw here?

A quick look into my experience, skill set,

and background.

behance

dribble