Clase 02.

DISEÑO UX/UI

METODOLOGÍAS DE
DISEÑO
Y UX RESEARCH
RECORDÁ PONER A GRABAR
LA CLASE
RECAPITULACIÓN
GLOSARIO:
Clase 1

Experiencia de usuario: se refiere a lo que Usabilidad: es el atributo de calidad de un

experimenta el usuario antes, durante y después producto, que se refiere sencillamente a su
de usar el producto. facilidad de uso.

Interfaz de usuario: alude a todo aquello con Prototipado: es el modo de representación de

lo cual los usuarios interactúan de forma directa un producto digital. Existen herramientas para
(la capa externa de un producto digital). generarlos, como Figma y Adobe XD.
GLOSARIO:
Clase 1
DCU: sigue una serie de métodos y técnicas
definidas, para analizar, diseñar y evaluar. Se
trata de un proceso iterativo, en el cual el diseño
y la evaluación se incorporan desde la fase
inicial.
Usabilidad: el atributo de calidad de un
producto que se refiere a su facilidad de uso.
Diseño de interacción: Alude al diseño y estética
orientados a las personas, los cuales definen los
comportamientos de los sistemas en base a las
interacciones de las personas con ellos.
Modelos mentales: son las imágenes en la mente de
un usuario. Informan su expectativa respecto a una
determinada interacción.
 CRONOGRAMA DEL CURSO
Clase 1 Clase 2 Clase 3

Diseño centrado en el Metodologías de Diseño y User persona

usuario UX Research & benchmarking

CREANDO NUESTRO USER PERSONAS Y

KICK OFF PROYECTO BENCHMARKING

EXPERIENCIAS DISEÑADAS INVESTIGACIÓN ARMANDO USER PERSONA

Y ACCIDENTALES GENERATIVA

GENERANDO UN
BENCHMARKING

USER PERSONA E IDEA

DE SOLUCIÓN
 ● Conocer las distintas Metodologías de
Diseño.
● Conocer las metodologías ágiles, y su
diferencia con las de cascada.
● Generar conocimiento validado mediante
OBJETIVOS DE LA nuestra primera aproximación a la
CLASE investigación.
MAPA DE CONCEPTOS CLASE 2

Diseño Centrado
Analizar Diseñar Validar
en el Usuario

Cascada
Desk Research

Metodología de
Trabajo

Pensamiento de
Ágil Design Thinking
Diseño

Design Sprint
 FRACASARÁS EN UX
●
●
SI...
No hablas con los usuarios.
No puedes identificar a tu público objetivo.
● No defines el problema antes de intentar resolverlo.
● Diseñas para ti, y tomas decisiones de diseño en base a tus
experiencias personales.
● No tienes en cuenta los objetivos de negocio.
● Sólo piensas en la interfaz.
METODOLOGÍAS DE
TRABAJO
CASCADA VS. ÁGIL
 DESARROLLO
CASCADA:
UN PASO A LA VEZ
 DESARROLLO
CASCADA
Cada etapa comienza cuando termina la anterior. Esta metodología no
contempla la posibilidad de medir los resultados hasta el final del
proyecto:
● por un lado, porque recién ahí dispondrá de un entregable;
● por el otro, porque no considera necesario realizar ninguna medición
antes el lanzamiento.
 ANALIZAR DISEÑAR PUBLICAR

Diseñador Diseñador

Metodología de diseño tradicional.

 REQUERIMIENTOS

ANÁLISIS

DISEÑO

CODIFICACIÓN

VALIDACIÓN

INSTALACIÓN

Modelo fordista: una etapa comienza cuando termina la anterior.

 DISEÑO

PROGRAMACIÓN

1 2 3 4 5

Plan de trabajo: se estiman costos por semanas.

 U$S 12K U$S 16K

+35%

1 2 3 4 5

Riesgo: si una etapa se extiende, o el producto no funciona, solucionarlo

supondrá mayor tiempo -y con ello, mayores costos-.
 DESARROLLO ÁGIL:
ITERANDO Y
APRENDIENDO A LO
LARGO DEL PROYECTO
 DESARROLLO ÁGIL
