1. INTRODUCCIÓN Y CONTEXTO

En el Instituto Europeo de Diseño (IED) de Madrid se imparten estudios oficiales relacionados con diferentes especialidades del diseño, ilustración, fotografía y moda, que son las nuevas áreas de demanda laboral. Y se imparten como estudios superiores y como ciclos de grado superior reconocidos en el Espacio Europeo de Educación Superior.

La experiencia que se detalla a continuación ha sido desarrollada en la asignatura de Diseño de interfaces web, correspondiente al segundo curso del ciclo de grado superior en Desarrollo de Aplicaciones Web.

Uno de los objetivos principales del centro, aplicable a todos los niveles educativos que se imparten, es la adopción de nuevas metodologías aplicadas al entorno educativo y, concretamente, a la práctica del diseño. La finalidad, mejorar los resultados académicos y acercar al alumno a un futuro ámbito profesional, fomentar una formación integradora mediante clases dinámicas y estimular al estudiante para trabajar y desarrollarse.

La competencia general de estos estudios en los que hemos puesto el foco consiste en el desarrollo, la implantación y el mantenimiento de aplicaciones web a partir de la tecnología, y garantizar el acceso a los datos de forma segura y cumpliendo con los criterios de accesibilidad, usabilidad y calidad exigidos en los estándares establecidos.

Dentro de los resultados de aprendizaje y los criterios de evaluación que se establecen para este módulo profesional, esta experiencia se centra en la parte de planificación de la creación de una interfaz donde se valoran y se aplican especificaciones de diseño. Para ello se propone utilizar la metodología Design Thinking (en adelante DT), para que el alumno pueda desarrollar un proyecto siguiendo un proceso y unos pasos concretos con el fin de llegar a un resultado lo más óptimo, profesional e innovador posible.

El DT no es un concepto nuevo, tiene sus orígenes a finales del siglo XX, pero realmente su aplicación se ha venido incrementando en la primera década del 2000. Fundamentalmente se puede afirmar que el DT o pensamiento de diseño, se centra en el proceso de diseño. Pone el foco en la resolución de problemas y tiene como ejes fundamentales la empatía y la creatividad. Se empezó a desarrollar de forma teórica en la Universidad de Stanford, en EEUU, a partir de los años 70. Posteriormente se aplicó con fines lucrativos por la consultora de diseño estadounidense IDEO y es actualmente su principal precursora.

Para el desarrollo de esta experiencia se propone a los alumnos el diseño de una landing page promocional de un producto deportivo a partir de la aplicación de DT. El DT cuenta con una serie de etapas o fases que permiten la interacción, por lo que no se trata de un proceso lineal. Estas fases se definen como fase de empatía, fase de definición, fase de ideación, fase de prototipado y fase de testeo.

2. DESARROLLO DE LA EXPERIENCIA

La asignatura donde se enmarca la experiencia cuenta con 80 horas lectivas. En su desarrollo se planteó la realización, por parte del alumno, de cuatro actividades/proyectos evaluables.

El proyecto seleccionado para llevar a cabo esta experiencia fue el segundo en orden cronológico titulado “Diseño de la interfaz gráfica de una landing page de producto deportivo”, con una duración de 20 horas de trabajo en clase, divididas en cuatro horas semanales. Los alumnos realizaron un trabajo autónomo en casa con una media de seis horas.

A la hora de aplicar la metodología DT, se dividió el tiempo de la duración de la actividad entre las cinco fases que conforman el proceso. Cada fase comenzó con la introducción por parte del profesor, que explicó en qué consiste y qué herramientas podía utilizar el alumno para la correcta realización, así como los objetivos propuestos y que deben cumplirse para desarrollar correctamente la fase siguiente.

Explicación de la actividad:

Realizar el diseño de la interfaz gráfica para una landing page de producto deportivo. El producto seleccionado en este caso son unas zapatillas deportivas. Se puede partir de una marca existente en el mercado o una marca ficticia.

La landing debe prestar especial atención a la hora de presentar el contenido gráfico que conformará la interfaz web, teniendo en cuenta el estilo fotográfico (foto de producto), estilo de vídeo, iconografía y otra serie de elementos como botones o call to action. El diseño de la interfaz debe ser adaptativo y trabajar en tres versiones con las siguientes resoluciones:

• Desktop: 1440 px (contando con un corte vertical a 800px).
• Tablet vertical: 768x1024 px
• Móvil: 375x812 px

Para realizar el diseño en las diferentes resoluciones se partirá de una retícula:

• Desktop: 12 columnas
• Tablet vertical: 8 columnas
• Móvil: 4 columnas

