ES
EN

Hola, soy

Diana J. Cifuentes

Product Design UX Research Diseño UI Design Systems

Convierto lo complejoen experiencias clarasy fáciles de usar.

Traduzco research e insights de negocio en productos que la gente usa, apoyándome en la IA durante todo el proceso. Diseño con criterio: lo que se mide, se mejora.

Diana J. Cifuentes

Portafolio

Caso de estudio

Brew Vision

2026

Herramienta de pricing en tiempo real para una cervecera líder. Bajé el ciclo de 7+ días a tiempo real; escaló a 10 países de LATAM.

UX Research B2B Tool

UX/UI

Aguila Millonaria

2024

Campaña digital para Aguila (AB InBev). Logré 79.8% de participación optimizando el flujo de la experiencia.

Campaña Digital UI

Caso de estudio

Gana con Clase

2023 / 24

Plataforma de fidelización de bebidas. Subí la recurrencia de usuarios +60% rediseñando la experiencia end to end.

UX Research App Mobile

UX/UI

DS | Budweiser

2023

Design system con Atomic Design para el sitio de Budweiser Colombia. Unifiqué la identidad visual y saqué las inconsistencias.

Design System UI

UX/UI

11:11

2023

Campaña digital de Pony Malta con las horas espejo 11:11. Subí la conversión del registro de 50% a 75% al partir el formulario en tres pasos.

UX/UI Userflow

UI

HUB Budweiser

2022

Rediseñé el sitio de Budweiser México como hub de contenido, con estilos y componentes base para montar campañas más rápido.

UI Rediseño web

Cómo trabajo

Mi proceso de diseño

Discover

Entiendo el contexto del negocio, el problema real y las necesidades del usuario. Me apoyo en investigación cualitativa y cuantitativa: entrevistas, observación y análisis del entorno.

Define

Con la información recopilada, identifico patrones e insights clave para definir con claridad el problema real, siempre alineando las necesidades del usuario con los objetivos del negocio.

Develop

Diseño flujos, arquitectura de información y wireframes que conectan los insights con la solución, iterando con usuarios y en colaboración con equipos multidisciplinarios.

Delivery

Construyo prototipos de alta fidelidad en Figma que materializan la solución final, validados con usuarios reales y ajustados hasta cumplir con los objetivos y necesidades identificadas.

Validación e Iteración

Con base en la retroalimentación de usuarios y el análisis de métricas, pruebo, mido e itero el producto continuamente, identificando oportunidades de mejora y validando nuevas hipótesis.

¿Tienes un proyecto en mente?

Hablemos. Me encanta colaborar en proyectos donde el diseño resuelve problemas reales y genera impacto medible.

Sobre mí

Hola, soy Diana J. Cifuentes Diana

UX/UI Designer · Product Designer · Bogotá, Colombia

Diseño productos digitales end-to-end centrados en el usuario: experiencias accesibles y escalables que generan impacto en el negocio y satisfacción en los usuarios. En AB InBev diseñé Brew Vision, una plataforma de pricing en tiempo real que escaló a 10 países de LATAM.

dianajcifuentesg@gmail.com ¡Copiado! Diana Josefa Cifuentes

Trayectoria: Experiencia profesional

4+ años diseñando productos digitales end-to-end

Investigación y estrategia

Plataforma Gana con Clase rediseñada, vista en escritorio Co-lideré la investigación de Gana con Clase (Pony Malta): testeo presencial con niños en sus colegios y cruce de los hallazgos con Google Analytics. Los insights guiaron el rediseño completo de la plataforma. +60% de recurrencia 44 niños testeados
Brew Vision en MacBook Lideré Brew Vision end-to-end como UX/UI Lead Designer: del discovery con Revenue, Pricing y Data Analytics al handoff documentado para el equipo de desarrollo global. -7 días en el ciclo de pricing 3 → 10 países en LATAM
Pantallas de la campaña Aguila Millonaria Co-diseñé toda la UI de la campaña Aguila Millonaria para la Copa América, con flujos separados para consumidores y tenderos. Simplifiqué la predicción al ver el abandono en analytics. 79.8% de participación 609K sesiones en campaña

Diseño y prototipado

Design System de Budweiser Colombia Construí el design system de Budweiser Colombia con Atomic Design, de los átomos a los organismos, con variantes documentadas. 30+ componentes documentados

Revisión de compatibilidad entre diseño UI/UX y desarrollo. Verificación de funcionalidades, contenidos, formularios, SEO y analytics en sitios web. Revisión de CDP y Datalayers.

Diseño de arquitectura web e interfaces para propuestas digitales. Diseño de piezas gráficas, revistas de candidatura y manual de estilo gráfico. Apoyo a la estrategia de comunicaciones del Bureau de Bogotá.

Edición gráfica y estructural de documentos. Diseño y fabricación de productos como botiquines de primeros auxilios.

Habilidades y herramientas

UX Design UI Design User Research Design Systems Usability Testing Design Thinking
Wireframe del dashboard: estructura y jerarquía en gris
Interfaz final del dashboard, con color, iconografía y estados
Wireframe Interfaz final
Figma + Make FigJam Illustrator Photoshop Notion Google Analytics Azure DevOps Claude Code

Arrastra para comparar la estructura con la interfaz final

Educación

Formación académica

Ilustración de Diana J. Cifuentes

Idiomas

  • ES Español Nativo
  • FR Francés B2
  • EN Inglés B1 · En formación a B2

Feb 2019 – Ene 2020

Diseño UX/UI

Next_U · Educación autodidacta

Sep 2019

Micro Master UX

EDX + University of Michigan

Feb 2011 – Ago 2017

Diseño Industrial

Pontificia Universidad Javeriana

Ene – Ago 2016

Estudio de Francés

France Langue · Bordeaux, Francia

Ago – Sep 2015

Diplomado Diseño de Empaques

Universidad Nacional de Colombia

UX/UI Lead Designer · Empresa cervecera · LATAM · 3 meses

Brew Vision

Herramienta de simulación, optimización y visualización de precios para los equipos de Revenue de una importante empresa cervecera en la Región LATAM, diseñada para que decisiones estratégicas sucedan en tiempo real.

UX/UI B2B Internal Tool
Price Visualization de Brew Vision: comparativa de adherencia por segmento, tipo de empaque, tamaño y canal
Price Visualization de Brew Vision: tendencias de indice de precios a lo largo del año

Contexto y problema

¿Cuál era el problema sobre la mesa?

Los equipos de Revenue de una importante cervecera en LATAM necesitaban tomar decisiones de precio con mayor rapidez y precisión. Sin embargo, la información estaba dispersa entre hojas de cálculo, procesos manuales y datos que no siempre estaban disponibles en tiempo real.

El dolor del usuario

Los analistas no podían explorar escenarios de precio de forma ágil. Cada simulación implicaba consolidar información, trabajar con múltiples archivos y coordinarse con otras áreas, haciendo que el análisis fuera lento y difícil de escalar.

El costo para el negocio

Esta dinámica hacía que cada ciclo de simulación y optimización tomara alrededor de 7 días. En mercados altamente competitivos, esa demora reducía la capacidad de reaccionar oportunamente y podía traducirse en oportunidades de negocio perdidas.

Objetivo

¿Qué necesitábamos lograr?

Rediseñar Brew Vision como una herramienta de simulación, optimización y visualización de precios que permitiera a los equipos de Revenue tomar decisiones basadas en datos confiables, en tiempo real y desde una sola plataforma. La información debía ser relevante, precisa, fácil de interpretar y manipular para cargos directivos.

