Explorando la Experiencia Digital: Diseño Web UX/UI con Design Thinking

Este plan de clase está diseñado para que estudiantes universitarios en la asignatura de Diseño exploren y apliquen los principios del diseño web UX/UI utilizando la metodología Design Thinking. A lo largo de cuatro sesiones, los estudiantes aprenderán a empatizar con usuarios reales, definir problemas claros, idear soluciones creativas, prototipar interfaces y evaluar la experiencia de usuario. Este proceso les permitirá desarrollar competencias clave en diseño centrado en el usuario, pensamiento crítico y creatividad aplicada al entorno digital.

El diseño UX/UI es fundamental en la actualidad, pues determina cómo las personas interactúan con sitios web y aplicaciones, impactando su satisfacción y usabilidad. Los estudiantes comprenderán la importancia de crear experiencias significativas y accesibles que respondan a necesidades reales, conectando el aprendizaje con contextos actuales como el comercio electrónico, la educación en línea y la comunicación digital.

Este aprendizaje es relevante no solo para futuros diseñadores, sino para todos los profesionales que busquen innovar y mejorar la interacción digital en sus ámbitos. Además, la aplicación de Design Thinking fomenta un enfoque colaborativo y experimental, habilidades esenciales en el mundo laboral contemporáneo.

• Analizar las necesidades y comportamientos de usuarios mediante técnicas de empatía para identificar problemas de diseño UX/UI.
• Definir problemas de diseño web claros y específicos basados en la comprensión del usuario.
• Crear propuestas innovadoras de diseño UI a través de sesiones de ideación colaborativa.
• Desarrollar prototipos funcionales que representen soluciones de diseño web centradas en el usuario.
• Evaluar y retroalimentar prototipos para mejorar la experiencia de usuario usando pruebas y feedback.

• Computadoras con acceso a internet y software de diseño (Figma, Adobe XD o Sketch).
• Materiales para prototipado físico: papel, cartulinas, marcadores, post-its, tijeras y cinta adhesiva.
• Proyector y pantalla para presentaciones.
• Acceso a videos cortos sobre UX/UI y Design Thinking.
• Plantillas impresas para mapas de empatía y definición de problemas.
• Espacio amplio para trabajo en grupos y dinámicas colaborativas.

• Conocimientos básicos de diseño gráfico y composición visual.
• Familiaridad con conceptos generales de navegación web y aplicaciones digitales.
• Experiencia previa en trabajo colaborativo y dinámicas grupales.
• Habilidades básicas en manejo de software de diseño digital o disposición para aprenderlo en clase.

Sesión 1: Comprendiendo al Usuario y Definiendo Problemas en UX/UI

Fase de Inicio

Tiempo estimado: 20 minutos

Propósito de la sesión:

Conectar experiencias previas con la importancia de entender al usuario en el diseño web y presentar la metodología Design Thinking como marco para resolver problemas de UX/UI.

Activación de conocimientos previos:

Docente: "¿Pueden compartir alguna experiencia en la que hayan encontrado frustrante usar un sitio web o una app? ¿Qué les causó esa molestia?"

Estudiantes: Responden con ejemplos breves y reflexionan sobre las causas de esos problemas.

Motivación y enganche:

Docente: Presenta un dato reciente: "El 88% de los usuarios no vuelve a un sitio web después de una mala experiencia. Hoy aprenderemos a evitar eso diseñando pensando en el usuario."

Contextualización:

Docente: Explica cómo el diseño UX/UI impacta en la vida cotidiana, desde comprar en línea hasta estudiar o comunicarse, conectando con intereses actuales de los estudiantes.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido:

Docente: Introduce brevemente las fases de Design Thinking, enfocándose en empatizar y definir. Presenta herramientas como el mapa de empatía y la definición de problemas.

Actividad 1: Entrevistas y Mapa de Empatía

• Objetivo: Analizar necesidades y comportamientos de usuarios.
• Instrucciones:
• Formar parejas y realizar entrevistas entre ellos sobre la experiencia en un sitio web o app favorita, preguntando sobre emociones, frustraciones y deseos.
• Con base en la entrevista, cada pareja crea un mapa de empatía usando la plantilla impresa, organizando la información en categorías: pensar, sentir, decir, hacer, frustraciones y necesidades.
• Organización: Parejas
• Producto: Mapa de empatía físico o digital.
• Tiempo: 60 minutos
• Rol docente: Circular entre parejas, hacer preguntas guía como "¿Qué emociones identifican? ¿Qué problemas emergen?" y apoyar en la organización de ideas.

