Innovando Experiencias Digitales: Proyecto Integral de Diseño Web UX/UI

Este plan de clase está diseñado para que estudiantes universitarios de diseño desarrollen competencias clave en diseño web UX/UI mediante la metodología de Aprendizaje Basado en Proyectos (ABP). A lo largo de cuatro sesiones intensivas, los estudiantes trabajarán colaborativamente para crear un prototipo funcional de sitio web que responda a una necesidad real, integrando principios de experiencia de usuario (UX) y diseño de interfaz (UI).

El propósito es que los estudiantes comprendan cómo aplicar teorías y metodologías de UX/UI en contextos reales, desarrollando habilidades técnicas, creativas y de trabajo en equipo que son vitales en el mercado actual del diseño digital. Además, se busca fortalecer su autonomía, pensamiento crítico y capacidad para iterar y mejorar sus propuestas basándose en retroalimentación.

Este plan conecta directamente con la vida profesional futura de los estudiantes, preparándolos para enfrentar retos reales en el ámbito digital, desde la conceptualización hasta la entrega de un producto tangible que aporte valor y facilite experiencias digitales memorables.

• Analizar principios fundamentales de UX/UI para identificar necesidades de usuarios en un contexto digital.
• Diseñar prototipos funcionales de interfaces web que integren aspectos de usabilidad, accesibilidad y estética.
• Crear soluciones innovadoras mediante herramientas digitales de diseño colaborativo y prototipado.
• Evaluar y mejorar iterativamente diseños basándose en pruebas de usuario y retroalimentación grupal.
• Argumentar decisiones de diseño en función de objetivos de usuario y criterios técnicos.

• Computadoras con acceso a Internet y software de diseño UX/UI (Figma, Adobe XD o Sketch)
• Proyector y pantalla para presentaciones grupales
• Cuadernos o tablets para tomar notas y bocetar ideas
• Material impreso: guías rápidas de principios UX/UI, cuestionarios para pruebas de usuario
• Acceso a plataformas colaborativas (Google Drive, Trello o Miro)
• Recursos audiovisuales: videos cortos sobre tendencias actuales en UX/UI

• Conocimientos básicos de diseño gráfico y fundamentos de diseño digital
• Habilidades básicas en manejo de software de diseño (cualquier editor gráfico o vectorial)
• Experiencia previa en trabajo en equipo y proyectos colaborativos
• Conceptos introductorios de usabilidad y experiencia de usuario (idealmente de cursos anteriores)

Sesión 1: Introducción al Diseño UX/UI y Definición del Proyecto

Fase de Inicio

Tiempo estimado: 30 minutos

Propósito de la sesión: Presentar el tema y objetivos, motivar a los estudiantes mediante un reto real, y activar conocimientos previos sobre UX/UI.

Activación de conocimientos previos

• Docente: Presenta un breve video (5 min) que muestra un caso de éxito de diseño UX/UI en un sitio web popular.
• Docente: Pregunta detonadora: "¿Qué elementos del sitio web creen que mejoran la experiencia del usuario? ¿Por qué?"
• Estudiantes: Responden en una lluvia de ideas en plenaria, anotando conceptos clave en el pizarrón.

Motivación y enganche

• Docente: Expone un dato curioso: "El 88% de los usuarios no regresan a un sitio web después de una mala experiencia".
• Docente: Propone el reto final: diseñar un prototipo UX/UI para un cliente ficticio con un problema real.
• Estudiantes: Expresan sus expectativas y posibles ideas iniciales.

Contextualización

• Docente: Explica cómo el diseño UX/UI impacta en múltiples áreas profesionales y en la vida cotidiana digital de los estudiantes (apps, sitios web, plataformas de educación, etc.).
• Estudiantes: Comparten experiencias personales y profesionales relacionadas con la usabilidad digital.

Fase de Desarrollo

Tiempo estimado: 140 minutos

Presentación del contenido: Introducción al proceso de diseño UX/UI a través de un esquema visual que resalta investigación, ideación, prototipado y evaluación.

Actividades de aprendizaje activo

• Actividad 1: Análisis de usuarios y definición del problema
  • Objetivo: Analizar necesidades para definir un problema claro de diseño.
  • Instrucciones:
    • Formar grupos de 4 estudiantes.
    • Cada grupo recibe un brief con un cliente ficticio y contexto (problema digital real).
    • Discutir y listar posibles necesidades y retos del usuario.
    • Redactar una declaración clara del problema en formato: "Cómo podríamos...".
  • Organización: Grupos de 4.
  • Producto: Declaración del problema y lista de necesidades.
  • Tiempo: 50 minutos.
  • Rol docente: Facilita discusión, formula preguntas guía: "¿Qué frustraciones tiene el usuario? ¿Qué soluciones existen ya?"
