Download - UX process design for mobile
![Page 1: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/1.jpg)
UX MOBILEProceso de diseño en mobile apps.
Barbara LyschenkoLic. en Diseño y Comunicación visual (UNLa)UX & UI Sr Designer at FDV SOLUTIONS.
![Page 2: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/2.jpg)
FDVSOLUTIONSEmpresa argentina especializada en desarrollo de software a medida para diversos segmentos y tipos de empresas.
La misión de la compañía es formar un equipo de buenas personas, talentosas e innovadoras que generen un cambio profundo en el mercado y en la sociedad.
Tiene 8 años y ha desarrollado más de 150 aplicaciones para clientes como Toyota, CitiBank, Telecom, Kraft Foods, Merck, P&G, Nextel, entre otros.
www.fdvsolutions.com
![Page 3: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/3.jpg)
El objetivo de la charla es dar a conocer nuestro proceso de diseño.
![Page 4: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/4.jpg)
![Page 5: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/5.jpg)
Empecemos a hablar de UX.
![Page 6: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/6.jpg)
“La experiencia del usuario abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos.”
by JAKOB NIELSEN and DON NORMAN
![Page 7: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/7.jpg)
USUARIO
PRODUCTO
NEGOCIO
PROCESO BÁSICO DE UX
![Page 8: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/8.jpg)
BUEN
UX
FÓRMULA DEL BUEN UX
![Page 9: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/9.jpg)
Proceso de diseñoSon 4 etapas dinámicas pero no necesariamente lineales.
![Page 10: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/10.jpg)
PLAN DISEÑO DESARROLLO ENTREGA
![Page 11: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/11.jpg)
PLAN¿Cómo nos llega la información?
![Page 12: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/12.jpg)
El PL brinda un Kick Off para conocer la idea.La idea puede ser un concepto definido ó puede pasar que sea un concepto abstracto.
Concepto definido: El proyecto está delimitado cómo va a ser.
Concepto abstracto: Hay una idea pero se debe pulir para que sea un proyecto.
![Page 13: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/13.jpg)
![Page 14: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/14.jpg)
Conceptualización y Definición
![Page 15: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/15.jpg)
Conceptualización: En este paso el resultado es la Idea, del cual se consideran la necesidades del producto y se arma un concepto del proyecto a realizar.
Cuando hay conceptos abstractos aplicamos ciertas técnicas para aclarar el panorama.Brainstorming, Mapeo, Card sorting.
![Page 16: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/16.jpg)
![Page 17: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/17.jpg)
Definición: Con la idea definida, se arma el alcance del proyecto:
OS
+ Dispositivos y versiones
+ Modelo mental y tipo de usuario
+ Funcionalidades.
![Page 18: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/18.jpg)
![Page 19: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/19.jpg)
DISENO¿Cómo empieza a pensarse la app?
~
![Page 20: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/20.jpg)
● Definimos casos de uso y diagrama de actividades.
● Flujo de navegación (workflow)● Wireframes de baja fidelidad (bocetos)● Iteración (Testeo)
Este no es proceso lineal, se definen los pasos correlativos pero depende de los resultados de la Iteración. (cíclico)
![Page 21: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/21.jpg)
Ejemplo de Workflow
![Page 22: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/22.jpg)
Ejemplo de wireframes | bocetos de baja fidelidad
![Page 23: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/23.jpg)
![Page 24: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/24.jpg)
Ahora…
IteramosEl test se hace sobre bocetos.
![Page 25: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/25.jpg)
![Page 26: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/26.jpg)
![Page 27: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/27.jpg)
La fase de iteración puede o no hacerse una vez sola. Según el número de tareas cumplidas y de errores se evalúa repetir la fase.
Cuando tenemos resultados que convencen pasamos a la siguiente etapa donde le damos color a la app.
![Page 28: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/28.jpg)
DESARROLLOEl diseño visual
![Page 29: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/29.jpg)
● Wireframes de alta fidelidad ó Prototipos visuales
● Iteración (Testeo)
Así como en el anterior paso, de acuerdo a los resultados de la iteración puede haber un ida y vuelta con los prototipos.
![Page 30: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/30.jpg)
![Page 31: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/31.jpg)
Ahora…
Iteramos nuevamenteEl test se hace sobre los prototipos de alta fidelidad.
![Page 32: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/32.jpg)
![Page 33: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/33.jpg)
Si hay errores, la iteración se repite sobre estos. Es decir, se vuelve a iterar en la pantallas y elementos que hubo error, no en toda la app.
Ahora cuando tenemos resultados que convencen , y luego de un feedback con el cliente, se empieza a "recortar" y "especificar".
![Page 34: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/34.jpg)
ENTREGAAssets y especificaciones
![Page 35: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/35.jpg)
Recortes y detalles de las pantallas según OS y Device.
![Page 36: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/36.jpg)
Pero…¿Cuándo el producto está listo?
![Page 37: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/37.jpg)
Gráfica de esfuerzo
![Page 38: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/38.jpg)
Luego de la publicación en el store que corresponda…
Nuestro diseño cobra vida
![Page 39: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/39.jpg)
![Page 40: UX process design for mobile](https://reader033.vdocuments.co/reader033/viewer/2022052316/559ed97b1a28abb4428b4667/html5/thumbnails/40.jpg)
¿Dudas?
Muchas Gracias