Actividad 2: Definición del Problema

• Objetivo: Definir problemas claros basados en la comprensión del usuario.
• Instrucciones:
• Cada pareja, con su mapa de empatía, redacta una declaración de problema clara y específica en formato: "Usuario [perfil] necesita [necesidad] porque [insight]."
• Compartir en plenaria y recibir retroalimentación para mejorar la claridad y enfoque.
• Organización: Parejas y plenaria
• Producto: Declaración de problema grupal.
• Tiempo: 50 minutos
• Rol docente: Facilita discusión, sugiere mejoras y destaca buenas prácticas en enunciados.

Diferenciación:

• Para estudiantes que terminan antes: Investigar ejemplos de buenas y malas experiencias UX/UI de sitios web populares.
• Para quienes requieren más apoyo: Trabajar con el docente para guiar la entrevista y estructurar el mapa de empatía.

Transición:

Docente: "Ahora que sabemos qué problemas realmente existen, en la próxima sesión comenzaremos a generar ideas para solucionarlos creativamente."

Fase de Cierre

Tiempo estimado: 10 minutos

Síntesis:

Solicitar a cada pareja escribir en un post-it la declaración de problema más importante y pegarlo en un mural colectivo.

Reflexión metacognitiva:

• ¿Cómo cambió tu forma de ver un sitio web después de empatizar con un usuario?
• ¿Qué dificultad encontraste al definir el problema?
• ¿Cómo crees que esta definición influirá en las soluciones que diseñaremos?

Retroalimentación:

Docente: Comenta individualmente o en grupos pequeñas, destacando avances y puntos de mejora en la definición del problema.

Transferencia y tarea:

Invitar a los estudiantes a observar un sitio web que usen frecuentemente y anotar posibles problemas UX para discutir en la siguiente sesión.

Sesión 2: Ideación y Generación de Soluciones Creativas

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito:

Revisar tareas y conectar con la importancia de idear soluciones innovadoras basadas en problemas definidos.

Activación de conocimientos previos:

Docente: "¿Qué problemas de UX encontraron en la tarea? ¿Qué ideas se les ocurrieron para mejorar esos sitios?"

Estudiantes: Comparten brevemente sus observaciones.

Motivación y enganche:

Presentar un video corto (3-4 min) con ejemplos exitosos de soluciones UX innovadoras.

Contextualización:

Explicar que hoy se enfocarán en liberar su creatividad para idear soluciones eficientes y centradas en usuario.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido:

Docente: Expone brevemente la fase de ideación en Design Thinking y presenta técnicas como brainstorming, SCAMPER y mapas mentales.

Actividad 1: Brainstorming Guiado

• Objetivo: Generar múltiples ideas para resolver problemas UX.
• Instrucciones:
• En grupos de 4, seleccionan una declaración de problema para enfocarse.
• Realizan una sesión de brainstorming de 20 minutos, usando reglas claras: no juzgar ideas, fomentar cantidad y diversidad.
• Registran todas las ideas en un mural o pizarra digital.
• Organización: Grupos de 4
• Producto: Mapa de ideas visual.
• Tiempo: 30 minutos
• Rol docente: Facilita, motiva, asegura participación equitativa y guía con preguntas como "¿Cómo esto mejora la experiencia del usuario?"

Actividad 2: Selección y Desarrollo de Ideas con SCAMPER

• Objetivo: Profundizar y mejorar ideas seleccionadas.
• Instrucciones:
• Cada grupo elige 2-3 ideas del brainstorming para aplicar la técnica SCAMPER (Sustituir, Combinar, Adaptar, Modificar, Poner en otro uso, Eliminar, Reorganizar).
• Desarrollan un breve esquema o dibujo que explique la idea mejorada.
• Organización: Grupos de 4
• Producto: Esquema o boceto con descripción de ideas mejoradas.
• Tiempo: 60 minutos
• Rol docente: Orienta en la aplicación de SCAMPER, pregunta "¿Qué aspecto cambia y cómo impacta al usuario?"

Actividad 3: Presentación y Feedback entre Pares

• Objetivo: Evaluar y enriquecer ideas mediante retroalimentación.
• Instrucciones:
• Cada grupo presenta sus ideas mejoradas a otro grupo, recibiendo comentarios constructivos con base en criterios de usabilidad, innovación y relevancia para el usuario.
• Registran sugerencias para ajustar sus propuestas.
• Organización: Grupos de 4 en parejas
• Producto: Retroalimentación escrita.
• Tiempo: 60 minutos
• Rol docente: Supervisa, facilita diálogo respetuoso y sugiere preguntas para profundizar el análisis.

