En este proyecto se ha desarrollado el diseño de una aplicación para la gestión de eventos, inspirada en plataformas como Eventbrite. El objetivo principal ha sido permitir que un usuario pueda actuar como organizador, creando, gestionando y publicando sus propios eventos de forma sencilla e intuitiva.

A lo largo del proceso se ha trabajado en la construcción de un flujo completo dentro de Figma, desde la creación del evento hasta su publicación y visualización en una lista de eventos. El diseño se ha realizado aplicando un sistema de diseño (UI Kit) para mantener coherencia visual en toda la interfaz.

Además, se han realizado pruebas de usabilidad con usuarios para evaluar la comprensión y facilidad de uso del prototipo. Estas pruebas han permitido identificar algunos puntos de mejora, como la claridad en la selección de etiquetas y la falta de filtros en la búsqueda de eventos. A partir de estos resultados, se ha iterado el diseño para mejorar la experiencia de usuario.

En conclusión, este proyecto refleja un proceso de diseño iterativo centrado en el usuario, donde se ha pasado de una estructura inicial a un prototipo de alta fidelidad validado mediante pruebas reales.

https://www.figma.com/design/JKiBdpLWakBkAGtdWq3kew/Reto-4?node-id=24-943&t=wYbKcdVP3fx3j3Mt-1

Reto 4: Evolución del Prototipado de Alta Fidelidad y Evaluación de Usabilidad

1. Introducción y enfoque del Reto 4

Este artículo recoge el proceso de transición desde la estructura conceptual del Reto 2 hacia un prototipo interactivo de alta fidelidad. El objetivo principal ha sido materializar las decisiones previas en una solución visual y funcionalmente realista, validando su eficacia mediante una evaluación con usuarios reales.

2. Proceso de Construcción sistémica y desafíos técnicos

La fase de diseño visual comenzó con una exploración mediante Figma Make, una herramienta de IA que utilicé como catalizador en la fase inicial del Espacio de la Solución. El propósito fue visualizar la viabilidad estética de mis ideas iniciales sin la necesidad de dibujar cada elemento desde cero, optimizando los tiempos de conceptualización.

De la Automatización al Control del UI Kit

Una vez establecida la dirección visual, el verdadero valor metodológico residió en la construcción del UI Kit propio. La maquetación de pantallas resultó ágil y eficiente gracias a la aplicación estricta de Auto-layout y la creación de variantes de componentes. Sin embargo, la sofisticación del prototipo desveló importantes retos interactivos:

• Simulación de campos de texto: reutilizar componentes para recrear funciones complejas (como simular que el usuario está escribiendo) requirió una lógica de estados avanzada.

• Gestión de Superposiciones (Overlays): elementos dinámicos como la selección de horarios generaron conflictos en el motor de renderizado de Figma, solapando capas de texto (Time vs. Horarios). Se iteró la solución mediante microinteracciones (Hover para limpiar texto y Click para desplegar horarios), un parche técnico que evidenció las limitaciones de las herramientas de prototipado frente al desarrollo real. Esta fue una de las mayores fricciones destacadas en los test de guerrilla

• Higiene y nomenclatura del archivo: Descubrí de manera empírica que el motor de Smart Animate de Figma penaliza el desorden. Modificar el nombre de las capas de texto de forma inconsistente provocaba comportamientos erráticos. La pulcritud y el orden metódico en la jerarquía de capas se revelaron como un requisito indispensable para la fidelidad de la experiencia. Figma me obligó a volverme mucho más ordenada.

• La dependencia de componentes de la Comunidad:  Te ahorra mucho tiempo apoyarte en recursos ya creados por la comunidad pero en mi caso también me llevó mucho tiempo poder utilizarlos de manera útil. Al no haber sido creado desde cero, carecía de la flexibilidad necesaria para incrustar interacciones críticas (como la selección dinámica del día). Esto limitó la libertad del diseño interactivo y demostró que en elementos nucleares de la UX, la artesanía propia supera a la conveniencia de terceros. Al final conseguí que al hacer click se seleccionara el día pero si volvemos a hacer click no se deseleccionaba.

3. Fase de Evaluación: Test de Guerrilla e Iteración

Para evaluar la solución, ejecuté un test de guerrilla empleando la técnica de Pensamiento Manifiesto (Think Aloud). Sin embargo, el análisis retrospectivo revela un sesgo metodológico en el timing: la prueba se introdujo de manera prematura.