A diferencia del desarrollo en cascada donde existe una única etapa de
relevamiento, el desarrollo ágil posee tantas instancias de relevamiento como
iteraciones.
En cada iteración, se podrá revisar lo relevado en la iteración anterior, a partir
de los hallazgos en las pruebas realizadas. De esta forma, refinamos nuestro
proyecto.
 Iteración de
DISEÑO Diseñador
diseño

Objetivos del negocio

y objetivos del usuario
Diseñador ANALIZAR PUBLICAR

VALIDAR
Diseñador + Usuario

Metodología de DCU.
 Desarrollo ágil
DISEÑAR

Propone un abordaje iterativo.

Objetivos del negocio
y objetivos del usuario
ANALIZAR
Cada iteración se compone de 3
instancias: análisis, elaboración y
prueba.

VALIDAR Cada proyecto puede componerse de N

cantidad de iteraciones,
según su complejidad.
 1ra prueba
con usuarios
2da prueba
con usuarios
Desarrollo ágil
D
A
De esta manera, puede ejecutarse una
V
prueba de usabilidad cada vez que
D D se lo necesite, para ir validando el
A A
avance, y con ello ir disminuyendo el
V V
Riesgo riesgo del producto final.

Semanas 1 2 3 4 5
Resumiendo…

Desarrollo REQUERIMIENTO
S
ANÁLISIS DISEÑO CODIFICACIÓN
EVALUAR EL
PROCESO Y
TERMINAR

cascada
EL
PROYECTO.

DISEÑ DISEÑ
AR AR
EVALUAR EVALUAR
EL EL

Desarrollo ANALI
ZAR
PROCESO
(PRIMERA
ITERACIÓN
ANALI
ZAR
PROCESO
(SEGUNDA
ITERACIÓN

ágil VALID
AR
)
VALID
AR
)
PENSAMIENTO DE DISEÑO
 ¿QUÉ ES DESIGN
THINKING?
Es un método para generar ideas innovadoras, que centra su
eficacia en entender y dar solución a las necesidades reales de
los usuarios.
“Una metodología que impregna todo el
espectro de actividades de innovación con
un espíritu de diseño centrado en las
personas”

Tim Brown. Design Thinking. Harvard Business

Review. 2008
PREMISA DEL PROCESO
CREATIVO
Los 6 principios del Design Thinking
 Los 6 principios del Design Thinking

Enfócate en
valores humanos Incita siempre La cultura de
a la acción prototipos

Tener empatía por las

personas para las cuales No nos confundamos con
estás diseñando es el nombre, ya que no se
fundamental para lograr un trata de pensar sino de
buen diseño. hacer. Del pensar a la
acción.
Hacer prototipos no es
simplemente una manera
de validar las ideas: es una
parte integral del proceso
de innovación.
 Los 6 principios del Design Thinking

No me lo digas, Colaboración Estar consciente

muéstramelo extrema y radical del proceso

Comunica tu visión de una

Junta equipos de personas que Tener claro el proceso de
manera significativa, creando
provengan de variadas diseño, y saber qué métodos,
experiencias, usando bocetos
disciplinas, y puedan aportar técnicas y herramientas se
ilustrativos, y contando
distintos puntos de vista. La utilizan en cada fase.
buenas historias.
diversidad permite sacar a la
luz ideas radicales.
ETAPAS DEL PROCESO
CREATIVO
Las 5 instancias del Design Thinking
 Los 5 instancias del Design Thinking

EMPATIZAR IDEAR TESTEAR

DEFINIR PROTOTIPAR
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

EMPATIZAR
Como diseñadores/as, los problemas que tratamos de resolver no
son los nuestros, sino los de otras personas.
Para crear innovaciones significativas, necesitamos conocer a los
usuarios y sus formas de vida.
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

MAPA DE ACTORES
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

MAPA DE TRAYECTO (alias User

Journey)
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Entrevistas con usuarios Observación directa

(shadowing)
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

DEFINIR
Es importante determinar con exactitud el desafío del
proyecto, en base a lo aprendido del usuario y su contexto.
Enmarcar el problema adecuado es la única manera de crear la
solución correcta.
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

El objetivo de esta etapa es desarrollar un

