DISEÑO UX/UI

Clase 32
Portfolio y Reporte UX
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 31 Clase 32 Clase 33

Autoevaluación Reporte UX y Portfolio Entrega Final y Presentación

● Formulario de Autoevaluación ● ¿Qué es un Reporte UX?

● Armado de casos de estudio
● Entrega del Proyecto final
● Mockups ● Presentación de los
● ¿Qué es un Portfolio UX? estudiantes de sus Proyectos
● Recursos útiles para continuar
finales
aprendiendo: libros, blogs,
podcasts, etc. ● Presentación de slides y
● Tarea para el Proyecto Final Prototipo en alta fidelidad
Reporte de Investigación UX
Los reportes de investigación son los datos registrados por los
investigadores de UX transformados en información útil mediante el
análisis de la información.
El objetivo es transmitir los detalles sobre el estudio, para que se
puedan incorporar en el diseño UX y de la estrategia del producto
digital.
Presentar los resultados de una investigación es crucial en el proceso
de diseño, sobre todo cuando hay que presentarlos a audiencias fuera
del equipo de UX pero con poder de decisión.
Estructura de un reporte

Podemos organizar la presentación de un reporte UX de modo que se

logre explicar estos tres objetivos:

1. Por qué: Cuál es el objetivo que buscamos cumplir

2. Cómo: Establecer qué metodologías se utilizaron y cómo se
validaron
3. Qué: Presentar datos obtenidos, logros y hallazgos
Consejos para su redacción

Nuestro reporte tiene que recoger toda la información necesaria

para que la organización pueda tomar decisiones de forma
informada y basándose en datos.

La clave del éxito es comunicar desde la generalización hacia el

detalle específico de cómo se lograron nuestros objetivos para que las
personas que no formen parte del equipo de trabajo puedan entender
con claridad todo su desarrollo.

Veamos algunos consejos útiles a la hora de presentar visualmente

nuestra investigación:
Consejos para redactar un Reporte UX
● No enviar solo un formulario largo:
Es un error enviar por correo un informe largo que nadie va a leer por completo. Es
mucho mejor añadir un mini-informe o unas diapositivas con los hallazgos más
importantes de la investigación para dar una idea rápida de los hallazgos de la
investigación. Quien quiera profundizar, podrá leer el informe completo y detallado
de la investigación.

● No olvidar los gráficos:

La información visual ayuda a la comprensión de los datos cualitativos de la
investigación de manera rápida y clara, aunque siempre deben ir acompañados de
una explicación escrita para quien desee ahondar en los detalles.
Consejos para redactar un Reporte UX
● No enviar solo los hallazgos:
Mostrar los datos y los hallazgos mediante unas diapositivas impactantes está bien,
pero hay que dar lugar a quien quiera ahondar en la información para corroborar
que fue correctamente realizada. Es muy importante que se tenga acceso a la
calidad del trabajo.
● Que contenga la información importante/imprescindible:
Recordar primero que ningún interesado en nuestro reporte va a leer más de 40
slides, debemos intentar hacer un relato claro, conciso e interesante de cada punto
abordado en nuestro proyecto. Segundo que No estamos dando un curso de UX/UI
en nuestro reporte, debe sentirse profesional y real, por lo tanto No hagan
referencias a “tareas del curso” sino a estudios o análisis sobre la temática que
desarrollaron.
Ejemplo:

Analicemos rápidamente el siguiente caso de estudio:

→ Despegar UX - Viajar en la nueva normalidad

Casos de estudio
¿Cómo podemos trasladar estas presentaciones tan técnicas a nuestros
proyectos individuales?
Igualmente, debemos poner el foco en el por qué, cómo y qué de los
reportes UX, pero convirtiendo nuestra presentación en una historia para
volverla amena e interesante.
No queremos que quien esté mirando nuestro proyecto (ya sea leyéndolo
por su cuenta o si nosotros lo presentamos), pierda el interés. Para esto,
nada mejor que utilizar como recurso un storytelling que le aporte al
interlocutor el contexto necesario para que, de manera independiente a sus
conocimientos de metodología de diseño de producto, tenga una visión
global de la misma.
Cómo presentar mi caso de estudio
Luego de explicar cuál es nuestro objetivo (por qué), es necesario demostrar que nuestra
investigación (qué) se encuentra validada correctamente (cómo).