Mi rol

Liderazgo de investigación y diseño

Fui responsable del diseño end-to-end del proyecto: desde la gestión de tiempos con el Gantt aprobado por el negocio hasta la entrega del handoff al equipo de desarrollo global. Coordiné stakeholders de la Región LATAM en áreas de Revenue, Pricing y Data Analytics, asegurando que cada iteración del diseño respondiera a sus necesidades reales.

Analisis de descuentos de Brew Vision: distribucion del porcentaje de descuento por punto de venta

Gestión del proyecto

Planifiqué 3 meses de proceso con un Gantt aprobado por el negocio, adaptando tiempos según la disponibilidad de stakeholders en 3 países.

Gestión de stakeholders

Coordiné entrevistas y sesiones de validación con equipos de Revenue, Pricing y Data Analytics en la Región LATAM.

Colaboración técnica

Trabajé de la mano con Data Analytics para diseñar pantallas técnicamente viables, y entregué handoff detallado en inglés al equipo de desarrollo global.

Proceso de diseño

Discover

  • User interviews con stakeholders y usuarios
  • Research de las herramientas
  • Service Blueprint del As-Is del proceso
  • Dolores y hallazgos

Define

  • Negociación de tiempos, alcance y recursos
  • Priorización de insights
  • User personas
  • Necesidades de negocio

Develop

  • Arquitectura de la información
  • Bocetación, wireframes y user flows
  • Decisiones de diseño
  • Priorización de funciones
  • UI desktop

Delivery

  • Entrega del diseño final a stakeholders
  • Handoff a desarrollo
Brew Vision: pantalla de bienvenida con los accesos a Price Simulation, Optimizer y Price Visualization
Brew Vision: creacion de una nueva simulacion, procesando los datos cargados
Brew Vision: resumen ejecutivo de la simulacion de precios
Brew Vision: Price Ladder, la escalera de precios por marca y segmento
Brew Vision: grafica de cascada (waterfall) de los factores que explican la variacion
Brew Vision: tendencias del mix a lo largo del año
Brew Vision: resumen de impacto, a la espera de que se filtren los campos a ver
Brew Vision: Price Visualization, deepdive del Price Tier por marca y segmento
Brew Vision: Price Visualization, comparativa de PTC vs WAMP en Index Sell out
Brew Vision: Price Visualization, analisis de margen en Index Sell In

Discover

El negocio puso el problema sobre la mesa: necesitaban una herramienta para tomar decisiones de precios más rápidas y en tiempo real. A partir de ahí, realicé entrevistas a stakeholders de Revenue y Pricing en Colombia, Ecuador y Perú, y a técnicos de Data Analytics para entender el AS-IS: cómo realizaban hoy el proceso de simulación, optimización y visualización de precios.

As-Is del proceso y roles involucrados

Construí el Service Blueprint del AS-IS mapeando las 4 etapas del proceso de Revenue (Monitoreo, Simulación, Optimización e Implementación), los actores clave, las herramientas utilizadas y los pain points que frenaban la toma de decisiones.

Al mismo tiempo se mapearon los diferentes roles que había y en qué puntos intervenían.

Revenue, Mancom, Estrategia, Marca Price Revenue Revenue, Ventas, stakeholders, Finanzas
Service Blueprint del AS-IS: monitoreo, simulacion, optimizacion e implementacion del proceso de Revenue

Dolores y oportunidades

Mapeé dolores y patrones a través de las entrevistas, identificando puntos de fricción y oportunidades de visualización. Algunos de ellos fueron:

  • Varios procesos requieren trabajo manual y consumen demasiado tiempo.
  • Cada país utiliza diferentes formas de visualizar y presentar los resultados.
  • No existen registros históricos consolidados o algunos se encuentran extraviados.
  • Las simulaciones y optimizaciones tardan en promedio 7 días, retrasando la toma de decisiones y extendiendo aún más los tiempos de alineación.
  • Existen 3 tipos de usuarios con diferentes necesidades de información y datos.
  • Cada simulación u optimización requiere preparar una presentación específica para gerencia.
  • Algunas tareas requieren trabajo manual que podría automatizarse.
  • No es posible simular diferentes escenarios y visualizar sus resultados en tiempo real.

Define

Con los hallazgos en mano, priorizamos las mejoras según impacto y facilidad, alineadas con las necesidades del negocio.

Priorización y negociación de tiempos, alcances y recursos

  • Prioricé los procesos a mejorar según su viabilidad, nivel de impacto y lo que podíamos resolver desde diseño dentro del alcance de 3 meses. Se descartaron dependencias externas fuera de nuestro control (como los tiempos de llegada de información de precios de terceros) y se definieron límites claros.
  • El alcance original contemplaba 5 herramientas de Brew Vision, pero dada la complejidad del proyecto y el tiempo disponible, negocié con el owner del proyecto acotar la entrega a las 2 herramientas de mayor impacto: Simulación y Optimización de precios, con la posibilidad de incluir una tercera si el tiempo lo permitía.
  • Con un solo recurso, un solo UX/UI, asumí el proceso end to end, priorizando el diseño sobre el prototipado, ya que este último requería un tiempo considerable. Para el handoff, los detalles restantes se resolvieron mediante reuniones con desarrollo y notas aclarativas directamente en el diseño.

User personas

Daniel,el estratega de datos

  • Rol: Data & Pricing Analyst. Analiza grandes volúmenes de información para apoyar la estrategia de precios.
  • Qué hace: Diseña modelos, simulaciones y escenarios para predecir el impacto de diferentes precios.
  • Necesita: Datos confiables, históricos de precios y herramientas para modelar escenarios.
  • Objetivo: Encontrar el precio y estrategia que maximicen el desempeño del negocio.
  • Pain point: Tener que consolidar o interpretar información de diferentes fuentes para generar escenarios confiables.

Laura,la tomadora de decisiones

  • Rol: Revenue & Pricing Manager. Define y ejecuta la estrategia de precios para los productos.
  • Qué hace: Revisa indicadores y números clave para decidir qué precio asignar a una cerveza, cuándo subirlo o bajarlo y cuándo aplicar descuentos o promociones.
  • Necesita: Información clara sobre ventas, precios, temporadas, promociones y comportamiento histórico.
  • Objetivo: Definir precios competitivos que maximicen ingresos y volumen.
  • Pain point: Tener demasiada información sin una visualización clara que facilite tomar decisiones rápidas.

Carlos,el aprobador estratégico

  • Rol: Commercial / Pricing Executive. Revisa y aprueba las estrategias y precios propuestos por los equipos de Pricing y Revenue.
  • Qué hace: Compara tendencias de precios entre años, mercados y países para evaluar las propuestas.
  • Necesita: Información resumida, tendencias, comparaciones y principales indicadores para tomar decisiones.
  • Objetivo: Asegurar que las decisiones de pricing estén alineadas con la estrategia y los objetivos del negocio.
  • Pain point: Revisar mucha información para identificar rápidamente qué está cambiando y qué decisiones requieren su aprobación.

Insights y necesidades de negocio

Alta manualidad

Procesamiento y carga de información de precios de forma manual para simular y optimizar escenarios.

Procesos lentos

El modelado y la validación de simulaciones y optimizaciones podían tardar varios días en completarse.

Datos con desfase

La información oficial llegaba con hasta mes y medio de retraso, dificultando la toma de decisiones oportunas.

Alineación costosa

La coordinación interna entre áreas y países consumía más tiempo que el cálculo en sí mismo.

Sin estandarización

Cada país manejaba su propio Excel y su propia manera de simular y optimizar precios.

