UX: Proceso y

Metodología
@marianvill
a
¡Hola!
Soy @marianvilla
Co-Founder @pionerasdev
@eversocialco &&
@evermetrics
Profe en
@EAFIT && @upbcolombia
Nerd & Geek
 @marianvilla
# Index 01 ¿UX/UI?

02 Estrategia & Contenido

03 Wireframming & Prototipado

04 Ejecución y Análisis

05 ¿Responsabilidades UI?

06 FIN
 @marianvilla
#01 UX/UI
Si te interesa la sociología, la ciencia cognitiva,
las personas y los productos/plataformas, la
experiencia del usuario (UX) es un buen lugar
para estar. pero si entiendes esos principios y
tienes una mayor inclinación visual, puedes
mirar su hermano: Diseño de interfaz de
usuario (UI).
 UX vs UI

@marianvilla
Entendiendo el todo

Estructura
<Code>

Image by: http://bit.ly/2D7NtGC (Uso no comercial)

 UX vs UI

@marianvilla
Entendiendo el todo

Estructura Soportando
<Code> Funciones
UX
Image by: http://bit.ly/2D7NtGC (Uso no comercial)
 UX vs UI

@marianvilla
Entendiendo el todo

Estructura Soportando Cosmética

<Code> Funciones Sentidos/Reacciones
UX UI
Image by: http://bit.ly/2D7NtGC (Uso no comercial)
 @marianvilla
¿Cómo?
Comienza por una
fórmula
Identificar
Un problema

Lean UX
Fórmula
Identificar
Un problema

Generar soluciones
A partir de una hipótesis

Lean UX
Fórmula
Identificar
Un problema

Generar soluciones
A partir de una hipótesis

Prototipar soluciones
A partir de las hipótesis Lean UX
Fórmula
Identificar Probar el prototipo
Un problema con usuarios

Generar soluciones
A partir de una hipótesis

Prototipar soluciones
A partir de las hipótesis Lean UX
Fórmula
Identificar Probar el prototipo
Un problema con usuarios

Generar soluciones Salir al aire, aprender

A partir de una hipótesis y REPETIR

Prototipar soluciones
A partir de las hipótesis Lean UX
Fórmula
 @marianvilla
#02 Estrategia & Contenido
● Análisis de la competencia
● Análisis del cliente
● Estructura / estrategia del producto
● Desarrollo de contenido
● Identificar mis tipos de público:

Internos:
Empleados
Directivos
Propietarios

Externos:
Proveedores
Sociedad
Gobiernos
Acreedores
Accionistas
Clientes
5 Mins
● Construcción de mi usuario
prototipo, esta metodología se
puede aplicar con cada uno de
los stakeholders.

5 Mins
● Construcción de la
estrategia de mi producto /
aplicación.

5 Mins
IDENTIFICAR
La propuesta de valor /
usuario:
● Análisis de dolores, ganancias
y trabajos que realiza el
cliente.

5 Mins
Costumer
Journey
Map
Service
Design
Blueprint
Incorporar Emojis por
shortcuts
PROBLEMA

Mis usuarios no
pueden utilizar :
para llamar los
emojis.
 @marianvilla
Los problemas pueden ser tan simples como la
necesidad de migrar un usuario de una página a
otra, o tan complejos como crear un sistema para
eventos. Tal vez su tasa de rebote parezca
demasiado alta o no puede entender por qué los
usuarios no completan los formularios. El
propósito de identificar problemas es actuar para
mejorar la experiencia.
 @marianvilla
Referencias:
Don’t Make Me Think, Steve Krug

Frame Your Design Solution from Design Kit

 @marianvilla
#03 Wireframming & Prototipado
● Wireframing
● Prototipado
● Pruebas / Iteraciones
● Planificación del desarrollo
Wireframming

5 Mins
Prototyping
 GENERAR
SOLUCIONES
Incorporar shortcuts
 @marianvilla
Considere la posibilidad de que las soluciones
hipotéticas sean iterativas. Su equipo tendrá que hacer
una lluvia de ideas, probablemente investigar las
implicaciones en la interfaz del usuario y el impacto en la
ingeniería, y luego volver a juntar una o varias veces más
para reducir esa hipótesis. También planee crear
métricas claras para esta solución, para revelar la mejor
decisión a través de mediciones sucesivas.
 @marianvilla
Referencias:
Lean UX, Jeff Gothelf

Conversations Starters method from IDEO

 @marianvilla
#04 Ejecución y Análisis
● Coordinación con el diseñador (s) UI
● Coordinación con el desarrollador (s)
● Seguimiento de objetivos e integración
● Análisis e iteración.
Testing
Prototipar
soluciones
Herramientas
 @marianvilla
La creación de prototipos puede ser tan mínima como
un boceto de pizarra, o tan compleja como un objeto
técnico completamente funcional. El propósito de un
prototipo depende de lo que necesita para salir de él. Es
posible que simplemente desee demostrar una prueba de
concepto, o tal vez desee probar sus hipótesis con
usuarios reales.
 @marianvilla
Referencias:
Design Studio Workshop Instructions, Lane
Halley
iOS Human Interface Guidelines
Google Material Design
How to do a Product Critique by Julie Zhuo’s
 @marianvilla
#Keyword:
Co-creación
 @marianvilla
Referencias:
Collaboration in the User Experience Design
Process, Marcin Treder
Communication Between Designers and
Engineers by developer.apple.com
● “Mejores sistemas de eventos”,
● "Mejores diseños de formas",
● “Mejores herramientas de
usabilidad”,etc...

Nielsen Norman Group

Probar el
prototipo
@marianvilla
Herramientas

https://ux.stanford.edu/content/resources

#05 Responsabilidades UI
Look and Feel:
● Análisis del cliente
● Investigación de diseño
● Branding y Desarrollo Gráfico.
● Guías de usuario / Storyline
@marianvilla
Capacidad de respuesta e
interactividad:
● Prototipos de interfaz de usuario
● Interactividad y animación.
● Adaptación a todos los tamaños de
pantalla del dispositivo
● Implementación con desarrollador
El modelo de proceso de diseño de 'diamante doble' iniciado por el
British Design Council, los pasos implican estas fases de un
proyecto; Comprender, definir, divergir, decidir, prototipo y validar.
 @marianvilla
Referencias:
Basics of UX By Mustafa Kurtuldu
Top 10 ways to use G Suite for UX design
Design Sprints by Google

Shape the future of Google. User Experience

Research
Think with Google + UX & Design
 @marianvilla
Referencias:
https://design.google/
Free Templates to Keep Your Design Sprint on
Track
How Google Apps Facilitate a Design Sprint
(Remote)
 ;
@marianvill
a