• Actividad 2: Mapeo de experiencia y creación de arquetipos
  • Objetivo: Diseñar perfiles de usuario y mapear su experiencia actual.
  • Instrucciones:
    • Guiar a grupos para construir arquetipos basados en datos del brief.
    • Elaborar un customer journey map que evidencie puntos de dolor y oportunidades.
  • Organización: Grupos de 4.
  • Producto: Arquetipo y mapa de experiencia visual.
  • Tiempo: 50 minutos.
  • Rol docente: Asiste con ejemplos y supervisa avances, fomenta precisión y creatividad.
• Actividad 3: Bocetaje rápido de soluciones
  • Objetivo: Iniciar la generación de ideas de interfaz y flujo de usuario.
  • Instrucciones:
    • Cada grupo realiza bocetos rápidos (wireframes) en papel o tablet.
    • Seleccionar ideas principales para el prototipo.
  • Organización: Grupos de 4.
  • Producto: Bocetos iniciales de interfaz.
  • Tiempo: 40 minutos.
  • Rol docente: Da retroalimentación inmediata y sugiere mejoras.

Diferenciación

• Para estudiantes que terminan antes: diseñar un flujo alternativo o funcionalidad extra para su prototipo.
• Para quienes requieran apoyo: ofrecer ejemplos adicionales, apoyo en herramientas o trabajar en parejas para reforzar conceptos.

Transición

Docente: Resume las propuestas y anuncia que en la siguiente sesión se profundizará en el diseño digital y prototipado.

Fase de Cierre

Tiempo estimado: 10 minutos

• Síntesis: Cada grupo comparte en una frase la declaración del problema y una solución propuesta.
• Reflexión metacognitiva:
  • ¿Cuál fue el mayor reto para definir el problema de usuario?
  • ¿Cómo influyó el análisis de usuario en sus ideas de diseño?
• Retroalimentación: Comentarios breves del docente sobre claridad y enfoque de problemas.
• Transferencia: Se explica que en la próxima sesión se utilizarán herramientas digitales para materializar estas ideas.
• Tarea: Investigar ejemplos de sitios web con buen diseño UX/UI y traer 2 referencias con justificación para compartir.

Sesión 2: Herramientas Digitales y Prototipado Inicial

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión: Conectar con la sesión anterior y presentar el uso de herramientas digitales para el prototipado UX/UI.

Activación de conocimientos previos

• Docente: Solicita a estudiantes compartir las referencias investigadas (2 min por grupo).
• Estudiantes: Presentan y argumentan brevemente sus ejemplos.

Motivación y enganche

• Docente: Muestra un prototipo interactivo y plantea: "¿Cómo podemos crear esto paso a paso?"
• Estudiantes: Expresan expectativas sobre el uso de software de prototipado.

Contextualización

• Docente: Explica la importancia de prototipos digitales para validar ideas y facilitar colaboración.
• Estudiantes: Reflexionan sobre ventajas y desafíos del prototipado digital.

Fase de Desarrollo

Tiempo estimado: 155 minutos

Presentación del contenido: Introducción práctica y guiada a herramientas de diseño UX/UI (Figma/Adobe XD).

Actividades de aprendizaje activo

• Actividad 1: Taller guiado de herramientas digitales
  • Objetivo: Familiarizarse con funcionalidades básicas para crear interfaces y prototipos.
  • Instrucciones:
    • Docente realiza demostración práctica en vivo de la herramienta.
    • Estudiantes replican acciones paso a paso en sus equipos.
    • Ejercicios incluyen creación de pantallas, inserción de botones y enlaces básicos.
  • Organización: Individual o parejas.
  • Producto: Prototipo digital básico con 3 pantallas interconectadas.
  • Tiempo: 70 minutos.
  • Rol docente: Resuelve dudas, supervisa progreso, ofrece tips y mejores prácticas.
• Actividad 2: Adaptación de bocetos al prototipo digital
  • Objetivo: Traducir bocetos iniciales a prototipos digitales funcionales.
  • Instrucciones:
    • Los grupos importan o recrean sus bocetos en la herramienta digital.
    • Definen estructura, jerarquía visual y navegación básica.
  • Organización: Grupos de 4.
  • Producto: Prototipo digital preliminar con interacciones básicas.
  • Tiempo: 60 minutos.
  • Rol docente: Orienta sobre usabilidad, accesibilidad y coherencia visual.
• Actividad 3: Feedback cruzado entre grupos
  • Objetivo: Evaluar y sugerir mejoras en prototipos mediante revisión entre pares.
  • Instrucciones:
    • Los grupos presentan brevemente su prototipo al grupo vecino.
    • Reciben y anotan comentarios constructivos.
  • Organización: Grupos de 4 en parejas.
  • Producto: Registro de feedback para iterar.
  • Tiempo: 25 minutos.
  • Rol docente: Facilita diálogo, modera y asegura retroalimentación respetuosa y útil.