Develop

Con toda la información procesada, el proceso de diseño fue iterativo y co-creado de la mano del owner del proyecto y de los usuarios directos de las áreas de Data Analytics y Revenue. Dado que la simulación y optimización de precios es un dominio altamente técnico y desconectado del diseño, era indispensable diseñar junto a quienes más conocían la lógica detrás de cada herramienta y su uso en el día a día.

Sitemap

Definí la arquitectura del sitio para estructurar las dos herramientas priorizadas y una tercera que podría incluirse si el tiempo lo permitía.

Sitemap de Brew Vision: login, home y las ramas de Price Simulation, Optimizer, Mis proyectos y Price Visualization

Usuarios finales

La herramienta fue diseñada para usuarios operativos como los equipos de Revenue y Data Analytics, pero también para ser consultada por gerencia en la toma de decisiones estratégicas.

Design system

Alineamos el producto al lenguaje visual del Design System corporativo de la marca, y de paso lo enriquecimos con nuevos componentes creados específicamente para Brew Vision.

Bocetación y wireframes

Bocetación a mano alzada de cada pantalla junto a los equipos de Analytics y Revenue, iterando según su feedback técnico. A partir de ahí, los wireframes fueron presentados a stakeholders de cada país para validar comprensión y funcionamiento esperado.

Mapa de todas las pantallas de Brew Vision: los flujos de Price Simulation, Price Visualization, Optimizer y Mis proyectos, desde el login hasta cada grafica

Decisiones de diseño

Benchmark de gráficas

Analicé distintos tipos de charts para identificar cuáles representaban mejor la información según cada objetivo, ya que las herramientas requerían múltiples visualizaciones con propósitos diferentes.

Benchmark de graficas: adherencia de precios por segmento, empaque, tamaño y canal

Co-diseño con usuarios

Los equipos de Revenue y Data Analytics co-diseñaron cada pantalla, ya que eran quienes mejor entendían la lógica y los cálculos detrás de sus simulaciones y optimizaciones en Excel.

Pantalla de analisis de descuentos co-diseñada con los equipos de Revenue y Data Analytics

Reutilización de gráficas existentes

Se tomaron como base las gráficas que los usuarios habían construido tras años de experiencia, pero se les dio estructura técnica y capacidad de manipulación en tiempo real para reducir tiempos y manualidad.

Price Ladder: escalera de precios por marca, segmentada de Value a Premium+SP, la grafica que los equipos ya usaban

Formato tipo presentación

Las gráficas se diseñaron con título y descripción editables, y con opción de guardado, para que los equipos pudieran presentar directamente a gerencia sin necesidad de preparar material adicional.

Grafica con titulo y descripcion editables, lista para presentar a gerencia

Filtros dinámicos

Las gráficas se diseñaron con filtros interactivos para que cada rol pudiera ajustar las variables según su necesidad y visualizar resultados en tiempo real.

Panel de filtros de la simulacion de precios, con las variables de cada rol

Tablas comparativas

Se incorporaron tablas comparativas con filtros dinámicos para que los equipos pudieran contrastar escenarios de precios y tomar decisiones más informadas.

Tabla comparativa del resumen de impacto de la simulacion de precios

Deliver

Entrega a stakeholders

  • Se presentó el UI final a los stakeholders de los tres países para ajustes finales, verificando que se cumplieran los objetivos del proyecto y las necesidades de cada usuario.
  • Nos comprometimos a entregar dos herramientas y logramos entregar tres.

Handoff

El handoff fue entregado en inglés al equipo de desarrollo global, con documentación detallada de charts, micro-interacciones y reglas de la herramienta.

Palabras literales de los stakeholders

“Esto era lo que necesitamos”

Impacto

Decisiones más rápidas, a mayor escala

Brew Vision transformó la manera en que los equipos de Revenue y Data toman decisiones de precios: de un proceso manual de días a una herramienta en tiempo real, con formato de presentación lista para gerencia y capacidad de escalar a múltiples mercados en Latinoamérica. Una herramienta de pricing estandarizada por zona que redujo exponencialmente los tiempos de trabajo, liberando espacio para la toma de decisiones y el diseño de estrategias de precio.

–7 días

reducidos en cada ciclo de simulación y optimización de precios

LATAM

capacidad de escalar a múltiples mercados en Latinoamérica

3

herramientas diseñadas e integradas en una sola plataforma

Real time

toma de decisiones de precios en tiempo real

Próximos pasos

El siguiente será evaluar y medir el éxito de los cambios propuestos e iterar el producto, que quedó como Nice To Have pendiente de aplicar por tiempos de implementación. Es la iteración más importante que le falta al producto. Sin embargo, debido al éxito del diseño se decidió implementarlo no solo a 3 países sino expandirlo a 10 países en LATAM.

Aprendizajes

Trabajar con equipos técnicos de Data Analytics desde el inicio del diseño fue clave para garantizar que cada pantalla fuera técnicamente viable. La bocetación a mano alzada con ellos evitó re-trabajo en etapas más costosas del proceso.

Tarjeta de acceso a Price Simulation en la pantalla de bienvenida de Brew Vision

Escalabilidad regional

Una misma herramienta puede servir a múltiples países, pero cada mercado tiene sus propias nomenclaturas, reglas de negocio y necesidades funcionales para definir precios. El diseño debe ser lo suficientemente flexible para absorber estas variaciones sin perder consistencia en la experiencia.

Co-liderazgo UX · UI Designer · Pony Malta · 44 usuarios testeados

Gana con Clase

Rediseño de la plataforma digital de Pony Malta para niños y adolescentes: estudio, diversión y premios, basado en investigación con 44 usuarios reales.

UX B2C Rediseño User Testing
Pantalla de Gana con Clase: selección de premios Pantalla de Gana con Clase: subir notas y boletines

Contexto

¿Qué es Gana con Clase?

Gana con Clase es una plataforma digital que busca incentivar a niños y adolescentes colombianos a fortalecer sus hábitos de estudio y aprendizaje a través de actividades educativas y de entretenimiento. Como recompensa por su participación y desempeño, los usuarios pueden acumular PonyTokens, que posteriormente pueden canjear por diferentes premios, de acuerdo con la cantidad de tokens obtenidos.

Objetivo

¿Cuál es el objetivo de negocio?

Aunque la plataforma Gana con Clase contaba con una buena aceptación, el negocio identificó la oportunidad de optimizar la experiencia para aumentar la conversión, fortalecer la fidelización de los usuarios actuales y atraer nuevas audiencias. Para ello, se planteó un rediseño basado en la investigación con usuarios reales, que permitiera identificar falencias, necesidades y oportunidades de mejora dentro del producto.

Mi rol

Co-liderazgo de investigación UX · Responsable del Diseño UI

Investigación con usuarios

Coordinamos el testeo con 44 niños y adolescentes, realizando una sesión en campo para identificar necesidades y puntos de fricción.

Análisis e insights

Analizamos y cruzamos los datos de investigación para convertir los hallazgos en insights y oportunidades de diseño.

Rediseño end-to-end

Diseñé la experiencia completa, desde wireframes hasta prototipo de alta fidelidad, aplicando el Design System de la marca.

Proceso de diseño

De la escuela al rediseño

Discover

  • Objetivos de negocio
  • Negociación de tiempos y recursos
  • Research del sitio actual
  • User research

Define

  • Hallazgos e insights
  • Priorización de insights
  • User personas
  • Necesidades de usuario

Develop

  • Arquitectura de la información
  • User flows
  • Priorización de funciones
  • UI responsive
  • Prototipado

