Este documento describe el proceso de diseño de experiencia de usuario (UX) para aplicaciones móviles de la empresa FDV Solutions. El proceso consta de 4 etapas: Planificación, Diseño, Desarrollo y Entrega. En la etapa de Planificación se define el alcance del proyecto. En Diseño se crean casos de uso, flujos de navegación y bocetos de baja fidelidad. Luego se prueba e iteran. En Desarrollo se crean prototipos visuales de alta fidelidad y se prueban

1. UX MOBILE
Proceso de diseño en mobile apps.
Barbara Lyschenko
Lic. en Diseño y Comunicación visual (UNLa)
UX & UI Sr Designer at FDV SOLUTIONS.

2. FDVSOLUTIONS
Empresa 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

3. El objetivo de la charla es
dar a conocer nuestro
proceso de diseño.

5. Empecemos a hablar
de UX.

6. “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

7. USUARIO
PRODUCTO
NEGOCIO
PROCESO BÁSICO DE UX

8. BUEN
UX
FÓRMULA DEL BUEN UX

9. Proceso de diseño
Son 4 etapas dinámicas pero no
necesariamente lineales.

10. PLAN DISEÑO DESARROLLO ENTREGA

11. PLAN
¿Cómo nos llega
la información?

12. 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.

14. Conceptualización y
Definición

15. 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.

17. Definición:
Con la idea definida, se arma el
alcance del proyecto:
OS
+
Dispositivos y versiones
+
Modelo mental y tipo de usuario
+
Funcionalidades.

19. DISENO
¿Cómo empieza a
pensarse la app?
~

20. ● 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)

21. Ejemplo de Workflow

22. Ejemplo de wireframes | bocetos de baja fidelidad

24. Ahora…
Iteramos
El test se hace sobre bocetos.

27. 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.

28. DESARROLLO
El diseño visual

29. ● 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.

31. Ahora…
Iteramos
nuevamente
El test se hace sobre los prototipos
de alta fidelidad.

33. 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".

34. ENTREGA
Assets y
especificaciones

35. Recortes y detalles de las
pantallas según OS y Device.

36. Pero…
¿Cuándo el producto
está listo?

37. Gráfica de esfuerzo

38. Luego de la publicación en el
store que corresponda…
Nuestro diseño
cobra vida

40. ¿Dudas?
Muchas Gracias