La actividad se desarrolló principalmente en el aula del centro, que cuenta con una dotación de un equipo por alumno y con la posibilidad de utilizar pizarras para la creación de moodboards, tormenta de ideas, creación de gráficos, etc…, para trabajar de forma colectiva. En este caso, debido a las restricciones Covid-19 para reducir el contacto y mantener la distancia adecuada, se plantea utilizar el software colaborativo Figma, que permite a los alumnos trabajar en tiempo real tanto de forma grupal como de forma individual (de forma síncrona o asíncrona). Para los trabajos realizados en las primeras fases de la experiencia se optó por Figma Jam (posibilidad que ofrece Figma para trabajar a modo de panel, con pósit digital, etc.) Además, se utilizó otro tipo de software específico para el retoque de imagen o generación de gráficos vectoriales (Adobe Photoshop y Adobe Illustrator).

Fue muy importante la elección del software, ya que Figma permitió a los alumnos trabajar desde cualquier equipo sin necesidad de llevar un archivo de un equipo a otro. El trabajo siempre queda alojado en la nube Figma y puede ser modificado o editado desde cualquier equipo utilizando el navegador o en local (desde la aplicación escritorio), por lo que la versatilidad y facilidad de trabajar y compartir el trabajo es muy grande.

Fase 1.- Empatía (3 horas)

Esta fase comenzó con una profunda comprensión de las necesidades de los usuarios implicados en el problema que tratamos de resolver, así como de su entorno. Para ello, el alumno debía ser capaz de ponerse en la piel de dichas personas con el fin de generar soluciones consecuentes con sus realidades.

Esta primera fase destinada fundamentalmente a investigar se realizó en grupos, para volcar la mayor cantidad de información y que pueda ser procesada y utilizada por todos, lo que permitió abrir un abanico más grande a todos los integrantes del grupo. A partir del material informativo encontrado, se pidió a cada grupo crear un moodboard. Ya de forma individual, cada alumno realizó un mapa de actores, que es una técnica que busca identificar a los actores clave que se verán involucrados en el proceso de creación de la landign page propuesta.

Imagen 1. Muestra de un mapa de actores ejecutado en Figma Jam destinado a la fase de empatía

Imagen 2. Muestra de diferentes moodboards ejecutados con Figma Jam destinados a la fase de empatía

Fase 2.- Definición (3 horas)

Esta fase del proceso permitió utilizar la información recabada en la fase anterior con el fin de crear un marco de trabajo. En este caso el trabajo del alumno se centró en detectar lo que realmente aportará valor a su diseño, identificando problemas cuyas soluciones serán clave para obtener resultados innovadores. Para ello cada alumno realizó de forma individual cinco mapas de empatía a partir de perfiles de posibles usuarios de la landing page. Realizado este trabajo de entendimiento, los alumnos pasaron a definir a modo de reto o problema específico, aquello sobre lo que van a trabajar y tratar de encontrar soluciones. Por ejemplo: crear una landing page que mejore la presencia en línea de los nuevos productos de la marca X.

Imagen 3. Muestra de varios mapas de empatía a diferentes usuarios ejecutados en Figma Jam destinado a la fase de definición

Fase 3.- Ideación (3 horas)

Esta etapa consistió en proponer la mayor cantidad de ideas posibles a partir del trabajo previo en las fases anteriores. Para ello todas las propuestas deben ser bien recibidas con el fin de lograr un ambiente creativo, favorecer el pensamiento expansivo y eliminar, por tanto, los juicios de valor. Esta fase fue realizada de forma grupal con el fin de que surgiera el mayor número de ideas posible, por lo que se optó por la técnica de los seis sombreros.

El profesor coordinó la actividad actuando como el sombrero azul (su función es gestionar y controlar la dinámica enfocando a los participantes lo mejor posible para obtener los mejores resultados) y el resto de sombreros se repartieron a los diferentes grupos de alumnos. Según el color cada grupo debe generar opiniones e ideas desde el punto de vista que deban representar: sombrero blanco (ideas desde el pensamiento objetivo y la neutralidad), sombrero rojo (ideas más irracionales, descabelladas e intuitivas sin necesidad de justificación), sombrero verde (ideas más creativas y relacionadas con el pensamiento lateral o divergente), sombrero negro (ideas más críticas desde la negatividad, teniendo en cuenta que algo no podría salir bien) y sombrero amarillo (ideas positivas y optimistas, al contrario que el sombrero negro). Además, se utilizaron técnicas de visual thinking, a partir de dibujos o prototipado bruto.

Imagen 4. Muestra de un panel con la técnica de los seis sombreros ejecutado en Figma Jam destinado a la fase de ideación