Deliver

  • Entrega del diseño final a stakeholders
  • Handoff

Discover

El primer paso fue alinear el proyecto con los objetivos y necesidades del negocio: aumentar el tráfico hacia la plataforma y mejorar la conversión de nuevos usuarios.

A partir de esto, se definió un plan de trabajo de 3 meses, distribuidos a lo largo de un semestre, que contemplaba: 1 día de user testing, 2 meses de análisis y definición de la estrategia, y 1 mes de rediseño de la plataforma. Para llevarlo a cabo, se acordó la participación de 4 recursos internos de UX y 6 recursos externos de la agencia.

Con este marco definido, establecimos los KPIs para evaluar el user testing:

Los ocho KPIs del testeo: usuarios activos y recurrentes, acumulación de PonyTokens, retos cumplidos, intereses y herramientas nuevas, subida de notas, notas aprobadas, número de usuarios activos y ciclo de registro Los ocho KPIs del testeo: usuarios activos y recurrentes, acumulación de PonyTokens, retos cumplidos, intereses y herramientas nuevas, subida de notas, notas aprobadas, número de usuarios activos y ciclo de registro

Lo segundo fue evaluar el sitio actual para identificar fortalezas, falencias y oportunidades de mejora, planteando 3 hipótesis a tratar:

  1. El registro de la plataforma no era claro para la activación de la cuenta de los menores de edad.
  2. Los usuarios de Gana con Clase no conocían las diferentes formas de ganar puntos.
  3. El lenguaje y la forma de comunicarnos con los usuarios no era suficientemente clara.
La landing de Gana con Clase antes del rediseño, vista en un portátil

Y lo tercero, fue identificar los usuarios.

Niños y adolescentes de 11 a 17 años, interesados en actividades de estudio y juegos que les den puntos para ganar premios.

User testing

Con ello en mente, comenzamos con la planificación y preparación del UserTesting. Visitamos una institución educativa en Bogotá, donde realizamos diferentes tareas con niños para validar nuestras hipótesis y comprender mejor su experiencia. Para ello, utilizamos distintos dispositivos, herramientas de grabación de pantalla, cuestionarios y entrevistas.

Test preparation

Protocolo con recursos físicos, digitales y 3 tareas a testear según hipótesis.

Los celulares y tablets preparados para el testeo, en fila sobre la mesa
User testing

44 participantes de 11 a 17 años. 7 testeadores registrando observaciones.

El computador y el protocolo de observación, listos en el pupitre Un participante del testeo tomando notas en el colegio
User analysis

Análisis de hallazgos: cruce de datos en 4 dimensiones, usabilidad, experiencia, tecnología y lenguaje.

Los protocolos impresos del testeo, revisados sobre la mesa

Define

Con los hallazgos en mano, priorizamos las mejoras según impacto y facilidad, alineadas con las necesidades del negocio.

Hallazgos

  • La mayoría de usuarios era de género masculino: oportunidad clara de incluir actividades más llamativas para niñas.
  • Los usuarios tenían preferencias distintas de actividades según su rango de edad: personalizar la experiencia.
  • El feedback en las actividades era insuficiente y el lenguaje del sitio no resonaba con los usuarios jóvenes.
  • Había mejoras técnicas pendientes que generaban fricción en el flujo principal de la plataforma.
Un participante del testeo tomando notas, visto en la pantalla de un portátil

Insights

Los nueve insights del testeo, de optimizar los campos de captura a mantener la línea gráfica
  • Optimizar inputs de captura y pop-ups de comunicación.
  • Incluir estados del sistema e interacciones que faciliten la navegación.
  • Ofrecer premios más alineados con los intereses según la edad.
  • Diversificar y ampliar las actividades disponibles.
  • Estandarizar la información que se pide en los formularios.
  • Mantener y potenciar la línea gráfica, dado que el flujo ya era intuitivo.

User personas y necesidades de usuario

Los niños tienen diferentes intereses educativos y de premiación según su edad. Además, disfrutan compartir sus gustos y hobbies con personas de su misma edad. Por ello, se propone ampliar las actividades según sus intereses, permitiéndoles participar y ganar PonyTokens.

Intereses de los usuarios de 11 a 13 años: útiles escolares, aparatos electrónicos, bonos de regalo y gadgets de gaming Intereses de los usuarios de 14 a 17 años: becas, útiles escolares, bonos de regalo y gadgets de gaming

Develop

Rol: UX/UI Designer · Responsable única del re-diseño.

A partir de los hallazgos obtenidos en la investigación y teniendo en cuenta los objetivos de la marca, rediseñé integralmente la plataforma. El proceso se enfocó en responder a tres hipótesis principales:

Hipótesis 1: Un registro poco claro

Flujo de registro mejorado

Wireflow y adaptación del registro para tres tipos de usuario: adultos con hijos, adultos sin hijos y niños, definiendo flujos específicos para cada perfil y facilitando su implementación en desarrollo.

Tres pasos de registro

Mejora de la experiencia de llenado, repartiéndola en 3 pasos. Los datos de analytics reflejan que los registros paso a paso aumentan la cantidad de personas que llegan al final.

Registro y acceso sencillo

El registro es realizado por el tutor legal, mientras que el niño cuenta con un acceso sencillo y directo a su propia sesión.

Minimización de tiempo de registro

Wireflow del registro completo para los tres tipos de usuario

Hipótesis 2: El desconocimiento sobre cómo ganar puntos

Premios con mejor jerarquía

Información de premios con jerarquía visual, para mejor lectura del contenido y de los estados de canje.

Nuevo look and feel

Al renovar el look and feel con una apariencia más llamativa, conservando elementos de la identidad visual anterior, se mejoró la visibilidad de las actividades activas para facilitar su descubrimiento y potenciar la obtención de PonyTokens.

La pantalla de premios rediseñada, con el carrusel de canje y los PonyTokens necesarios

Además, con el fin de hacer el flujo más claro y fluido para completar actividades y obtener premios, y tomando como referencia los resultados del user testing, se mejoraron aspectos de navegabilidad que facilitaron entender qué actividades educativas nuevas hay, cuáles ya se han realizado, cuáles están pendientes, cuántos PonyTokens se tienen y cómo reclamar los premios.

Landing más robusta

Landing explicativa con actividades, pasos para participar, premios, PonyTokens y campañas vigentes.

Navegación reorganizada

Redistribución de los menús laterales: uno para Gana con Clase y otro para el cierre de sesión, con mayor claridad de navegación.

Dos plataformas diferenciadas

Una plataforma para adultos y otra para niños, con una diferenciación gráfica clara pero sutil.

El dashboard del usuario con todas las actividades, y las pantallas de retos, notas y menú

Hipótesis 3: Un lenguaje que no era suficientemente claro

Comunicación más cercana

Se adaptaron los copys según la edad de los usuarios, con un lenguaje más cercano y familiar que facilitara la comprensión y la conexión con la plataforma.

La pantalla para recortar la foto de la nota, con las indicaciones de ayuda La jerga de cada edad recogida en el testeo, de 11 a 13, de 13 a 15 y de 15 a 17 años

Mayor entendimiento

Ajustes más explicativos en la actividad de subida de evaluaciones y en los recortes de notas, para entender mejor la dinámica.

Deliver

Se presentó el prototipo a los stakeholders de la marca para realizar los ajustes finales y se entregó un handoff detallado al equipo de desarrollo, sin inconvenientes y cumpliendo con los tiempos establecidos.

Impacto

Más usuarios, más tiempo en la plataforma

Tras el rediseño, con ayuda del equipo de analytics se analizaron los datos de usabilidad y conversión con Google Analytics. Las acciones generaron impacto medible en el comportamiento de los usuarios.

+60%

aumento en recurrencia y conversión respecto al año 2024

44

usuarios reales testeados en campo para cada decisión de diseño

2

experiencias diferenciadas: niños y adultos

4

dimensiones analizadas: usabilidad, experiencia, tecnología y lenguaje

Equipo

El equipo detrás del testeo

Testeos realizados junto con un equipo multidisciplinario de 7 testeadores en campo, en colaboración con una agencia creativa.

El equipo de testeo de Gana con Clase, en la institución educativa

Aprendizajes

Testear con usuarios reales en campo entregó matices imposibles de obtener de otra forma. Las reacciones de los niños fueron la fuente de insights más valiosa.

Próximos pasos

Iterar con datos post-lanzamiento, hacer seguimiento a los KPIs definidos y nuevas rondas de testeo con usuarios.

UX/UI Designer · Pony Malta · Colombia · 2023

11:11

Con el objetivo de promover la compra de Pony Malta en jóvenes de entre 18 a 27 años, se lanza una innovadora campaña que utiliza las horas espejo 11:11, para generar recordación de marca al momento de tomar las onces y hacer un break en su día.

UX/UI Userflow Sitemap

La campaña

11:11, una pausa para recargarse

11:11 es una campaña de renovación de marca de Pony Malta, desarrollada para resignificar uno de los momentos más cotidianos del día: la hora de las onces.

La campaña convierte las 11:11 a.m. y 11:11 p.m. en un recordatorio para hacer una pausa, recargarse de energía y disfrutar una Pony Malta. A partir de una hora fácil de reconocer y recordar, la marca busca recuperar el hábito de las onces y llevarlo a un territorio más actual y cercano a las nuevas generaciones.

Más que comunicar un producto, 11:11 propone un momento de pausa: desconectarse por un instante y volver a conectar con uno mismo, acompañado de una Pony Malta.

El concepto

La bola mágica

El concepto del diseño también se basa en una bola mágica que le lanza al usuario una quote o un premio en caso de ser la persona número 11 del día.

La mecánica

¿Cómo funciona?

Para participar, el usuario debe ingresar sus datos y registrar un código que recibe a través de TaDa o que encuentra en la etiqueta del producto.

La dinámica se basa en el concepto de la campaña: cada 11 códigos enviados se selecciona un ganador, convirtiendo el número 11 en el eje de la experiencia y la participación.

La página de la campaña en escritorio, desde el banner del reloj hasta la tienda de Pony Malta
La misma página en móvil, con los pasos de participación uno debajo del otro

Estructura

Mapa del sitio: la home de Pony Malta se abre en cinco secciones y la de 11:11 baja por los tres pasos, el juego, la pregunta final y la página de gracias

Recorrido

Flujo del usuario: entra el código, se registra, acepta términos, juega y según gane o pierda cae en la página de gracias o en la de intentarlo de nuevo

Pantallas

Wireflow con las pantallas reales encadenadas: home, código, registro, términos, juego, los tres premios posibles y los correos de cada uno

Resultados

Optimización del formulario

Tras el despliegue, identificamos junto a Analytics que solo el 50% de los usuarios completaba el registro. Propusimos dividir el formulario en tres etapas, reduciendo la fricción y mejorando la conversión.

50% → 75% de registros terminados al partir el formulario en pasos
Los tres pasos del registro dentro del móvil, hasta la pantalla de premio

Priorización de contenido

Con datos de Google Analytics, descubrimos que los usuarios llegan principalmente hasta el tercer fold. Por eso, la información más relevante debe concentrarse allí y dejar el contenido secundario para los folds posteriores.

UX/UI Designer · Aguila · Colombia · 2024

Aguila Millonaria

Campaña de predicción para la Copa América 2024. Los consumidores adivinaban la formación de la Selección Colombia al cantar el himno, ganando boletas o el premio mayor de $1.000.000.000 COP.

UX/UI Campaña digital
609.597 sesiones totales
79.8% tasa de participación
5.33 predicciones promedio por usuario
$1.000M premio mayor COP
Aguila Millonaria Sello de la campaña: si estamos unidos, jugamos unidos

La campaña

Predice la formación, gana $1.000.000.000

Aguila, la cerveza más icónica de Colombia, lanzó una campaña para la Copa América 2024 en la que los consumidores predecían la formación de jugadores al cantar el himno nacional, usando códigos alfanuméricos encontrados bajo las tapas de cada cerveza.

Los participantes podían ganar boletas dobles para los partidos o el premio mayor de $1.000.000.000 COP (~$220.000 USD).

La Selección Colombia cantando el himno, con las tapas y los dorsales de la formación

Objetivos

¿Qué queríamos lograr?

Mayor compromiso

Aumentar el compromiso con la campaña por parte de los usuarios.

Más ventas

Aumentar la cantidad de hectolitros vendidos.

Nuevos consumidores

Atraer más consumidores hacia Cerveza Aguila.

Patrocinador oficial

Seguir posicionándose como el patrocinador oficial de la Selección Colombia.

Usuarios

Dos perfiles, una misma dinámica

La campaña conectaba a consumidores y tenderos a través de mecánicas de participación diferenciadas, diseñadas para impulsar tanto la interacción como la generación de puntos y premios.

Consumidores

Adivinaban la formación de jugadores al cantar el himno subiendo los códigos de las tapas. También participaban en actividades adicionales para acumular puntos.

Tenderos

Introducían los códigos de las tapas ya utilizadas para ganar puntos y premios monetarios, incentivando las ventas en sus puntos de venta.

Cuatro pantallas de la campaña: la predicción de la formación, el ingreso del código, la predicción del podio y la carga de la factura

Proceso

Flujos y arquitectura de la campaña

Se diseñaron flujos detallados para cada tipo de usuario, garantizando una experiencia fluida entre las diferentes actividades de la campaña y reduciendo la tasa de abandono.

Wireflow del proceso: los flujos de las dos mecanicas de la campaña Wireflow del proceso en cuatro tramos: prediccion de podio, ingreso de codigo, carga de factura y prediccion de formacion
Pantallas de la campaña Aguila Millonaria

A su vez, se creó un circuito cerrado de participación, en el que al finalizar cada actividad se incentivaba a los usuarios a participar en otra, manteniéndolos más tiempo dentro del sitio y favoreciendo la continuidad de la experiencia.

Match Prediction Predicción de Partidos Upload invoice Subir factura Podium Prediction Predicción de Podio Match Forecast Pronóstico Partidos
Proyecto realizado en colaboración con Sergio Narváez

Retos

Se registró un 20.20% de tasa de rebote inicial, debida a que el flujo de predicciones tenía muchos pasos repetitivos.

Aprendizajes

Analizando los datos de analytics se tomaron decisiones y el flujo se simplificó significativamente, aumentando la participación.

La campaña tuvo gran recepción entre los colombianos, con 609.597 sesiones y un promedio de 5,33 predicciones por usuario, evidenciando la recurrencia e interés del público.

UI Designer · Budweiser · Colombia · 2023

DS | Budweiser

Sistema de diseño completo construido con metodología Atomic Design para el rediseño del sitio web de Budweiser Colombia. Estandarizó la identidad visual de la marca y eliminó las inconsistencias entre secciones.

Design System UI Atomic Design
30+ Componentes
3 Niveles atómicos
100% Identidad unificada
Figma Librería entregada

Sobre el proyecto

Estandarizar la identidad visual de Budweiser Colombia

El sitio web de Budweiser Colombia presentaba inconsistencias visuales entre sus secciones, con variaciones en tipografías, colores, tamaños y estilos que dificultaban mantener una identidad coherente.

Diseñé un design system basado en Atomic Design, desde elementos fundamentales como color y tipografía hasta componentes como header, footer, banners y age gate. El sistema estableció criterios visuales consistentes para facilitar el mantenimiento del sitio y asegurar una experiencia coherente a medida que se incorporaban nuevas secciones y contenidos.

Átomos del sistema: el logotipo con sus fondos permitidos, la paleta de color y la escala tipográfica Átomos Moléculas del sistema: switches, checkboxes, inputs y botones con todos sus estados Moléculas Organismos del sistema: el age gate, el footer y el header en sus distintas variantes Organismos

Fundaciones

Atoms

Los elementos básicos de la identidad visual. Las unidades indivisibles que definen el lenguaje gráfico de la marca y son la base de todo lo demás.

  • Colors
  • Typography
  • Logo
Pantalla de artículo del sitio de Budweiser con el sistema tipográfico aplicado
Usos correctos e incorrectos del monograma sobre fondo rojo, blanco y azul Tabla de breakpoints del sistema con su clase de ventana, márgenes, cuerpo y número de columnas
Espaciado de 8 puntos y la rejilla de columnas, canales y márgenes del sistema
Paleta del sistema: colorimetría primaria, secundaria, de feedback y de degradados, con sus códigos Escala tipográfica del sistema: familias Budweiser Serif, Bud Bold y Franklin Gothic, y los estilos de hero, heading, subtítulo, párrafo, CTA y enlace

Componentes

Molecules

Componentes funcionales construidos a partir de los átomos. Cada uno con sus estados, tamaños y variantes documentadas para el uso en distintos contextos.

  • Buttons
  • Inputs
  • Switches
Botones deslizantes y de reproducción en sus estados por defecto, hover y activo, y el selector de respuestas de la trivia Switches en tamaño grande y pequeño con sus cuatro estados, y la paginación sobre fondo blanco, rojo y azul Campo de carga de archivo en sus cinco estados: por defecto, arrastre, cargado, vacío y deshabilitado
Documentación de Data Enrichment, Pagination, Ratios y Text Areas con todos sus estados Documentación de Switches, Checkbox, Inputs, Buttons y Trivia con todos sus estados

Sistemas

Organisms

Estructuras complejas que combinan moléculas para resolver patrones de UI completos del sitio. Cada uno con sus variantes de desktop y mobile, listos para escalar.

  • Header
  • Footer
  • Age gate
El age gate en sus tres versiones de marca: sobre rojo, sobre blanco y sobre azul
  • Age gate, footer, header y text leitmotiv documentados con todas sus variantes de escritorio y móvil
  • Banner principal, countdown y banner secundario, en sus versiones de imagen y de video para escritorio y móvil
  • Content fold y accordion list, con sus variantes clara y roja para escritorio y móvil
Nota: proyecto realizado en colaboración con Cristian Beltrán y Carlos Arbeláez, en organismos y estructura

Impacto

Una base sólida para el rediseño

El design system se convirtió en la única fuente de verdad visual para Budweiser Colombia. Aceleró el tiempo de diseño en proyectos posteriores y aseguró que cualquier nueva sección o campaña mantuviera la identidad de marca.

UI Designer · Budweiser · México · 2022

HUB Budweiser

Rediseño del sitio como hub de contenido de marca, aplicando el nuevo KV global y dejando una sección exclusiva para la Copa Mundial de Qatar 2022.

UI Rediseño web
Las tres presentaciones de Budweiser Catar 2022 junto a la vista móvil del hub
  • Botella Budweiser Catar 2022 de 946 ml
  • La vista móvil del hub mostrando la lata Budweiser Catar 2022
  • Botella Budweiser Catar 2022 de 355 ml

Contexto

El rediseño del sitio web de Budweiser México busca convertir la plataforma en un ecosistema digital centralizado, donde todas las campañas, experiencias, productos y contenidos puedan convivir en un mismo lugar. El proyecto parte de una reorganización de la arquitectura de información, con el objetivo de facilitar el descubrimiento y la navegación entre los diferentes contenidos. La propuesta crea una experiencia más clara, dinámica y consistente, capaz de integrar las distintas iniciativas de la marca sin perder su identidad.

Diseñé el sitio completo: la arquitectura de secciones, las plantillas del Mundial y los componentes base con los que se montarían las campañas siguientes.

Resultado

Hasta entonces cada campaña llegaba con su propio diseñador y su propia página. El hub unificó los estilos y dejó definidos los componentes base, los botones entre ellos, así que montar una campaña nueva pasó a tomar menos tiempo.

El hub de Budweiser visto en un portátil
La sección Explora nuestros contenidos del hub vista en móvil

Problemas, necesidades y soluciones

Contenido disperso

Las diferentes campañas, experiencias y contenidos de Budweiser podían percibirse como iniciativas independientes, dificultando una experiencia digital unificada.

Solución

Centralizar estos contenidos en un mismo ecosistema digital, creando una estructura coherente que permita integrar nuevas campañas y experiencias.

Arquitectura de información

La variedad de contenidos requería una estructura más clara que ayudara al usuario a entender qué podía encontrar y cómo acceder a cada sección.

Solución

Reorganizar la arquitectura de información estableciendo una jerarquía clara que facilite el descubrimiento y la exploración de los contenidos.

Puerta de edad del hub, con la pregunta de mayoría de edad antes de entrar Dónde comprar: enlaces a Ta-Da y Beerhouse, y la entrada a Experiencias Cómo participar en la experiencia, paso a paso Ficha de la lata Catar 2022 y la llegada de Ta-Da, la app de delivery Portada del hub con la campaña y la rejilla Explora nuestros contenidos Carrusel de presentaciones de producto Ingresa y participa con el código de la tapa, y la vitrina de premios Gana Premios Budweiser: la portada de la promoción del Mundial Trivia: pregunta uno de cuatro con sus opciones Juego completado, con los BudPoints ganados

Navegación poco fluida

La cantidad de contenidos hacía necesario simplificar el recorrido para que los usuarios pudieran desplazarse fácilmente entre las diferentes secciones.

Solución

Diseñar un sistema de navegación más intuitivo, utilizando categorías y llamados a la acción que orienten al usuario durante su recorrido.

Consistencia de marca

Al integrar múltiples campañas y experiencias dentro de un mismo sitio, existía el reto de mantener la personalidad de cada una sin perder la identidad de Budweiser.

Solución

Crear un sistema visual flexible que permita expresar cada campaña de forma particular, manteniendo elementos y patrones que unifiquen toda la experiencia.

Cuatro pantallas del hub: cambio de contraseña, ranking semanal, zona de usuario y creación de cuenta

Retos

Crear un sitio desde cero, con muchas secciones y variables. Integrar y adaptar el diseño global ya planteado a un sitio nuevo, sin que se viera la diferencia cuando se apagara la campaña del Mundial.

La lata de Budweiser de la Copa Mundial de la FIFA Catar 2022

Aprendizajes

Aprendí a trabajar con un equipo internacional, a sostener uno de mis primeros proyectos de principio a fin, a encontrar caminos posibles dentro de un flujo complejo y a defenderlo ante los varios equipos implicados.

Product Designer · 2026

Camaleón DS

Un Design System potenciado por IA, construido con Claude Code - MCP - Figma para generar flujos desde wireframes, personalizar interfaces digitales y auditar su consistencia.

IA Design System Claude Code Figma
Portada de Wireframes DS: kit de wireframes en blanco y negro, con 60 hojas de componentes, 44 tokens de color, 18 estilos de texto y 6 hojas de fundaciones

Un sistema, múltiples identidades

Portada de Camaleón DS: el mismo sistema retematizado en naranja, con 59 hojas de componentes, 23 tokens de color, 20 estilos de texto y 6 hojas de fundaciones

Camaleón DS es un Design System que cambia de piel, no de estructura. A partir de directrices visuales extraídas de una imagen o un sitio web, el sistema puede retematizarse por completo: desde las rampas de color y las formas, hasta la tipografía, la densidad y el movimiento. Los componentes mantienen su estructura y simplemente mutan para adoptar un nuevo estilo.

Wireframe de la pantalla de inicio: categorías de cuidado, buscador y productos recomendados
Wireframe del paso guiado: tres pasos, elige, responde y recomendación, con las fichas sugeridas
Wireframe de la ficha de producto: galería, precio, etiquetas y acordeones de información
Wireframe del carrito: resumen de la orden con subtotal, envío y total
Wireframe Interfaz final

Arrastra para comparar la estructura con la interfaz final

Contexto

El proyecto nació de una pregunta:

¿Cómo crear un sistema de diseño que entienda un problema, lo convierta en un flujo UX y adapte una misma interfaz a distintos estilos visuales?

En mi proceso de diseño, gran parte del tiempo se iba en transformar un problema de diseño en una solución UX y llevarla hasta una interfaz que pudiera probar y evolucionar. Quería acelerar esa exploración sin perder el criterio de diseño ni la consistencia.

Así nació Camaleón DS, un experimento para integrar IA al diseño digital y crear un sistema capaz de explorar flujos, convertirlos en interfaces y adaptar su lenguaje visual según el contexto.

Ocho tableros de moléculas del sistema: rating, buscador, ítem de carrito, puntos de carrusel, paginación, selector de cantidad, snackbar y grupo de avatares, cada uno en claro y en oscuro

Reto

El reto fue crear un sistema que pudiera llevar un flujo de UX hasta una solución de UI completa, manteniendo una estructura, reglas y componentes consistentes.

Comencé creando con Claude Code – MCP – Figma un Design System de wireframes “Wireframes DS”, como base estructural y agnóstica de marca. El siguiente paso fue convertirlo en un sistema personalizable, tokenizado y conectado con IA, capaz de interpretar referencias visuales, como una captura de pantalla, una paleta de color o una identidad de marca, y adaptar su lenguaje visual sin modificar la estructura del sistema.

La intención no era simplemente replicar una interfaz, sino crear un sistema capaz de explorar flujos, generar interfaces y transformar su lenguaje visual, incorporando componentes, estados y microinteracciones “Camaleón DS”, para convertir rápidamente una idea o problema en una experiencia funcional y personalizable, lista para entregar o para probar e iterar.

De esta forma, el flujo al que se quería llegar, y al que finalmente se llegó, fue:

Entender el flujo

Se presenta a Claude el problema, la solución, las pantallas y dispositivos.

Crear wireframes

Claude construye el flujo completo con “Wireframes DS”.

Personalizar el Design System

Se proporciona una imagen o link de referencia para personalizar “Camaleón DS”.

Aplicar el estilo

Se hace swap entre “Wireframes DS” y “Camaleón DS” para pintar el flujo.

Prototipar

Se conectan las pantallas y sus interacciones.

Auditar y ajustar

Se revisa el flujo y se realizan los ajustes finales.

El mismo panel en modo claro: proyectos recientes y tres gráficas que se re-tiñen con los tokens de marca El mismo panel en modo oscuro, con idéntica estructura y los colores cambiados por tokens

Para que cada Design System cumpla su función, cuenta con un Skill específico que guía a Claude en la creación de flujos y el uso de sus componentes, asegurando interfaces de alta calidad. Además, permite personalizar el sistema con fuentes, colores y otros elementos visuales para lograr la mayor fidelidad posible a la marca entregada.

*Skills: conjunto estructurado de instrucciones, guías y recursos que le enseñan a un agente de IA cómo realizar una tarea específica de manera repetible y precisa.

Proceso de creación

Claude Code – MCP – Figma

  • IA conectada al sistema
  • Link de Figma de “Wireframes DS”
  • Prompt de DS

Base estructural sin identidad visual

  • Estructura Atomic Design para wireframes
  • Tokenizado
  • Realización de flujos + Skill “Wireframes DS”

DS personalizable

  • Estructura tokenizada
  • Microinteracciones
  • Colores y estilo

UI adaptativa

  • Skill “Camaleón DS”
  • Adaptación a imagen visual
  • Réplica del flujo en wireframes pintado en el UI requerido

Iteración

  • Ajustes UI
  • Revisión de flujo
  • Verificación y ajustes de aprendizajes en DS

Principios claves

Construyendo la base

Para comenzar, lo primero era definir el alcance del Design System, tomando como base los principios del diseño atómico. Esto permitió establecer desde el inicio una estructura clara, reusable y conectada. Tanto el sistema de wireframes como el de UI seguirían estos mismos principios, manteniendo una lógica consistente entre ambas capas.

Ilustración en acuarela de un bote con pinceles

Tokens

Variables fundamentales (primitivas y semánticas) que definen los colores, la tipografía, el espaciado, etc.

Ilustración en acuarela de un átomo

Átomos

Los elementos más pequeños de una UI: iconos, botones, inputs, badge, avatar, etc.

Ilustración en acuarela de una molécula

Moléculas

Grupo de átomos que forman componentes simples: breadcrumbs, chart bars, carousel, cards, etc.

Ilustración en acuarela de un camaleón de colores sobre una rama

Organismos

Componentes de mayor tamaño formados por moléculas y átomos: feature section, form, footer, etc.

Miniatura de una plantilla de página con sus bloques marcados

Templates

Esquemas que muestran cómo se conectan los componentes dentro de una estructura.

Miniatura de una página final con contenido real

Pages

Pantallas finales con datos y contenido reales.

Lo segundo era asegurar que todo estuviera completamente tokenizado. Los valores de diseño se definían mediante tokens, permitiendo centralizar y mantener la consistencia. Al modificar un token, todo el sistema se actualiza automáticamente, facilitando la personalización.

Panel de variables de Figma con las colecciones de tokens en claro y oscuro, junto a dos componentes con sus paneles de medidas y estilos

Lo tercero era garantizar la accesibilidad, cumpliendo con las pautas WCAG 2.1 AA. Para ello, el sistema debía asegurar una relación de contraste mínima de 4,5:1 para texto y de 3:1 para elementos de interfaz. Esto no solo favorece la legibilidad, sino que también facilita identificar componentes interactivos y reconocer dónde es posible hacer clic o realizar una acción.

Sin embargo, si fuera necesario, Camaleón DS cuenta con una configuración de prueba independiente para AAA, definida en un archivo .json. La IA utiliza esta configuración para comprobar que el generador puede elevar el umbral de contraste hasta 7:1, en caso de que algún cliente lo requiera en el futuro.

Como parte de WCAG 2.4.7 AA, el Design System incorpora un anillo de foco de 2 px, separado 2 px del elemento, que permite identificar dónde está el foco al navegar con teclado, al tabular. Está estandarizado en botones, chips, inputs y demás componentes interactivos.

Un desplegable con la etiqueta «¿Qué es un token?» mostrando su anillo de foco de dos píxeles, separado del borde del campo