Diferenciación

• Estudiantes avanzados pueden explorar funciones avanzadas (animaciones, plugins) para enriquecer prototipos.
• Estudiantes que requieran apoyo reciben tutoriales adicionales o trabajan con tutorías personalizadas.

Transición

Docente: Resume avances y prepara a estudiantes para la sesión siguiente, enfocada en pruebas de usuario y evaluación.

Fase de Cierre

Tiempo estimado: 10 minutos

• Síntesis: Ronda rápida donde cada grupo menciona un aprendizaje clave del manejo de herramientas digitales.
• Reflexión metacognitiva:
  • ¿Qué funcionalidades te parecieron más útiles para comunicar tu diseño?
  • ¿Qué dificultades encontraste al trasladar bocetos al prototipo digital?
• Retroalimentación: El docente entrega observaciones generales y destaca buenas prácticas observadas.
• Transferencia: Se anuncia que en la próxima sesión se realizará pruebas de usuario y ajustes basados en retroalimentación real.
• Tarea: Preparar preguntas para la prueba de usuario y pensar posibles escenarios de uso.

Sesión 3: Pruebas de Usuario y Mejora Iterativa

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión: Introducir la importancia de las pruebas de usuario y preparar a los estudiantes para su aplicación práctica.

Activación de conocimientos previos

• Docente: Pregunta: "¿Cómo creen que podemos saber si nuestro diseño es efectivo?"
• Estudiantes: Discuten en plenaria y comparten ideas sobre evaluación y retroalimentación.

Motivación y enganche

• Docente: Presenta un caso breve donde un prototipo sin pruebas causó fracaso en producto real.
• Estudiantes: Reflexionan sobre consecuencias de no validar diseños.

Contextualización

• Docente: Explica cómo las pruebas de usuario son estándar en la industria para asegurar usabilidad y satisfacción.
• Estudiantes: Relacionan con experiencias propias de uso de apps o sitios web.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Presentación del contenido: Guía para planificar y realizar pruebas de usuario, incluyendo selección de usuarios, creación de guías y registro de resultados.

Actividades de aprendizaje activo

• Actividad 1: Planificación de pruebas de usuario
  • Objetivo: Diseñar una guía de prueba adecuada para evaluar su prototipo.
  • Instrucciones:
    • En grupos, definir objetivos específicos para la prueba.
    • Elaborar un cuestionario o guión con tareas concretas para usuarios.
  • Organización: Grupos de 4.
  • Producto: Guía de prueba de usuario.
  • Tiempo: 45 minutos.
  • Rol docente: Revisa guías, sugiere mejoras y ejemplos.
• Actividad 2: Ejecución de pruebas entre pares
  • Objetivo: Aplicar la guía realizando pruebas reales y registrar resultados.
  • Instrucciones:
    • Dos grupos se intercambian prototipos y guías.
    • Un grupo actúa como usuario y otro como observador.
    • Registrar observaciones y dificultades encontradas.
  • Organización: Grupos de 4 en parejas.
  • Producto: Registro detallado de pruebas.
  • Tiempo: 70 minutos.
  • Rol docente: Supervisa proceso, interviene para clarificar y fomentar escucha activa.
• Actividad 3: Análisis y plan de mejora
  • Objetivo: Interpretar resultados y definir acciones para mejorar prototipo.
  • Instrucciones:
    • Grupos analizan feedback recibido.
    • Priorizar problemas y proponer soluciones concretas.
    • Planificar ajustes para la siguiente iteración.
  • Organización: Grupos de 4.
  • Producto: Informe breve con plan de mejora.
  • Tiempo: 35 minutos.
  • Rol docente: Orienta en priorización y viabilidad de soluciones.

Diferenciación

• Estudiantes más avanzados pueden diseñar métricas cuantitativas para pruebas.
• Estudiantes con dificultades reciben apoyo para formular preguntas claras y observar objetivamente.

Transición

Docente: Invita a reflexionar sobre cómo las mejoras impactarán la experiencia y preparar prototipos finales en la próxima sesión.

Fase de Cierre

Tiempo estimado: 15 minutos

• Síntesis: Creación grupal de un mapa mental con hallazgos y aprendizajes de las pruebas de usuario.
• Reflexión metacognitiva:
  • ¿Qué descubriste sobre el comportamiento real de los usuarios frente a tu diseño?
  • ¿Cómo influye la retroalimentación en la mejora continua del diseño?
  • ¿Qué harías diferente en la preparación de futuras pruebas?