Diferenciación:

• Estudiantes adelantados pueden explorar herramientas digitales para visualización de ideas (Miro, Jamboard).
• Apoyo adicional para quienes tienen dificultades visuales o expresivas mediante guías escritas y formatos alternativos.

Transición:

Docente: "En la próxima sesión transformaremos estas ideas en prototipos tangibles para compartir y evaluar."

Fase de Cierre

Tiempo estimado: 15 minutos

Síntesis:

Elaborar un mapa mental colectivo en la pizarra con las técnicas utilizadas y los principales aprendizajes.

Reflexión metacognitiva:

• ¿Qué técnica de ideación te resultó más útil y por qué?
• ¿Cómo aseguraron que las ideas respondieran a las necesidades del usuario?
• ¿Qué aprendiste del feedback recibido?

Retroalimentación:

Docente: Ofrece comentarios grupales destacando creatividad y enfoque en el usuario, sugiriendo mejoras para prototipar.

Transferencia y tarea:

Invitar a los estudiantes a buscar ejemplos de prototipos digitales o físicos en UX/UI para discutir en la próxima sesión.

Sesión 3: Prototipado y Creación de Interfaces Funcionales

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito:

Conectar la ideación con la construcción práctica de prototipos para validar ideas.

Activación:

Docente: "¿Qué recuerdan sobre prototipos? ¿Han usado alguna vez un prototipo digital o físico?"

Estudiantes: Comparten experiencias breves.

Motivación:

Mostrar ejemplos visuales de prototipos de baja y alta fidelidad en UX/UI y su función en el proceso de diseño.

Contextualización:

Explicar que el prototipado permite materializar ideas y obtener retroalimentación real antes de construir el producto final.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido:

Docente: Introduce tipos de prototipos (baja, media, alta fidelidad) y herramientas digitales para su creación.

Actividad 1: Prototipado en Papel

• Objetivo: Crear prototipos básicos que representen interfaces y flujos de usuario.
• Instrucciones:
• En grupos, diseñar prototipos de papel para la interfaz principal de la solución planteada, incluyendo pantallas clave y navegación.
• Usar materiales disponibles: papel, marcadores, tijeras y post-its.
• Organización: Grupos de 4
• Producto: Prototipo físico de interfaz.
• Tiempo: 60 minutos
• Rol docente: Orienta en asegurar flujo lógico y experiencia amigable, haciendo preguntas como "¿Cómo navega el usuario?"

Actividad 2: Digitalización del Prototipo

• Objetivo: Representar digitalmente el prototipo para facilitar pruebas y mejoras.
• Instrucciones:
• Usando Figma, Adobe XD o Sketch, cada grupo replica su prototipo en formato digital básico, enfocándose en estructura y navegación.
• Incluir interacción simple entre pantallas (links o botones simulados).
• Organización: Grupos de 4
• Producto: Prototipo digital funcional de baja fidelidad.
• Tiempo: 80 minutos
• Rol docente: Apoya con manejo de software, sugiere mejoras y verifica coherencia de navegación.

Diferenciación:

• Estudiantes avanzados pueden agregar interacciones más complejas o animaciones básicas.
• Para quienes requieren apoyo, el docente ofrece tutoriales guiados y plantillas prediseñadas.

Transición:

Docente: "La siguiente sesión pondremos a prueba estos prototipos con usuarios para evaluar y mejorar."

Fase de Cierre

Tiempo estimado: 15 minutos

Síntesis:

Cada grupo resume en 3 frases qué aprendieron del prototipado y cómo representa su idea.

Reflexión metacognitiva:

• ¿Qué dificultades encontraron al pasar del prototipo físico al digital?
• ¿Cómo aseguraron que su prototipo sea intuitivo para el usuario?
• ¿Qué elementos consideran prioritarios para mejorar?

Retroalimentación:

Docente: Proporciona comentarios en grupo y sugiere ajustes para la evaluación con usuarios.

Transferencia y tarea:

Preparar una breve presentación para explicar su prototipo y los objetivos de prueba para la siguiente sesión.

Sesión 4: Evaluación, Retroalimentación y Mejora Continua

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito:

Recordar objetivos de la evaluación y preparar a estudiantes para pruebas de usuario y feedback.

Activación:

