Diseña una Experiencia de Usuario Completa
Aplica todo lo que aprendiste para diseñar una experiencia de usuario completa desde investigación hasta sistema de diseño, usando IA en cada etapa.
Contenido de Curso Premium
Esta lección es parte de un curso premium. Mejora a Pro para desbloquear todos los cursos premium y su contenido.
- Acceso a todos los cursos premium
- Más de 1000 plantillas de skills de IA incluidas
- Contenido nuevo cada semana
Juntando Todo
🔄 Repaso rápido: En la lección anterior, exploramos sistemas de diseño y librerías de componentes. Ahora viene el momento de integrar todo — desde investigación hasta design system, pasando por cada fase intermedia.
A lo largo de las últimas siete lecciones, aprendiste a usar IA para investigación de usuarios, construcción de personas, wireframing, UX copy, accesibilidad y sistemas de diseño. Cada habilidad es valiosa por sí sola. Pero el verdadero poder viene de combinarlas en un workflow completo.
Este capstone te lleva paso a paso por el diseño de una experiencia de usuario completa desde cero, usando IA en cada etapa. Verás cómo cada lección se conecta y cómo el workflow asistido por IA comprime lo que antes tomaba semanas en días.
El Reto: Diseña una App de Facturación para Freelancers
Aquí está tu brief:
Producto: Una app de facturación mobile-first para freelancers Problema: Los freelancers pierden horas creando facturas, persiguiendo pagos, y rastreando lo que les deben. La mayoría de herramientas de facturación están hechas para empresas con equipos de contabilidad, no para freelancers independientes manejando múltiples clientes. Usuarios objetivo: Freelancers independientes (diseñadores, developers, escritores, consultores) que facturan a 5-20 clientes por mes Restricción clave: Debe ser usable con una sola mano en el celular mientras van en el transporte
Sigue cada fase, usando tu asistente de IA para completar los ejercicios.
Fase 1: Investigación y Descubrimiento
Empieza por entender el espacio del problema. Incluso sin acceso a usuarios reales, la IA te ayuda a construir una base de suposiciones informadas que validarías después con investigación real.
Ejercicio 1: Panorama competitivo
Pide a la IA analizar competidores como FreshBooks, Wave, Invoice Ninja, PayPal Invoicing, y Square Invoices. Para cada uno: audiencia primaria, fortalezas para freelancers, debilidades para freelancers, modelo de precios, calidad de experiencia móvil. Luego identifica gaps compartidos, features que ninguno hace bien, y la mayor oportunidad de diferenciación.
Ejercicio 2: Preguntas de investigación
Basándote en el análisis competitivo, genera un plan de investigación: 10 preguntas de entrevista sobre workflow de facturación, datos comportamentales que querrías observar, preguntas de encuesta para cuantificar el problema, y suposiciones que necesitan validación.
Fase 2: Desarrollo de Personas
Usando el panorama competitivo y tu entendimiento de freelancers, construye personas.
Ejercicio 3: Crea dos personas
Genera dos personas: (1) un freelancer que factura frecuentemente (15+ clientes/mes) y valora velocidad sobre todo, y (2) un freelancer que factura ocasionalmente (3-5 clientes/mes) y necesita guía en el proceso. Para cada uno: nombre, edad, profesión, metas, frustraciones, patrones comportamentales, escenario de uso, y factores de decisión.
Revisa las personas. ¿Se sienten como personas reales para las que puedes diseñar? Refina cualquier detalle que se sienta genérico.
Fase 3: Arquitectura de Información
Antes de wireframear pantallas, mapea la estructura de la app.
Ejercicio 4: Define la AI
Diseña la arquitectura de información con estos features core: crear y enviar facturas, trackear estatus de pago, gestionar directorio de clientes, ver ingresos y reportes, configurar métodos de pago, templates de facturas, facturas recurrentes, y recordatorios de pago. Proporciona: estructura de navegación (tab bar items para móvil), jerarquía de pantallas, modelo de contenido (objetos de datos y sus relaciones), y flujos de usuario para las top 3 tareas.
Fase 4: Wireframing
Ahora diseña las pantallas clave.
Ejercicio 5: Genera conceptos de wireframe
Diseña conceptos para las 3 pantallas más importantes: (1) Home/Dashboard — debe mostrar total pendiente, facturas vencidas, actividad reciente, y habilitar creación rápida de factura, usable con una mano. (2) Crear Factura — completable en menos de 60 segundos para clientes recurrentes, con auto-fill de facturas anteriores, mínimo tipeo en móvil. (3) Detalle de Factura/Estatus de Pago — estatus prominente (borrador, enviada, vista, pagada, vencida), acciones de enviar recordatorio, marcar como pagada, editar, duplicar.
Para cada pantalla: dos enfoques estructurales, jerarquía de contenido, patrones de interacción, y cómo adaptar para power users vs. casuales.
✅ Revisión rápida: A estas alturas del proceso, deberías tener: análisis competitivo, dos personas, arquitectura de información, y conceptos de wireframe para tres pantallas clave. Nota cómo cada fase alimenta a la siguiente. Las personas informan los wireframes. La AI determina la navegación. La investigación moldea el feature set. La IA aceleró cada fase, pero tu juicio de diseño las conecta.
Fase 5: UX Copy
Con los wireframes esbozados, escribe el copy de la interfaz.
Ejercicio 6: Escribe UX copy clave
Define la voz como amigable, eficiente, y que construya confianza (los freelancers muchas veces se sienten incómodos con el tema del dinero — la app debería hacer que facturar se sienta profesional y fácil). Escribe copy para: (1) empty state del dashboard para primer uso, (2) flujo de crear factura (títulos, labels, placeholders, botón submit, confirmación), (3) notificación de factura vencida (push notification, banner in-app, email de recordatorio sugerido), (4) estados de error (envío fallido, email inválido, método de pago no configurado), (5) estados de éxito (factura enviada, pago recibido, factura recurrente configurada).
Fase 6: Auditoría de Accesibilidad
Antes de finalizar, verifica accesibilidad.
Ejercicio 7: Audita tu diseño
Revisa contraste de color para todas las combinaciones texto/fondo, independencia de color en indicadores de estatus, etiquetas ARIA para todos los elementos basados en íconos, accesibilidad de gestos de swipe (necesitan alternativa), tamaños de target de toque, y flujo de lector de pantalla para el dashboard.
Pon atención al tema del gesto de swipe. Las interacciones basadas en swipe siempre deben tener una alternativa no-gestual para usuarios que no pueden realizar movimientos de swipe.
Fase 7: Fundación del Sistema de Diseño
Finalmente, establece la fundación del design system para tu app.
Ejercicio 8: Define tu librería de componentes
Basándote en las pantallas diseñadas, lista los componentes necesarios organizados en categorías: Foundation (tokens, tipografía, spacing), Navigation (tabs, headers), Inputs (text fields, dropdowns, toggles), Display (cards, badges, listas, gráficos), Feedback (alerts, toasts, loading states), Actions (buttons, FABs, menús). Para cada componente: nombre, variantes necesarias, props, requisitos de accesibilidad, y guía de uso en una línea. Prioriza: ¿qué 10 componentes deberían construirse primero para las pantallas MVP?
Reflexión: El Proceso de Diseño Asistido por IA
Mira lo que lograste en este capstone:
| Fase | Tiempo Tradicional | Tiempo con IA |
|---|---|---|
| Análisis competitivo | 2-3 días | 30 minutos |
| Desarrollo de personas | 1-2 días | 1 hora |
| Arquitectura de información | 1 día | 30 minutos |
| Exploración de wireframes | 2-3 días | 2 horas |
| UX copy | 1-2 días | 1 hora |
| Auditoría de accesibilidad | 1 día | 30 minutos |
| Fundación del design system | 2-3 días | 1 hora |
Total: 10-15 días comprimidos a 1-2 días.
Y lo más importante: la calidad no es menor. Estás haciendo el mismo trabajo. Solo estás gastando tu tiempo en juicio y decisiones en lugar de en las partes mecánicas de síntesis de investigación, escritura de documentación, y verificación de consistencia.
Tu Toolkit de UX (Lo Que Construiste)
A lo largo de este curso, armaste un toolkit de prompts y workflows de IA para:
- Síntesis de investigación — Analizar entrevistas, encuestas, y datos competitivos
- Construcción de personas — Crear y mantener personas basadas en datos
- Wireframing — Explorar opciones estructurales y diseños de componentes
- UX copy — Escribir botones, errores, empty states, y microcopy
- Accesibilidad — Auditar contraste, ARIA, navegación por teclado, e independencia de color
- Sistemas de diseño — Documentar componentes y mantener consistencia
Cada habilidad es reutilizable. Guarda tus mejores prompts. Refínalos para tus productos específicos. Construye una librería personal de workflows de UX asistidos por IA.
Conclusiones Clave
- La IA comprime el tiempo de procesos UX sin reducir calidad — gastas tiempo en decisiones, no en mecánica
- Cada fase de diseño UX se beneficia de la IA: investigación, personas, wireframes, copy, accesibilidad, sistemas
- El valor del diseñador humano aumenta con IA — juicio, empatía y visión creativa son más importantes que nunca
- Construye una librería de prompts reutilizable para tus tareas UX recurrentes
- Siempre valida outputs de IA contra datos reales de usuarios y tu conocimiento del dominio
- Accesibilidad desde el inicio es más barata y mejor que retrofitting
- Los design systems mantenidos con documentación de IA sobreviven más tiempo
Felicidades por completar el curso. Ve a diseñar algo que le haga el día un poco más fácil a alguien.
Comprobación de Conocimientos
Primero completa el quiz de arriba
¡Lección completada!