• Retroalimentación: Comentarios orales del docente sobre la calidad del análisis y aplicación de pruebas.
• Transferencia: Se anticipa la sesión final donde presentarán prototipos mejorados y reflexionarán sobre todo el proceso.
• Tarea: Aplicar ajustes planificados y preparar presentación final del proyecto.

Sesión 4: Presentación Final y Reflexión Integral

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión: Preparar a los estudiantes para la presentación final y contextualizar la importancia de comunicar eficazmente sus proyectos UX/UI.

Activación de conocimientos previos

• Docente: Solicita que cada grupo comparta brevemente qué mejoras realizaron tras las pruebas.
• Estudiantes: Exponen en plenaria.

Motivación y enganche

• Docente: Muestra ejemplos de presentaciones efectivas y explica pautas clave para comunicar diseño UX/UI.
• Estudiantes: Toman nota y plantean dudas.

Contextualización

• Docente: Resalta la importancia de la comunicación para vender ideas de diseño en entornos profesionales.
• Estudiantes: Reflexionan sobre su rol como diseñadores y comunicadores.

Fase de Desarrollo

Tiempo estimado: 140 minutos

Presentación del contenido: Guía y práctica para la presentación final de proyectos UX/UI.

Actividades de aprendizaje activo

• Actividad 1: Ensayo y ajustes finales del prototipo
  • Objetivo: Optimizar prototipo y preparar discurso de presentación.
  • Instrucciones:
    • Grupos trabajan en ajustes finales del prototipo digital.
    • Preparan una presentación de 10 minutos que incluya: problema, solución, proceso, resultados y aprendizajes.
  • Organización: Grupos de 4.
  • Producto: Prototipo final y presentación estructurada.
  • Tiempo: 80 minutos.
  • Rol docente: Asiste con recomendaciones, corrige errores y guía estructura.
• Actividad 2: Presentaciones grupales
  • Objetivo: Comunicar efectivamente el proyecto y recibir retroalimentación.
  • Instrucciones:
    • Cada grupo presenta ante el aula su proyecto (10 minutos por grupo).
    • Sesión de preguntas y feedback constructivo tras cada presentación.
  • Organización: Plenaria.
  • Producto: Presentación oral y prototipo.
  • Tiempo: 60 minutos.
  • Rol docente: Modera, evalúa y provee retroalimentación detallada.

Diferenciación

• Estudiantes con habilidades avanzadas pueden incluir elementos multimedia o demostraciones interactivas.
• Estudiantes con dificultades reciben apoyo para organizar ideas y preparar discurso.

Transición

Docente: Conduce cierre general y conecta aprendizajes con futuras oportunidades profesionales.

Fase de Cierre

Tiempo estimado: 25 minutos

• Síntesis: Ronda donde cada estudiante menciona una habilidad o aprendizaje clave adquirido.
• Reflexión metacognitiva:
  • ¿Cómo integraron los principios de UX/UI en su proyecto?
  • ¿Qué aprendieron sobre trabajo colaborativo y gestión de proyectos?
  • ¿Cómo aplicarán estas experiencias en su desarrollo profesional?
• Retroalimentación: El docente entrega retroalimentación final, destacando fortalezas y áreas de mejora.
• Transferencia: Se anima a los estudiantes a documentar su proyecto en portafolio personal y a continuar explorando UX/UI.
• Tarea final: Elaborar un breve informe individual reflexivo sobre el proceso y aprendizajes.

Tipo de evaluación: La evaluación es diagnóstica al inicio para conocer conocimientos previos, formativa durante el desarrollo mediante observación, retroalimentación y actividades prácticas, y sumativa en el cierre a través de la presentación final y el informe reflexivo individual.

Criterios de evaluación:

• Capacidad para analizar y definir problemas de usuario (relacionado con objetivo 1).
• Habilidad para diseñar y prototipar interfaces funcionales y estéticas (objetivos 2 y 3).
• Aplicación efectiva de retroalimentación para mejorar el diseño (objetivo 4).
• Claridad y fundamentación en la comunicación de decisiones de diseño (objetivo 5).

Instrumentos sugeridos:

• Rúbrica para evaluación de prototipos (usabilidad, estética, funcionalidad).
• Lista de cotejo para observación del trabajo colaborativo y uso de herramientas.
• Registro de observación directa durante pruebas de usuario.
• Autoevaluación y coevaluación en retroalimentación entre pares.
• Informe reflexivo individual como evidencia final.

Evidencias de aprendizaje:

• Declaración del problema y perfiles de usuario generados (objetivo 1).
• Prototipo digital funcional y presentaciones grupales (objetivos 2 y 3).
• Registro de pruebas de usuario y plan de mejora (objetivo 4).
• Argumentaciones y justificaciones en presentaciones y reportes (objetivo 5).