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.

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

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

Empecemos a hablar de UX.

“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

USUARIO

PRODUCTO

NEGOCIO

PROCESO BÁSICO DE UX

BUEN

UX

FÓRMULA DEL BUEN UX

Proceso de diseñoSon 4 etapas dinámicas pero no necesariamente lineales.

PLAN DISEÑO DESARROLLO ENTREGA

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

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.

Conceptualización y Definición

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.

Definición: Con la idea definida, se arma el alcance del proyecto:

OS

+ Dispositivos y versiones

+ Modelo mental y tipo de usuario

+ Funcionalidades.

DISENO¿Cómo empieza a pensarse la app?

~

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

Ejemplo de Workflow

Ejemplo de wireframes | bocetos de baja fidelidad

Ahora…

IteramosEl test se hace sobre bocetos.

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.

DESARROLLOEl diseño visual

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

Ahora…

Iteramos nuevamenteEl test se hace sobre los prototipos de alta fidelidad.

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

ENTREGAAssets y especificaciones

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

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

Gráfica de esfuerzo

Luego de la publicación en el store que corresponda…

Nuestro diseño cobra vida

¿Dudas?

Muchas Gracias