Reflexión Crítica (Sesgo de Fidelidad): Siguiendo los principios de Travis & Hodgson, «el usuario no piensa como nosotros». Al presentar un prototipo que aún arrastraba «gazapos» interactivos y visuales, la atención y la carga cognitiva de los participantes se desvió hacia la detección de errores de la interfaz (QA) en lugar de evaluar el flujo de navegación, la arquitectura de la información o la usabilidad del servicio. Los hallazgos se contaminaron por el acabado técnico.

A pesar de este ruido, la identificación de estas fricciones permitió realizar una iteración de limpieza para corregir inconsistencias y asegurar que la versión final del prototipo mitigara estos puntos de dolor técnicos antes de su entrega definitiva. Así que una vez hecho el primer test, corregí muchos errores y lancé el segundo con mucho más éxito que el anterior.

4. Declaración de Uso de Inteligencia Artificial (IA)

En cumplimiento con los criterios de integridad académica de la Universitat Oberta de Catalunya (UOC), se detalla el uso ético y complementario de herramientas de IA generativa durante este reto:

1. Figma Make (Generativa Visual): Utilizada en la fase de ideación temprana para generar pantallas de referencia rápidas y testear la paleta visual e ideas macro de distribución de componentes. Las estructuras resultantes no se copiaron directamente, sino que sirvieron de base de inspiración para la creación del UI Kit normativo posterior.

2. Gemini:  Se emplearon herramientas de IA conversacional mediante prompts específicos orientados a:

   • Prompting de estructuración: Solicitar la ordenación y síntesis de las notas en bruto tomadas durante los test de guerrilla.

   • Filtrado: Ayudar a categorizar los comentarios de los usuarios entre «errores técnicos del prototipo» y «problemas reales de usabilidad».

   • Revisión: Todas las sugerencias de la IA fueron editadas críticamente, contrastadas con los objetivos del proyecto y adaptadas para asegurar que reflejaran fielmente mi proceso de aprendizaje humano y la realidad de los datos cualitativos obtenidos.

5. Entregables

• Enlace al Prototipo Interactivo en Figma

• Enlace al vídeo 

En este Reto 2 he desarrollado un primer prototipo de baja fidelidad junto con un UI Kit básico para una aplicación móvil inspirada en el flujo de creación y gestión de eventos de tipo Eventbrite, adaptado a un contexto mobile-first.

El objetivo principal ha sido analizar y estructurar el proceso que sigue una persona organizadora al crear un evento, desde el inicio de sesión hasta su publicación. A partir de este análisis, he diseñado un flujo sencillo que permite crear, editar, guardar como borrador y publicar eventos de forma clara e intuitiva.

El trabajo se centra en la organización de componentes básicos y en la definición de un sistema de diseño inicial, así como en la exploración de la experiencia de usuario mediante un prototipo de baja fidelidad que prioriza la estructura y la lógica del flujo sobre el detalle visual.

Análisis UX de controles físicos en un microondas Cecotec

En este análisis se evalúa el panel de control de un microondas desde la perspectiva del Diseño Centrado en el Usuario, tomando como referencia los conceptos propuestos por Don Norman en La psicología de los objetos cotidianos. El objetivo es identificar posibles brechas de ejecución y brechas de evaluación presentes en la interacción.

Las brechas de ejecución hacen referencia a las dificultades que puede experimentar el usuario al intentar comprender cómo realizar una acción en el sistema (qué hacer y cómo hacerlo).

Las brechas de evaluación se refieren a las dificultades para interpretar si la acción realizada ha tenido el efecto esperado, es decir, si el sistema ha respondido correctamente.

A través de este análisis se busca detectar oportunidades de mejora que aumenten la claridad, la comprensión y la sensación de control durante la interacción.

ICONOGRAFÍA AMBIGUA

El significado de algunos iconos no está claro para los usuarios, carecen de affordance claro y no permite anticipar la acción asociada ni tiene un apoyo textual.

AFFORDANCE INSUFICIENTE

Aunque la rueda comunica correctamente la acción de giro, no indica claramente que también puede presionarse como acción secundaria.

UNIFORMIDAD DE CONTROLES

La disposición de los controles no mantiene una relación espacial directa con la información mostrada en la pantalla así como tampoco corresponden los iconos de los botones con los de la pantalla.