Fase 4.- Prototipado (9 horas + 4 horas de trabajo autónomo)

Una vez realizada la fase anterior, con el análisis de las ideas generadas y el feedback recogido, cada alumno diseñó de forma individual un prototipo navegable, con el fin de plasmar todos los elementos y contenidos necesarios que conforman la landing page. Este prototipo, además de plasmar todos los elementos de diseño en una interfaz, servirá a la vez como elemento de experimentación y testeo con los usuarios finales de la solución.

La creación de prototipos debe estar abierta a la posibilidad de recibir cambios, pues es a su vez una fuente de información que permitirá experimentar y explorar de forma rápida y barata con la solución propuesta. Para ello se utilizó la herramienta Figma, un software ideado para diseñar desde el punto de vista frontal UX/UI y que permite realizar prototipos navegables con diferentes microinteracciones y animaciones.

Además, se utilizó el software de retoque fotográfico Adobe Photoshop y el software de creación de gráficos vectoriales Adobe Illustrator. Realizado este trabajo, se presentó en clase para que el resto de compañeros vieran la solución a la que cada uno había llegado.

Imagen 5. Muestra de los prototipos en baja definición y alta definición ejecutados en Figma Jam destinado a la fase de prototipado

Fase 5.- Testeo (2 horas + 2 horas de trabajo autónomo)

Durante esta fase los alumnos realizaron pruebas con usuarios en un contexto lo más real posible, a partir del prototipo navegable diseñado. Esto fue crucial a la hora de identificar fallos, posibles carencias y mejoras significativas.

Para llevar a cabo el testeo, cada alumno compartió el prototipo navegable con un mínimo de tres usuarios, que realizaron el test de forma remota a partir de un enlace que genera el propio software y que puede ser compartido de forma sencilla.

El alumno pudo llevar una conversación fluida mediante audio con el usuario durante la realización del test a partir del mismo software. Cada estudiante generó un informe con los puntos importantes que detectó a la hora de hacer el test y que propiciaron una serie de conclusiones, lo que permitió hacer mejoras y ajustes con posterioridad.

El testeo nos recordó que todo el proceso de DT es algo flexible y abierto a cambios constantes y por lo tanto crucial en un proceso de diseño iterativo.

Imagen 6. Muestra de las conclusiones recogidas en la fase de testeo ejecutado en Figma Jam

3. EVALUACIÓN

La evaluación en este caso es un componente decisivo, es la expresión observable de la consecución de los propósitos formativos, donde se puede valorar el grado de aprendizaje o adquisición de las competencias profesionales por parte del alumnado.

Para esto es fundamental que el docente se ciña a unos criterios de evaluación definidos para esta actividad, que son los indicadores que nos ayudan a medir el grado de adquisición de objetivos, contenidos y competencias por parte del alumno.

Los criterios aplicados para la evaluación se describieron de la siguiente forma:

1. Aplicar los conceptos teóricos vistos en clase en el desarrollo de su trabajo.
2. Utilizar y aplicar la metodología Design Thinking en todas sus fases de forma grupal o individual.
3. Utilizar de una forma adecuada los diferentes elementos gráficos que conforman la interfaz: color, tipografía, iconos, imagen, etc.
4. Combinar de forma adecuada los contenidos mínimos y su arquitectura en las diferentes pantallas que se van a diseñar.
5. Crear un prototipo navegable donde funcionen correctamente los diferentes flujos de navegación.
6. Realizar el material gráfico propio con el fin de comunicar las ideas de la mejor forma posible.
7. Utilizar de forma adecuada las herramientas propuestas para realizar el trabajo, así como la metodología de trabajo a partir de las mismas.
8. Presentar de forma adecuada el archivo o archivos entregables, nombrándolos de forma correcta.
9. Aplicar un flujo de trabajo continuo, controlado por un seguimiento diario por parte del profesor. (Se tiene en cuenta la asistencia a clase en todo el proceso y por tanto las faltas asistenciales penalizan la nota final del proyecto).
10. Realizar una presentación pública exponiendo de forma correcta el resultado del trabajo realizado.

La evaluación consistió en la valoración de la consecución de los diferentes criterios y puntuación de cada una de las fases desarrolladas de forma individual o grupal.

Por un lado, se valoró el trabajo en grupo en las fases en las que se consideró más práctico y enriquecedor para el grupo, sobre todo en las fases de investigación donde el volumen de información es mayor y el grupo puede repartir el trabajo, así como a la hora de idear, donde de nuevo el trabajo en equipo abre el abanico de posibilidades enriquecido con la puesta en común de ideas.

