DISEÑO UX · ANTES DEL CÓDIGO Research + prototipos funcionales

Un prototipo que
funciona antes
de escribir código.

Quick answer

El UX no es "pantallitas lindas". Es research real con usuarios reales + definición de flujos + wireframes low-fi + prototipos hi-fi clickeables. El objetivo: que el cliente pueda usar el producto digital en Figma antes de que el programador escriba una línea de código. Los cambios en esta etapa son 10-100× más baratos que en la etapa de desarrollo.

Pedí una demo → Ver qué hace
10×
Más barato que cambiar código
Figma
Prototipos funcionales
Research
Con usuarios reales
Mobile
First desde el día 1
user flow · onboarding
01 Landing
02 Sign up
03 Welcome
04 Setup
05 Tour
06 Dashboard
↑ Flow real de onboarding · 6 pantallas clickeables en Figma
Qué no es UX

UX de verdad vs "vamos a hacer pantallitas"

La mayoría de los proyectos llaman "UX" a lo que es solo UI. Son cosas distintas con impacto distinto.

UX fake (UI pintado)
  • ✕ "Mandame lo que hay en mente y lo pinto"
  • ✕ Sin hablar con usuarios reales nunca
  • ✕ Pantallas individuales sin flujo que las conecte
  • ✕ Decisiones visuales basadas en "me gusta"
  • ✕ Cero testing, cero validación antes de entregar
  • ✕ Cuando el dev construye, aparecen 50 casos no pensados
VS
UX en serio
  • ✓ Research con usuarios reales del producto
  • ✓ Flujos completos con todas las ramas y casos borde
  • ✓ Wireframes antes de tocar color o tipografía
  • ✓ Prototipos clickeables navegables en Figma
  • ✓ Testing de usabilidad con usuarios antes de desarrollar
  • ✓ Handoff al dev con specs completas
Proceso UX

7 pasos desde el problema al prototipo

No abrimos Figma el día 1. El diseño visual es el último paso, no el primero.

01

Entender el problema

Sesiones con el cliente para entender qué problema de negocio resuelve el producto digital. No "qué features tiene que tener": qué problema real del usuario final vamos a solucionar.

02

Research con usuarios

Entrevistas con 5-8 usuarios reales del producto o del público objetivo. Observación de cómo usan lo que hay hoy. Identificación de puntos de fricción y expectativas.

03

User personas + jobs to be done

Dos o tres perfiles claros con motivaciones, contexto y objetivos. "Jobs to be done" para entender qué contrata el usuario al producto. No demografía vacía.

04

User flows + arquitectura de información

Diagrama del flujo completo desde la entrada hasta el objetivo. Todas las ramas, los casos de error, los caminos alternativos. Arquitectura de pantallas con prioridad de contenido.

05

Wireframes low-fi

Pantallas en blanco y negro sin color, sin tipografía final. Solo estructura y jerarquía. Sirve para validar el qué va dónde antes de preocuparse por el cómo se ve.

06

Prototipo hi-fi + design system

Pantallas finales con color, tipografía, iconos y micro-interacciones. Clickeable en Figma para navegar el producto real. Con design system reutilizable como base para el dev.

Entregables concretos

6 cosas que te llevás del proyecto UX

01

Reporte de research

Documento con los hallazgos del research con usuarios: quotes reales, patrones, fricciones detectadas, oportunidades, priorización. No 80 páginas: 8-15 con lo que importa.

02

User personas + journey

Perfiles de usuario con nombre, contexto, motivaciones, pains, jobs to be done. Journey map con todos los touchpoints desde que descubre el producto hasta que lo usa habitualmente.

03

User flows completos

Diagramas del flujo principal y los alternativos. Casos de error, estados de loading, vacíos y éxitos. El flow es el mapa que el dev va a seguir.

04

Wireframes low-fi

Estructura de cada pantalla sin color ni diseño final. Sirve para decisiones de contenido, prioridad y navegación. Se itera rápido acá antes de invertir en el diseño visual.

05

Prototipo hi-fi en Figma

Producto navegable con diseño final, interacciones, transiciones y micro-animaciones. El cliente puede "usarlo" antes del desarrollo. Se comparte con stakeholders para decisiones.

06

Design system

Componentes reutilizables (botones, inputs, cards, navegación), tokens de color y tipografía, reglas de spacing, estados de hover/focus/disabled. Base para que el dev construya sin improvisar.

Herramientas

Con qué trabajamos

Diseño + prototipos
  • Figma (core del trabajo)
  • FigJam para whiteboarding
  • Penpot como alternativa open source
  • Framer para prototipos avanzados
Research + testing
  • Maze · Lyssna para tests remotos
  • Loom para entrevistas asincrónicas
  • Notion para documentación
  • Hotjar para heatmaps en sitios vivos
Design systems
  • Figma Variables + Components
  • Tokens Studio para tokens
  • Storybook para documentación de código
  • shadcn/ui como base code
Handoff + colaboración
  • Figma dev mode
  • Zeplin como alternativa
  • GitHub Issues para feedback
  • Linear para coordinación con dev
Se combina con

UX antes que cualquier desarrollo

Todo proyecto de desarrollo serio arranca con UX. Sin excepción.

→ Apps a medida

Apps con UX real

Las apps mobile y web sin UX previo fallan en adopción. El proceso arranca con wireframes y prototipos navegables antes de tocar código.

→ Apps a medida

Apps con UX real

Las apps mobile y web sin UX previo fallan en adopción. El proceso arranca con wireframes y prototipos navegables antes de tocar código.

→ Desarrollo web

Sitio diseñado, no improvisado

Todo sitio custom arranca con UX. Los sitios WordPress con theme ajustado también se benefician de UX cuando el proyecto lo justifica.

→ Software con IA

UX para herramientas internas

Paneles internos, dashboards y herramientas con IA necesitan UX para que el equipo realmente los use. Feature sin UX = feature no usada.

Preguntas frecuentes

Dudas típicas sobre UX

¿Qué diferencia hay entre UX y UI?
UX (User Experience) es el diseño de la experiencia completa: qué pasos sigue el usuario, qué flujos usa, qué problemas resuelve, cómo se siente usando el producto. UI (User Interface) es el diseño visual: colores, tipografías, iconos, layouts, animaciones. UX es más amplio y estratégico; UI es más visual y estético. Un proyecto serio necesita las dos cosas, pero UX va primero.
¿Cuánto tarda un proyecto de UX?
Un proyecto UX para una web simple (5-10 pantallas): 3-5 semanas. Para una app completa o SaaS con 20+ pantallas: 6-12 semanas. Para proyectos complejos con research extenso, múltiples rondas de testing y design system robusto: 3-4 meses. No se puede saltar el research: eso es lo que hace que después el código no se tire.
¿Vale la pena gastar en UX antes del desarrollo?
Sí, y lo podemos demostrar con números. Un cambio detectado en el research cuesta 10× más barato que detectarlo en wireframes. Un cambio en wireframes cuesta 10× menos que en prototipo hi-fi. Y un cambio en prototipo cuesta 10-100× menos que rehacer código ya escrito. Sin UX previo, los proyectos de desarrollo tienen 30-50% de retrabajo. Con UX previo, el retrabajo baja al 5-15%.
¿Hacen research con usuarios reales?
Sí. Entrevistas 1:1 con usuarios del producto (si ya existe) o del público objetivo (si es nuevo). Typical: 5-8 entrevistas por ronda. También hacemos testing de usabilidad con prototipo en Figma antes del desarrollo. Con 5 usuarios se detectan ~85% de los problemas de usabilidad (regla de Nielsen).
¿Qué herramientas usan?
Core: Figma para todo el diseño, prototipos y colaboración. FigJam para whiteboarding y flow mapping. Complementos: Maze/Lyssna para testing remoto, Notion para documentación, Loom para reportes asincrónicos. Entregamos todo en Figma con archivos compartibles.
¿Hacen solo UX o también implementan?
Las dos cosas. Podés contratar solo UX (y después llevás los archivos a cualquier dev) o UX + desarrollo con nosotros. Trabajar ambos en el mismo equipo tiene ventajas: el dev participa en decisiones de diseño desde el principio y el diseñador tiene feedback técnico temprano sobre qué es realista.
Diagnóstico gratuito

¿Tu proyecto necesita UX antes del código?

30 minutos revisando tu idea. Te decimos qué tanto UX necesitás y en qué orden arrancar. A veces la respuesta es "hagamos research primero" y a veces es "los wireframes son suficientes". Sin venderte el scope más grande.

Agendar diagnóstico WhatsApp directo