Todos los controles poseen el mismo peso visual, dificultando identificar acciones principales y secundarias.

Brechas de evaluación

FEEDBACK POCO CLARO

El display muestra información, pero no siempre comunica claramente el estado lo que dicultad la identifación de que la acción que se ha ejecutado es la correcta o si hay manera de cancelarla.

Test Heuristico

Se realiza un análisis del panel de control aplicando principios heurísticos de usabilidad basados en el modelo de Don Norman, evaluando la visibilidad del estado del sistema, la correspondencia entre controles y funciones y la claridad del feedback.
1. Visibilidad del estado del sistema
El display del microondas proporciona información numérica y simbólica, aunque la simultaneidad de iconos puede dificultar la interpretación clara del estado activo.
2. Correspondencia entre el sistema y el mundo real
Algunos controles basados en iconografía requieren interpretación previa, lo que puede generar una distancia entre el modelo mental del usuario y el diseño del sistema.
3. Control y libertad del usuario
La ausencia de una indicación clara de cancelación o reversión puede reducir la percepción de control durante la interacción.
4. Consistencia y estándares
La dependencia exclusiva de símbolos puede requerir aprendizaje, especialmente si no siguen estándares ampliamente reconocidos.

Modelo del diseñador / usuario / imagen del sistema

Modelo del diseñador
El diseño parece estar basado en iconografía simplificada, suponiendo que los usuarios reconocerán los símbolos sin necesidad de texto adicional.

Modelo del usuario
El usuario espera controles autoexplicativos, con señalización clara de funciones y retroalimentación comprensible.

Imagen del sistema
La apariencia del panel transmite un sistema técnico con múltiples funciones, cuya interpretación depende del aprendizaje previo del usuario.

Propuesta de mejora / Brechas de evaluación y ejecución

Este rediseño se basa en la identificación de brechas de ejecución y evaluación en el panel original.

La reorganización de los elementos busca facilitar la comprensión de cómo interactuar con el sistema y cómo interpretar su estado.

En la parte superior se ubican los botones principales (Start, Stop y Cancel), otorgando mayor claridad a las acciones más relevantes. Esta disposición reduce la brecha de ejecución al hacer más visibles las funciones principales y mejorar la identificación de las acciones disponibles.

El display se sitúa en una posición central, reforzando su papel como elemento de retroalimentación del sistema. Además, incorpora indicadores visuales que muestran el estado activo mediante señales luminosas, mejorando la brecha de evaluación al permitir al usuario comprender si la acción realizada ha sido ejecutada correctamente.

La inclusión de etiquetas textuales en los controles inferiores reduce la ambigüedad iconográfica y mejora la correspondencia entre el modelo mental del usuario y la imagen del sistema. Finalmente, la rueda mantiene su función con indicación clara de giro y “Push”, reforzando su affordance y su comprensión de uso.

Topografía (Mapping)

Análisis de la relación espacial entre los controles físicos y los elementos que controlan en el sistema.

Este análisis de topografía (mapping) examina la relación espacial entre los controles y sus efectos en el sistema, con el objetivo de determinar si la disposición facilita la comprensión o si puede inducir a error.

Disposición de los controles
Los controles no parecen seguir una organización espacial que refleje claramente su función dentro del sistema.

Relación control–pantalla
La distancia física y la disposición entre la rueda y el display no establecen una correspondencia visual inmediata que facilite la comprensión del efecto de la acción.

Impacto en la experiencia
Una topografía más clara podría reducir la carga cognitiva del usuario y mejorar la comprensión del funcionamiento del sistema.

Propuesta de mejora

Este análisis de topografía (mapping) evalúa la relación espacial entre los controles físicos del microondas y los resultados que producen en el sistema.

En la nueva propuesta, los botones principales se agrupan en la parte superior, mientras que las funciones secundarias se organizan en una columna inferior con etiquetado textual. Esta distribución favorece la agrupación funcional y mejora la coherencia espacial del sistema.

El display se posiciona de forma central y visualmente dominante, estableciendo una estructura clara entre información y controles. La alineación entre los iconos del display y los iconos de los botones laterales refuerza la relación directa entre acción y resultado.

Asimismo, la disposición vertical facilita la comprensión del flujo de uso, ya que los elementos relacionados se encuentran espacialmente vinculados. Esta organización mejora la interpretación del sistema y reduce la carga cognitiva del usuario.

1. Introducción

¿Por qué cuando vemos un elemento como un botón rojo hay un impulso de querer tocarlo?

A veces el diseño es tan potente que, incluso cuando sabemos que no debemos actuar, el objeto nos empuja a ello. Es el caso del clásico botón rojo: su affordance es tan claro y su color tan magnético que nuestra respuesta instintiva ignora cualquier instrucción lógica. En este reto, exploro precisamente esa frontera entre la intuición y la confusión.

Me ha resultado muy interesante comprobar lo difícil que es abstraernos de la rutina para identificar productos tangibles que, en lugar de facilitarnos la vida, entorpecen nuestras tareas. Lo más complejo fue elegir los casos, ya que al mirar objetos puramente analógicos —como una silla, la manivela de un toldo o un exprimidor manual— todos me resultaban perfectamente intuitivos. Han sido diseñados para satisfacer una necesidad y hablan un lenguaje universal donde la forma dicta la interacción.

Sin embargo, existen productos que generan tal confusión que parece que se ríen de nosotros; rompecabezas que no se resuelven ni con un manual de instrucciones. Tras descartar lo analógico, comprendí que el melón estaba en los objetos con electrónica e interfaz. Allí encontré mis hallazgos: al poner distancia con mis automatismos y mirar el objeto como si fuera la primera vez.

Fue curioso cómo en el Caso 1 descubrí que había interiorizado un patrón deficiente para fijar la velocidad de crucero, recordando lo complejo que fue lograrlo la primera vez. El Caso 2, en cambio, fue mucho más sencillo: el diseño del aspirador me cautivó desde el unboxing y, cumpliendo mi manía de no leer nunca las instrucciones, estas no hicieron ni falta.

A partir de estos dos casos opuestos —la frustración frente al sistema de control de un coche y la fluidez de un electrodoméstico bien diseñado— aplico los principios de Don Norman para analizar cómo la forma, el mapping y el feedback condicionan nuestra experiencia con los objetos físicos.

2. Caso 1: Brechas de Ejecución y Evaluación (Toyota Auris 2012)

• El problema: el sistema de velocidad de crucero presenta una brecha de ejecución crítica. La falta de consistencia entre los botones del volante y la palanca trasera genera un modelo mental confuso para el usuario. La velocidad límite se encuentra en el volante y no es necesario activar ninguna palanca y sin embargo, la velocidad crucero necesita un botón central + bajar hacia abajo la palanca (que además este botón es invisible).

• Análisis: se ha documentado la desconexión y confusión entre el modelo del ingeniero/a y el modelo del usuario/a y las acciones necesarias para activar la velocidad crucero.

• Solución: propuesta de rediseño visual mediante wireframes en Figma para unificar controles, simplificando botones y manteniendo la misma lógica de usabilidad.

3. Caso 2: Topografía y Mapping Natural (Aspirador Xiaomi G10)

• El éxito: se trata de un ejemplo impecable de cómo la forma sigue a la función y el usuario no necesita instrucciones para poder usarlo sin frustración ni cargas cognitivas.

• Hallazgos más relevantes:

  • Mapping natural: relación directa entre botones y piezas extraíbles.

  • Feedback permanente: uso de materiales transparentes,cierres tipo bayoneta que confirman el éxito de la tarea y display electrónico que informa del estado de carga y de los modos de aspiración.

  • Affordance: diseño intuitivo que elimina la necesidad de manual de instrucciones.

  • Consistencia: los mismos modelos se repiten de manera que el usuario aprende y sabe como extraer/incorporar accesorios.

4. Prototipo Interactivo y vídeo

Para profundizar en el análisis, os dejo aquí el prototipo y un vídeo resumen del caso B, un caso de éxito en cuanto a topografía y usabilidad del producto:

• Reto 3 – Wireframe

• Vídeo  con los ejemplos más ilustrativos del Reto: muestra el feedback sonoro y táctil del aspirador en uso real.

Bibliografía y Referencias

• Norman, D. A. (2002). The Psychopathology of Everyday Things. En The Design of Everyday Things (pp. 1-36). New York: Basic Books. ISBN 0465067107.
• UOC (2026). Capítulo 2: Fundamentos para la generación de una interfaz gráfica. En Cuaderno de Prototipado. Barcelona: Universitat Oberta de Catalunya.

Uso de Inteligencia Artificial (IA)

