Diseña una Experiencia de Usuario Completa

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:

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.