Docente: "¿Por qué es importante probar un prototipo antes de construir el producto final? ¿Qué esperan aprender?"

Estudiantes: Comparten expectativas.

Motivación:

Mostrar breve caso de éxito donde la evaluación mejoró significativamente la experiencia final.

Contextualización:

Explicar que la evaluación es clave para iterar y perfeccionar soluciones UX/UI.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido:

Docente: Explica técnicas de evaluación: pruebas con usuarios, observación directa, listas de cotejo y feedback estructurado.

Actividad 1: Prueba de Usuario y Observación

• Objetivo: Evaluar la usabilidad del prototipo con usuarios reales.
• Instrucciones:
• Cada grupo intercambia prototipos con otro grupo.
• Realizan pruebas simulando tareas específicas, observando puntos de dificultad y anotando reacciones.
• El grupo evaluado recibe observaciones y sugerencias.
• Organización: Grupos de 4 en parejas
• Producto: Informe breve de observación y feedback.
• Tiempo: 80 minutos
• Rol docente: Supervisa interacción, interviene para aclarar dudas y asegura clima respetuoso.

Actividad 2: Retroalimentación y Plan de Mejora

• Objetivo: Integrar feedback para planificar ajustes en el diseño.
• Instrucciones:
• Cada grupo analiza el informe recibido y discute posibles mejoras.
• Elabora un plan de acción para modificar el prototipo, priorizando aspectos clave.
• Organización: Grupos de 4
• Producto: Plan de mejora escrito.
• Tiempo: 60 minutos
• Rol docente: Asesora en priorización y factibilidad, fomenta autoevaluación crítica.

Diferenciación:

• Para estudiantes avanzados: Proponer nuevas iteraciones del prototipo digital con ajustes.
• Para apoyo adicional: El docente facilita guías estructuradas para analizar feedback.

Transición:

Docente: "Este proceso de evaluación y mejora es constante en el diseño UX/UI, y ahora están preparados para aplicarlo en proyectos reales."

Fase de Cierre

Tiempo estimado: 15 minutos

Síntesis:

Realizar un "ticket de salida" donde cada estudiante escribe en una tarjeta:

• Una cosa que aprendió sobre evaluación UX/UI.
• Un desafío que enfrentó.
• Una meta para seguir mejorando.

Reflexión metacognitiva:

• ¿Cómo mejoró tu prototipo tras la evaluación?
• ¿Qué habilidades de Design Thinking fortaleciste en este proceso?
• ¿Cómo aplicarás estos aprendizajes en futuros proyectos?

Retroalimentación:

Docente: Ofrece comentarios finales celebrando el progreso y orientando pasos siguientes en la formación profesional.

Transferencia y cierre:

Invitar a los estudiantes a reflexionar sobre la importancia del usuario en cualquier diseño y a continuar practicando iterativamente.

Tarea o reto:

Desarrollar un portafolio digital con el registro del proceso completo, incluyendo mapas, ideas, prototipos y evaluaciones para presentar en la siguiente asignatura o proyecto.

Tipo de evaluación:

• Diagnóstica: Activación de conocimientos en la sesión 1 con discusión inicial sobre experiencias de usuario.
• Formativa: Durante todas las actividades de Desarrollo: mapas de empatía, definición de problemas, ideas generadas, prototipos y evaluaciones con usuarios, con retroalimentación continua.
• Sumativa: Producto final del plan de mejora y portafolio digital que evidencia integración de todo el proceso.

Criterios de evaluación:

• Capacidad para analizar y sintetizar necesidades reales del usuario (Objetivo 1).
• Claridad y precisión en la definición de problemas de diseño (Objetivo 2).
• Creatividad y pertinencia en la generación de ideas (Objetivo 3).
• Habilidad para construir prototipos funcionales y coherentes (Objetivo 4).
• Capacidad para evaluar y mejorar diseños a partir de retroalimentación (Objetivo 5).

Instrumentos sugeridos:

• Rúbrica para evaluar mapas de empatía, prototipos y planes de mejora.
• Lista de cotejo para seguimiento de participación y aplicación de técnicas.
• Observación directa durante actividades grupales.
• Autoevaluación y coevaluación en presentaciones y feedback entre pares.
• Portafolio digital como evidencia integradora.

Evidencias de aprendizaje:

• Mapas de empatía y declaraciones de problema.
• Registros de ideación y selección de ideas.
• Prototipos físicos y digitales.
• Informes de evaluación y planes de mejora.
• Portafolio digital que documenta todo el proceso.