Se declara el uso de herramientas de IA Generativa en la elaboración de este trabajo:

• Google Gemini (2026): Se ha utilizado el modelo Gemini exclusivamente para la generación y apoyo visual de los activos gráficos de la entrega.

  • Render del aspirador: Generado para ilustrar el caso de éxito con una estética de producto limpia (quitando el fondo de la imagen).

  • Esquema de rediseño del volante: A partir de mis ideas y bocetos me he apoyado en Gemini para generar un boceto del rediseño final del volante.

Introducción del Briefing:

Como respuesta al reto de optimizar la experiencia del organizador en Eventbrite, presento una propuesta de Prototipo de Baja Fidelidad y un UI Kit Sistematizado. El objetivo principal ha sido resolver las tareas esenciales encargadas por el cliente: crear, editar, previsualizar y publicar eventos, eliminando cualquier ruido visual que pudiera fatigar al usuario en un entorno móvil.

Antes de saltar a la digitalización, realicé una fase de exploración rápida mediante bocetos. En este punto descarté ideas como los formularios de una sola página, que resultaban abrumadores en móvil. Opté por el flujo segmentado que veis en el prototipo final: priorizando la claridad y el foco en cada paso.

Estrategia de diseño:

Menos es más

He apostado por un diseño basado en la economía de opciones. Aplicando la Ley de Hick y el principio de evitar la parálisis por análisis, he reducido las acciones en la pantalla «Mis Eventos» a lo estrictamente necesario: Editar y Borrar. Al limitar las opciones, guiamos al usuario hacia la acción sin abrumarlo, mejorando drásticamente la eficiencia operativa del organizador.

• Identidad visual: Los CTAs en negro puro (inspirados en la robustez de la marca original) aseguran el contraste máximo, mientras que la inversión de colores en los secundarios guía la intuición del usuario sin generar dudas.
• Acceso dual: Una decisión estratégica ha sido el «Login Dual» y el cambio de rol desde «Mi Cuenta». Esto elimina la fricción de tener que gestionar dos cuentas distintas, permitiendo que la transición de asistente a organizador sea orgánica y rápida.

Dejo aquí el vídeo:

Creo que la metodología de los prototipos de baja fidelidad pueden resultar muy útiles en el mundo laboral ya que evitan problemas de comunicación y nos permiten hacer pruebas con diversos perfiles para evitar mil horas de desarrollo perdido. Utilizar este nivel de abstracción nos permite:

1. Ahorrar presupuesto y malentendidos: validamos la arquitectura de la información antes de la inversión estética.

2. Combatir el sesgo del diseñador: nos obliga a testear si el flujo «realmente funciona» más allá de si es bonito. Es el recordatorio de que el usuario no piensa como tú y que nuestros prejuicios deben ser puestos a prueba constantemente.

Respecto a los aprendizajes técnicos, dominar el Atomic Design y Figma desde cero ha sido una curva de aprendizaje exigente. La verdadera dificultad no ha estado en crear componentes, sino en decidir sus propiedades booleanas para que el sistema fuera resiliente y no solo una galería de imágenes estáticas.

Link al proyecto:

https://www.figma.com/design/SJiOctoy5cvDRZK2CdjXFd/Reto2_Prototipado_Paula-Mu%C3%B1iz_vfinal?node-id=2078-714&t=ZJfKHCk1P62eJNCy-1

Bibliografía

FIGMA. Figma AI (Make Designs) [programa informático en línea]. San Francisco: Figma Inc., 2026. [Consulta: abril 2026]. Disponible en: https://www.figma.com/ai/

FIGMA. Figma Blog: Introducing AI to the design process [en línea]. San Francisco, 2025 [consulta: abril de 2026]. Disponible en: https://www.figma.com/blog/ai-tools-for-designers/

Nota: La Inteligencia Artificial de Figma (Make Designs) ha sido utilizada como herramienta de apoyo para la generación de estructuras base de wireframes (layouts iniciales), que posteriormente han sido refinadas manualmente al 90% para integrar los componentes específicos del UI Kit y corregir inconsistencias lógicas.

UNIVERSITAT OBERTA DE CATALUNYA. Cuaderno de Prototipado [material docente en línea]. Barcelona: UOC, 2024. Asignatura M4.356 Prototipado. [Consulta: abril 2026]. Disponible en: aula virtual UOC.