Por otro lado, se valoró el trabajo individual donde se vio la verdadera aplicación y entendimiento de esta metodología por parte de cada alumno, y su reflejo en la ejecución final del proyecto, así como en su presentación pública.

4. CONCLUSIONES

Se puede concluir que la metodología DT aplicada en el aula ha permitido al alumno desarrollar un alto grado de motivación, asentar conocimientos técnicos y teóricos relevantes, así como adquirir habilidades de evaluación con el propio trabajo y su resultado, aprendiendo a valorar las buenas ideas.

De una forma más concreta, podemos afirmar que el DT ha ayudado al alumno a:

• Sistematizar una estructura en la forma de trabajar para diseñar cualquier tipo de producto o solución, siguiendo para ello unos pasos que permitan un desarrollo lógico de un proyecto de diseño aplicable a todas sus ramas o dimensiones. Esto conlleva una manera de pensar, un método y un proceso iterativo no lineal que se compone de fases.
• Fomentar la inclusión de otras metodologías o herramientas como el visual thinking con el fin de expresar y comunicar mejor aquellas ideas que propone el alumno.
• Estar en contacto con metodologías aplicadas en el ámbito profesional y acercarse a una forma real de asumir un proyecto de diseño.
• Diseñar productos más centrados en el usuario y sus necesidades reales, consiguiendo resultados más óptimos sin dejar nada al azar. Esto además conlleva el desarrollo de la empatía, ya que siempre el alumno tuvo que investigar y comprender para quien diseña, buscando oportunidades y soluciones centradas en las personas.
• Trabajar de forma individual o en grupo, viendo que esta metodología se adapta muy bien a cualquiera de las modalidades, independientemente de la fase del proceso en la que se encuentre. Además, la diversidad en los grupos aportó más valor, pues las perspectivas fueron más heterogéneas y generaron un mayor contraste en las respuestas o soluciones a un problema.
• Dar importancia a la fase de prototipado, permitiendo al alumno generar productos más reales que puede testear con usuarios reales y recibir el feedback necesario para validar ideas o mejorar el resultado de su trabajo.
• Utilizar herramientas de tipo software, con toda la potencia visual que ello conlleva a la hora de comunicar ideas, realizar el trabajo propio de cada fase del proyecto, así como la capacidad comunicativa con compañero o usuarios

En cuanto al docente, la aplicación de esta metodología le ayudó a:

• Generar dinámicas de trabajo en clase de una forma más ordenada, siguiendo un flujo continuo, sin perder en ningún momento el foco sobre el objetivo final.
• Impartir los contenidos de una manera más clara y directa, adaptándolos a una aplicación más profesional y rápida por parte del alumno.
• Utilizar herramientas metodológicas más ágiles, que permiten mostrar resultados del trabajo de una forma más ágil y centrada en el diseño.
• Plantear dinámicas de trabajo más lúdicas, pero sin perder el foco en el resultado y la validez y calidad de los mismos.
• Trabajar con herramientas de tipo software que permiten un seguimiento óptimo de todas las fases de trabajo, lo que ayuda a la evaluación del trabajo tanto en grupo como de forma individual, dejando registros en la nube sin necesidad de almacenar grandes cantidades de documentación, facilitando así su corrección y puntuación.
• Adaptar la asignatura y el flujo de trabajo a las condiciones concretas generadas por la pandemia. En este caso hubo que prestar atención a que el DT es una metodología que en muchas de sus fases puede/debe aplicarse de forma grupal y colaborativa, lo cual conlleva un contacto inherente entre los participantes. Esto se solucionó de una forma muy satisfactoria con el software Figma, que permite generar diversos ámbitos de trabajo, tanto de forma individual como en grupo.

La utilización de Figma supuso poder disponer de todas las herramientas comunicativas en una, necesarias para generar dinámicas de ideación a partir de tableros, flujos, construcción y testeo de prototipos. De esta forma, los alumnos y el profesor pudieron intervenir de forma colaborativa sobre los diferentes documentos, tanto de forma síncrona como asíncrona. Esto permite reducir, si fuera necesario, el contacto físico, ya que en la misma aula el alumno puede mantener la distancia óptima y trabajar de forma colaborativa.

BIBLIOGRAFÍA

• IDEO (2012). Design thinking para educadores. EEUU. Riverdale

• Janhangen, V. (2019). Larga vida al design thinking. Madrid. Idean Publishing

• Serrano, M. y Blazquez, P. (2015). Design thinking. Lidera el presente. Crea el futuro. Madrid. ESIC Editorial

---

Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Revista Digital EducaMadrid
Fecha de publicación: 19 de mayo de 2023