Cuarto y último, el DS integra un sistema de color basado en OKLCH, un modelo moderno que organiza los colores de acuerdo con la percepción visual humana, permitiendo una mayor consistencia y control que los modelos tradicionales como RGB.

Acuarela de un pincel con la punta encendida dentro de un frasco de cristal

L (Lightness / Luminosidad)

El brillo percibido del color, de 0 (negro) a 1 (blanco) o de 0 % a 100 %.

Acuarela de un pincel trazando una franja de color saturado

C (Chroma / Croma)

La intensidad o pureza del color, similar a la saturación.

Acuarela de una mancha donde se mezclan varios tonos

H (Hue / Tono)

El tipo de color en una rueda de 0 a 360 grados.

Claude Code – MCP – Figma + base estructural

El proyecto comenzó con un Sistema de Diseño de wireframes sin identidad de marca. El objetivo era crear una base sólida para construir interfaces digitales de forma rápida y sin imponer ninguna identidad visual.

Wireframes DS

Desarrollé un Design System de wireframes en Figma, conectado a Claude Code mediante MCP, para crear rápidamente flujos sencillos en desktop y mobile. Así podía visualizar soluciones de diseño en Mi-Fi en poco tiempo y a bajo costo de esfuerzo manual.

Portada de Wireframes DS con pantallas de ejemplo y las cifras del sistema

Realización del DS

Para su construcción, comencé por las fundaciones y la tokenización, para luego crear los componentes siguiendo la lógica de átomos, moléculas y organismos. Después, audité su estructura y consistencia antes de construir templates y probarlos en flujos sencillos.

Hojas de fundaciones de Wireframes DS: color, tipografía, espaciado, elevación e iconos

Auditoría con Claude

Pasé el DS por 7 fases de auditoría:

  1. General (qué errores había)
  2. Nomenclatura (estandarizar nombres de componentes)
  3. Arquitectura de tokens (primitivos, semánticos, aplicados)
Los tableros de átomos, moléculas y organismos de Wireframes DS durante la auditoría

Auditoría con Claude

  1. Aplicar tokens
  2. Revisión de calidad (Auto Layout, resize, spacing)
  3. Aplicar el DS realizando un sistema de cards con 6 variantes
  4. Gobernanza, es decir, las reglas del juego del DS
Las tres hojas de gobernanza del sistema: organización del archivo, nombres, variantes, color, tipografía y reglas de uso

Base para un DS personalizable

El resultado fue positivo en la mayoría de las fases, aunque fue necesario realizar ajustes para alcanzar un buen resultado. El sistema seguirá perfeccionándose a futuro, pero ya funciona como la base para construir un Design System personalizable.

Templates de prueba en wireframe: una landing y un dashboard, en escritorio y en móvil
Tabla de tokens de texto y fondo con su valor neutral en modo claro Hoja de fundaciones: la rejilla de iconos del sistema Hoja de fundaciones: la escala de espaciado y cuándo usar cada paso Hoja de fundaciones: la escala tipográfica, de Display a Label Hoja de fundaciones: la escala de radios y su convención de uso Hoja de fundaciones: las cuatro sombras de elevación
Las hojas de fundaciones en dos columnas: tokens, tipografía, spacing, radius e iconos

DS personalizable

Al igual que el Design System de wireframes, se requería uno de UI que añadiera un lenguaje visual y permitiera llevar un flujo a un producto más cercano al resultado final. Aunque no llega a ser un prototipo, incorpora microinteracciones, dando una solución gráfica sólida al problema de diseño.

DS personalizable

Con ayuda de Claude, se creó este segundo flujo de UI utilizando un color oscuro como primario y secundario. Aunque el resultado inicial funcionó bien, se cambiaron ambos colores para evaluar mejor el producto, teniendo que ajustar algunos componentes.

Portada de Camaleón DS con el panel, la ficha de producto y el carrito ya pintados

Tokenización de colores

En los primitivos se definieron 11 tonos por color, del 50 al 950, cada uno con un propósito específico para lograr mayor control y precisión en las personalizaciones. Por ejemplo, el 50 es un fondo tintado suave (background/brand-subtle), el fondo de un banner de estatus.

El panel de personalización junto a las rampas de color del sistema: neutral, primario, secundario, acento y los cuatro de estado, cada una del 50 al 950

Auditoría

A forma de prueba se construyó una landing utilizando casi todos los componentes del sistema, para validar tanto su apariencia como sus microinteracciones. Se alinearon las versiones light y dark, mostrando qué podría o no funcionar al personalizar.

La misma landing de prueba en modo oscuro y en modo claro, lado a lado
Tablero del átomo Chip: tamaños, estados y su uso en una barra de filtros, en claro y en oscuro Tablero del organismo Card grid: rejilla de proyectos recientes Tablero del organismo Data table con buscador, estados y paginación Tablero del átomo Slider
Tablero del organismo Cart: resumen de la orden con subtotal, envío y total Tablero del átomo Checkbox con sus cinco estados y el padre indeterminado
Tablero de la molécula Product card, en listado y en ficha Tablero del átomo Skeleton loader Tablero de la molécula Chart bars: ingresos contra egresos
Tablero de la molécula Carousel con sus flechas y puntos Tablero del organismo Pricing con tres planes Tablero de la molécula Search con sus estados Tablero del organismo Filter toolbar Tablero de la molécula Tabs con sus orientaciones y estados
Landing de ejemplo del sistema en modo claro: “Un sistema que cambia de piel, no de estructura”, con su fila de indicadores La misma landing en modo oscuro: misma estructura, otros tokens

UI adaptativa + pruebas e iteraciones

Para probar el potencial de “Wireframes DS” y “Camaleón DS”, desarrollamos el flujo completo en mobile de un proyecto propuesto. Partimos del research y la definición de una solución de diseño, que posteriormente se materializó utilizando los dos Design Systems creados.

Para llevarlo a cabo, utilizamos los Skills desarrollados con Claude, poniendo a prueba su capacidad para construir y transformar interfaces de principio a fin:

Skill “Wireframes DS”: arma pantallas y flujos en blanco y negro utilizando componentes, tokens y reglas predefinidas. Trabaja en formato mobile de 390 px y desktop de 1440 px, incorpora divisores entre bloques, entre otros.

Skill “Camaleón DS”: transforma los wireframes aplicando el sistema de UI, adapta el diseño a la identidad visual de una marca y verifica que los componentes mantengan sus tokens, estilos e imágenes correspondientes.

La prueba se realizó utilizando una marca reconocida del sector salud, que cuenta con una identidad visual claramente definida: tipografía, paleta de colores, radios, fotografía, entre otros elementos. Primero, se construyó el flujo en wireframes utilizando “Wireframes DS”, el resultado fue satisfactorio: el flujo se construyó correctamente y requirió pocos ajustes posteriores.

El flujo completo en wireframes: de la pantalla de inicio a la confirmación del pedido, con sus bifurcaciones

Resultado: Un buen traductor de flujos, desde wireframes de alta fidelidad hasta una interfaz con identidad de marca. Un Design System capaz de mimetizarse con una marca y transformar un flujo en grises en una experiencia visual coherente con su identidad.

Reto

Crear un DS capaz de generar flujos Mobile y Desktop, listos para ser personalizados según la identidad de una marca, reduciendo el tiempo de diseño.

Tablero del organismo Card grid: la misma rejilla de proyectos recientes en modo claro y en modo oscuro

Aprendizaje

Un Design System personalizable requiere iteración constante y siempre necesita criterio humano, especialmente por las limitaciones actuales del MCP.