Contenido: Validado por:

MVP (nombre del producto y features) Investigación

User persona Entrevistas y Mapas de empatía

Competencia Benchmarking

Arquitectura de Información Card Sorting

User Flow Pruebas de usabilidad

Wireframes (evolución) Pruebas de usabilidad y Heurísticas

Diseño UI Prototipo Funcional

Imprescindibles en un caso de estudio

1. Titular

Comienza con un título grande

(puede ser el nombre de tu
proyecto o su mayor diferencial) y
una bajada que cuente de tu
proyecto. Podrías apoyarte en tu
Elevator Pitch
Imprescindibles en un caso de estudio

2. MVP

Enumera y detalla cada una de las

funcionalidades de tu aplicación y
qué es lo que ofreces
(imprescindibles).

Si lo deseas, puedes añadir también

tus expectativas a futuro
(deseables).
Imprescindibles en un caso de estudio

3. User Persona

Detallar la user persona de tu

proyecto (puedes enfocarte solo en
lo más relevante) y mencionar
cómo fueron validadas.
Imprescindibles en un caso de estudio

4. User Flow

Mostrar el user flow de la

funcionalidad principal.

En caso de que sea necesario

mostrar únicamente el recorrido de
un usuario o una sección del flow
completo.

En otra slide podemos mostrar el

mapa de sitio.
Imprescindibles en un caso de estudio

5. Evolución de pantallas

El objetivo es mostrar las

iteraciones del prototipo, por lo
tanto, se recomienda mostrar la
evolución de los wireframes para
ver cómo fue modificándose y
ganando calidad.
Imprescindibles en un
caso de estudio
6. Identidad

Se deben mostrar las diferentes decisiones

de diseño aplicadas a la interfaz.

Esta sección puede incluir:

● UI kit
● Moodboard
● Atomic design
● Paleta de colores
● Logo
● Etc.
Imprescindibles en un
caso de estudio
7. Pantallas

Detallar la/s pantalla/s más destacadas de la

app.

Colocar el link al prototipo funcional, con

cuidado que no sea dirigido a la edición del
prototipo sino a la página de prueba del
prototipo, (siempre chequear el link desde
una ventana de incógnito).
Ejemplos de presentaciones

Ver en Behance
Ejemplos de presentaciones

Ver en Behance
Ejemplos de presentaciones

Ver en Behance
Mockups
Los Mockups, son “fotomontajes” que permiten a los diseñadores gráficos o
UI, mostrar al cliente cómo quedarían sus diseños aplicados. Un mockup,
hace que el diseño “se vea real” y nos brinda una imagen profesional.
Suelen estar diseñados en Photoshop y es tan simple como incorporar una
imagen de tu pantalla en el sector correcto del mockup.
Es lo más próximo a visualizar cómo puede estar diseñado un producto
digital en la realidad.
Se suele utilizar para:
Packaging, Papelería, Diseño de indumentaria, Publicidad, y por supuesto
Diseño UI: webs, desktop, tablet, mobile, etc
Tipos de mockups en el diseño UI
Contexto de uso:

Este tipo de mockups sirve para que los

usuarios entiendan cómo y dónde podrían
necesitar y usar tu producto digital.

Parecen fotos tomadas directamente de la

realidad, tanto el dispositivo como el
ambiente deben parecer reales.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Tipos de mockups en el diseño UI
Persuasivos:

Este tipo de mockups tiene por objetivo

llamar la atención.

Se suele usar perspectivas, el dispositivo

parece real pero el ambiente puede
parecer de “fantasía”.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Tipos de mockups en el diseño UI
Informativos:

Este tipo de mockups tiene por objetivo

desarrollar una información particular.

Suele mostrarse uno al lado del otro para

mostrar un recorrido, o para desarrollar
distintas funcionalidades a la vez.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Tipos de mockups en el diseño UI
Identificatorios:

Este tipo de mockups tiene por objetivo

mostrar el estilo visual general del
proyecto.

Se enfoca en la estética y personalidad del

