Projects

Case studies

Proyectos moldeados por restricciones de producto, no solo por decisiones tecnologicas.

El trabajo se presenta como ocurre en la practica: contexto de negocio, decisiones de implementacion y detalles frontend que cambiaron el resultado.

2025

Renovacion frontend para comercio

Reconstruccion del flujo de compra para una experiencia de alto trafico donde velocidad, confianza y claridad impactaban la conversion.

Featured case

Context

El producto tenia flujos fragmentados, calidad visual inconsistente y friccion medible durante la primera compra.

Approach

Introduje una arquitectura modular en React, fortalezi la superficie del sistema de diseno y priorice mejoras de secuencia en lugar de ajustes aislados.

Why it matters

Representa trabajo donde la calidad frontend esta conectada con resultados de negocio, experimentacion y decisiones cross-funcionales.

Key decisions

Performance

Diferi analitica no critica, reduje superficies de hidratacion y optimice imagenes en las pantallas con mayor impacto en conversion.

Simplifique puntos de decision, mejore jerarquia y agregue feedback mas claro sobre precios, validacion y progreso del checkout.

Accessibility

Mejore manejo de foco, semantica de errores y navegacion por teclado en modales e interacciones por pasos.

Tech stack

Next.js
TypeScript
Design Systems
Analytics

Signals

LCP -34%
Conversion +11%
CLS 0.02

2024

Dashboard de observabilidad de plataforma

Disene una interfaz operativa interna para equipos que toman decisiones sensibles al tiempo a partir de datos ruidosos y distribuidos.

Featured case

Context

Los operadores dependian de dashboards desconectados con terminologia inconsistente y flujos lentos durante incidentes.

Approach

Reestructure el modelo de informacion, cree patrones reutilizables y alinee ingenieria y diseno con las prioridades del operador.

Why it matters

Demuestra como el pensamiento de producto, la accesibilidad y el diseno de sistemas influyen interfaces enterprise mas alla de superficies de marketing.

Key decisions

Performance

Virtualice tablas densas, introduje priorizacion de requests y movi calculos derivados fuera de la ruta de render.

Separe estados de monitoreo de estados orientados a accion para soportar escaneo rapido y diagnostico profundo.

Accessibility

Agregue anuncios no visuales de estado, mejore descripciones de graficas y fortalezi comunicacion de estados independiente del color.

Tech stack

React
Node
SQL
Data Viz

Signals

TTI -28%
Task time -22%
Audit score 100

2026

Experimento interactivo de marca

Construccion de un prototipo experimental para explorar como movimiento y profundidad pueden reforzar narrativa sin degradar performance.

Featured case

Context

El reto fue equilibrar visuales expresivos con disciplina de produccion y fallbacks accesibles.

Approach

Aisle la experiencia del shell principal, use mejora progresiva y trate el movimiento como contenido y no como decoracion.

Why it matters

Captura la interseccion entre pulido de producto, rigor tecnico y curiosidad por interfaces emergentes.

Key decisions

Performance

Mantengo WebGL aislado, hago code-splitting de la escena y evito enviar codigo pesado a las rutas principales.

Use movimiento para guiar la atencion y reforzar jerarquia sin competir con el mensaje.

Accessibility

Conserve contexto estatico legible, contraste resiliente y contenido significativo fuera de la capa animada.

Tech stack

React Three Fiber
GSAP
WebGL
Motion Design

Signals

Lazy loaded
Reduced JS on main route
Motion safe