una declaración significativa y sintética del
problema, un punto de vista (POV - Point of view).
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Estructura de la declaración (POV)

● ¿Quién es nuestro usuario?

● ¿Qué necesita (problema)?
● ¿Por qué?

Martín es un ejecutivo que vive en Bariloche y tiene dos perros: Chiqui y Baco.
Por su trabajo, viaja al menos dos veces por mes a Buenos Aires. Él necesita
encontrar al cuidador ideal, que pueda mantener la rutina de sus perros, porque
piensa mucho en ellos y se siente mal cuando los deja con desconocidos mientras
está de viaje.
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

PARA QUE FUNCIONE BIEN, LA DECLARACIÓN

(POV) DEBE:

● Enmarcar un problema con un enfoque directo.

● Ser inspiradora para trabajar en la solución.
● Describir qué piensa y qué hace el usuario,
(dar sentido a un comportamiento humano en un contexto particular)
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

IDEAR
En esta etapa, se combinan el pensamiento racional y la
imaginación. El objetivo es pensar y evaluar soluciones.
No se trata de encontrar la idea correcta, sino de crear la mayor
cantidad de ideas posibilidades.
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

“La mejor manera de tener una buena

idea es tener muchas ideas.”

Linus Pauling. Premio Nobel de Química

EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

BRAINSTORMING
En esta etapa, se combinan el pensamiento racional y la
imaginación. El objetivo es pensar y evaluar soluciones.
No se trata de encontrar la idea correcta, sino de crear la mayor
cantidad de ideas posibilidades.
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Para que un brainstorming sea efectivo, no alcanza sólo con

juntarse a “tirar” ideas.
La lluvia de ideas no es una técnica nueva. Sin embargo, el
establecimiento de las expectativas para una discusión abierta y
animada puede significar la diferencia entre una sesión
entretenida y creativa, y una seria y poco dinámica.

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

¿CÓMO EJECUTAR UNA LLUVIA

DE IDEAS CON ÉXITO?
Las 6 reglas de IDEO

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

1
POSTERGAR JUICIOS DE VALOR
Adopta una mentalidad abierta en tus sesiones de ideas.
Todas las ideas son válidas en esta instancia.

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

2
FOMENTAR LAS IDEAS
ABSURDAS, EXTREMAS Y
RADICALES
Incluso una idea descabellada, que podría no implementarse jamás, puede
llevarte a la próxima innovación radical.

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

3
CONSTRUIR SOBRE LAS IDEAS DE
LOS DEMÁS INTEGRANTES
Una buena práctica es continuar una conversación diciendo: “para
aprovechar esto que acabas de decir…”

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

UNA CONVERSACIÓN A LA VEZ

Escucha las de cada persona antes de anotarlas: casi siempre, las ideas
de los demás inspirarán las mejores ideas del resto del grupo.

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

SER VISUAL PARA EXPLICAR

Dibuja o escribe tus ideas en post-it u hojas de papel

Brainstorming
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

PRIORIZAR CANTIDAD SOBRE

CALIDAD
Intentá tener entre 40 y 50 ideas como mínimo en cada sesión de
brainstorming

Brainstorming
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

STORYBOARD
El dibujo como herramienta creativa
Es una herramienta que ayuda a predecir y explorar
visualmente la experiencia de un usuario con un producto.
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Storyboard
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Storyboard
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Storyboard
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

PROTOTIPAR
¿Qué tan rápido puedes llevar una idea concreta al mundo real, y
empezar a obtener feedback? Hacer un prototipo se trata de crear una
versión simplificada y rápida.
Prototipar es una manera de aprender. No necesariamente debe
tratarse de un objeto, sino cualquier cosa con que se pueda
interactuar.
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Veamos un ejemplo de prototipado…

 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Diseño de escenario Prototipo en papel

Prototipado
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

Juegos de rol Maquetas

Prototipado
 EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

¿POR QUÉ HACER

PROTOTIPOS?
● Para comunicar mejor: si una imagen vale mil palabras, un prototipo
vale mil imágenes.
● Para empezar conversaciones: estas últimas con los usuarios son más
eficientes cuando se concentran acerca de algo sobre lo cual conversar,
como un objeto o un dibujo.
● Para evaluar las alternativas: ayuda a desarrollar bien distintas ideas,
sin tener que comprometerse con una demasiado temprano.

Prototipado
EMPATIZAR DEFINIR IDEAR PROTOTIPAR EVALUAR

EVALUAR
Consiste en solicitar feedback y opiniones sobre los prototipos que
se han creado; además, es otra oportunidad para empatizar con las
personas para las cuales estás diseñando.
Evaluar te da la oportunidad para aprender sobre los usuarios, y las
posibles soluciones.
Testeo de usuarios del prototipo (en este caso una app).
¿QUÉ ES DESIGN SPRINT?
“Design Sprint es una metodología que se
basa en la filosofía de Design Thinking,
pero tiene su propia propuesta de valor, el
proceso es distinto.”

Jake Knapp. Autor del libro Design Sprint

 DESIGN SPRINT
Esta metodología permite prototipar y validar ideas de diseño,
con usuarios finales, de manera rápida.
El método fue creado por Google en 2010, después de haber
estudiado cientos de estrategias de Design Thinking.
http://www.gv.com/sprint/
 ETAPAS DEL PROCESO
CREATIVO
Las 5 instancias del Design Sprint

MAPEAR DECIDIR TESTEAR

BOCETAR PROTOTIPAR

Design Sprint
 Design Sprint nos marca cuánto debe durar el proceso.

LUNES MARTES MIERCOLES JUEVES VIERNES

MAPEAR DECIDIR TESTEAR

BOCETAR PROTOTIPAR

Design Sprint
 ¡PARA PENSAR!
¿Encuentras algún patrón que se repita entre
Design Thinking y Design Sprint?

MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
☕ BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
 RESEARCH
(INVESTIGACIÓN)
 ¡PARA PENSAR!
¿Por qué crees que investigamos en UX?

CONTESTA POR EL CHAT DE ZOOM

 ¿POR QUÉ INVESTIGAMOS
EN UX?
Porque nos ayuda a...
● Crear diseños realmente relevantes para las personas.
● Crear diseños que sean fáciles y agradables de usar.
● Entender el retorno de inversión del diseño de experiencias.

Fuente: Interaction Design Foundation (2020)

Con Design Thinking o Design Sprint estamos más cerca
de identificar una necesidad puntual. La idea ahora es
buscar información que valide ese problema.
 MOMENTOS DE UN
PROYECTO DESDE LA
INVESTIGACIÓN
G I E
RESEARCH RESEARCH
IDEACIÓN
GENERATIVA EVALUATIVA
Para comprender el problema Pensar soluciones al problema Para evaluar la solución
(se toman decisiones sobre lo que se
investigó previamente)
 RESEARCH
GENERATIVA
Ayuda a comprender necesidades.
● Entrevistas en profundidad
● Observación en contexto
● Desk research
● Encuestas
● Estudios de diario
● Focus groups
● Diseño participativo
RESEARCH
EVALUATIVA
Ayuda a evaluar una propuesta.
● Pruebas de usabilidad
● Evaluaciones heurísticas
● Encuestas
● Card sorting
● Tree testing
● Análisis de métricas
● Mapas de calor
 RESEARCH RESEARCH
VAMOS A ARRANCAR A
GENERATIVA EVALUATIVA
INVESTIGAR CON EL
Ayuda a comprender necesidades.
OBJETIVO DE VALIDAR LA
Ayuda a evaluar una propuesta.
● Entrevistas en profundidad
PROBLEMÁTICA Y EMPEZAR
● Pruebas de usabilidad
●
●
Observación en contexto
Desk research
AParaCOMPRENDERLA
● Evaluaciones heurísticas MEJOR
poder
● más adelante...
Encuestas
● Encuestas ● Card sorting
● Estudios de diario Crear ●diseños realmente
Tree testing
● Focus groups ● Análisis de métricas
● Diseño participativo relevantes
● Mapas para las
de calor
personas.
EMPECEMOS CON UNA
TÉCNICA DE RESEARCH
GENERATIVA...
 DESK RESEARCH
(Investigación de escritorio)

Es un método de investigación que implica el uso de datos ya

existentes, para aumentar la eficacia general de la investigación.
Se basa en material publicado en informes y/o documentos
similares, que se encuentran disponibles de manera pública.
INVESTIGACIÓN DE ESCRITORIO
¿Qué datos puedo buscar?
 Preguntas iniciales:
● ¿Qué problemas o necesidades tienen nuestros usuarios?
● ¿Qué información real tengo para sustentar?

A continuación encontrarás diferentes abordajes para hacer una desktop research. Recuerda
que es una investigación generativa, y los datos deberán ser validados a partir de fuentes
confiables.

Investigación de escritorio
 Aplicaciones similares

Investigación de escritorio
 Reseñas positivas

Investigación de escritorio
 Reseñas negativas

Investigación de escritorio
 Notas periodísticas

Investigación de escritorio
 Notas periodísticas

Investigación de escritorio
 Audiencia total

Investigación de escritorio
 ODS - ONU

Investigación de escritorio
 Google Trends

Investigación de escritorio
 DOCUMENTO GENÉRICO - INVESTIGACIÓN DE
ESCRITORIO
Template genérico para la generación de una investigación
de escritorio inicial de tu proyecto. Encontrarás el documento en la carpeta de la clase.

Investigación de escritorio
Ahora que ya sabemos que las ideas nacen de un proceso
de diseño, vamos a crear y definir: nuestro problema, el
objetivo y la solución.
 1

DEFINIENDO EL PROBLEMA, EL OBJETIVO Y

Con base en la pregunta deLA SOLUCIÓN
la clase pasada, proponer una hipótesis de solución para
generar un prototipo de aplicación desde cero, en el cual trabajarás a lo largo del curso.
DEFINIENDO EL PROBLEMA, EL OBJETIVO Y
LA SOLUCIÓN
Formato:
Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre “Idea+Apellido”. Se puede entregar
una presentación de Google también.
Sugerencia/s:
Activar comentarios en el archivo.
Consigna:
En base a la pregunta de la clase pasada, generar una hipótesis de solución para generar un proyecto desde cero.
¿Qué deberás incluir en esta entrega?
El plan deberá contemplar los aspectos metodológicos que hemos visto en la clase:
● Problema: ¿cuál es la hipótesis? Identificar un problema real que la motive. Debe estar correctamente redactado. En su
desarrollo, debe incluir: contexto, actores/as involucrados/as, facilitadores y obstaculizadores.
● Objetivo: ¿qué buscamos? Definir un objetivo concreto que surja del problema.
● Solución: ¿qué proponemos? Describir la solución del Prototipo de aplicación. ¿Cómo soluciona el problema? ¿Qué
funcionalidades va tener el proyecto?
● Opcional: investigación de escritorio. Se sugiere contestar las siguientes preguntas:
¿Qué problemas o necesidades tienen nuestros usuarios? ¿Qué información real tengo para sustentar esto? Además, se recomienda
usar el documento “Investigación de escritorio”, que se encuentra en la carpeta de la clase. Tener en cuenta que si bien este punto es
opcional, te lo pediremos en la primera entrega del proyecto final.
TE INVITAMOS A QUE MIRES
LOS SIGUIENTES CODERTIPS
DE LA CLASE 2
● ¿Qué es Design Thinking? Sus 5 etapas y cómo llevarl
as a la práctica
| Diseño UX | Coderhouse
 ¿QUERÉS SABER MAS? TE
DEJAMOS MATERIAL AMPLIADO
DE LA CLASE 2
● Guia Completa: Design Thinking | Coder House.
● Sprint - El método para resolver problemas y testear |
Jake Knapp.
● Design Sprints | Google
● Just Enough Research | Erika Hall

Disponible en nuestro repositorio.

¿PREGUNT
AS?
¡MUCHAS Resumen de lo visto en clase hoy:
- Conocer las distintas metodologías de diseño.

GRACIAS! - Aproximarse a las metodologías ágiles, y

comprender su diferencia con las de cascada.
- Generar conocimiento validado mediante nuestra
primera aproximación a la investigación.
OPINÁ Y VALORÁ ESTA
CLASE