proyecto o temática del mismo.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Portfolio
Tener un portfolio como diseñador UX/UI es imprescindible para cualquier
profesional de la industria. Es la mejor oportunidad de presentar tu trabajo
de la mejor manera y dar ejemplos de proyectos a detalle que expongan tu
proceso creativo y reflejan quién sos como diseñador.
Ya sea como diseñador independiente o de tiempo completo, los clientes o
empleadores potenciales casi siempre solicitarán tu portfolio para poder
conocer tu forma de trabajo.
Traducir tu flujo de trabajo completo y complejo a un formato visual es un
desafío, especialmente si querés enfocarte únicamente a UX. Sin embargo,
hay muchas formas de contar tu historia e incorporar recursos visuales.
Plataformas
Nuestro portfolio puede armarse en cientos de plataformas, cada una con sus
ventajas particulares. Pueden elegir la que más les convenga para armar su
portfolio (incluso crear su propio sitio web personalizado para presentarlo)

Recomendamos crear un perfil en:

Behance Dribbble

Y siempre mantener un perfil actualizado en:

LinkedIn
Consejos para realizar tu portfolio
● Que se comprenda claramente el área del Diseño UX/UI a la cual querés dedicarte,
un reporte puede ser extenso y abarcar todo el proceso completo, pero en el Portfolio
es conveniente intentar ir al grano y lucirte. Lo más probable es que un reclutador te
llame para desarrollar una tarea similar a la que estás mostrando que sabes hacer.

● Utiliza storytelling para describir todos los proyectos. Una de las características
principales de un UX Designer es contar historias a través de sus productos, por lo que
tu portafolio tiene que reflejar tus capacidades para conseguirlo.

● Es muy importante explicar el proceso que se ha seguido en los diseños, detallando

cómo y por qué tomaste esas decisiones en tu proyecto.
Portfolio Web

Ir al portfolio
Portfolio Dribbble

Ir al portfolio
Portfolio Behance

Ir al portfolio
¿Cómo continuamos?

Para poder seguir avanzando en tu carrera, también hay otras acciones

que puedes hacer en el día a día para no dejar de aprender.
Como toda área relacionada a la tecnología, el ámbito de la
experiencia de usuario es una disciplina que avanza continuamente,
por lo que mantenerse actualizado es casi una obligación. Para ello lo
recomendable es unirse a grupos de diseñadores UX/UI, asistir a
webinars o conferencias cada cierto tiempo, y realizar cursos de
especialización.
También es muy recomendable leer libros que traten temas técnicos u
otros que te puedan servir de inspiración.
Recomendaciones de libros
relacionados al diseño UX/UI

No me hagas pensar Las leyes de la La psicología de los

Steve Krug simplicidad objetos cotidianos
John Maeda Don Norman
Recomendaciones de libros
relacionados al diseño UX/UI

Lean UX 100 Cosas sobre la gente Resolver problemas y

Jeff Gothelf y Josh Seiden que cada diseñador probar nuevas cosas en
debe saber solo 5 días
Susan M. Weinschenk Jake Knapp
Comunidades UX
Revistas

Blogs
Comunidades UX

Podcasts

Empresas e instituciones
Comunidades UX

Organizaciones y más

UX Latam UX en español UX Friends UX Collective Memorisely

Proyecto Final
Tarea para el Proyecto:
Para finalizar con el proyecto final…

¡Te felicitamos por haber llegado a la última tarea del proyecto final!

Te recomendamos:

● Completar tu reporte (presentación de slides) para la Entrega Final en la clase 33.

● Crear tu portfolio, recorda que lo importante es lucirse y mostrar de forma clara lo
imprescindible de todo lo que hicimos durante el curso.
● Unirte a las redes sociales de Diseñadores UX/UI, y compartir tu portfolio.
● Actualizar tu LinkedIn, y generar tu red de contactos relacionada al diseño UX/UI.
● No perder el contacto con tu docente y tus compañeros/as.
● Definir cuál de las áreas que comprende el diseño UX/UI te interesa más y apuntar a
conseguir trabajo específico de lo que más disfrutaste del curso.
● Continuar estudiando y actualizándote.
Ejemplo de entrega:
Cronograma
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto