Proyecto Final - Curso de Diseño UX/UI Avanzado

Proyecto Final - REDISEÑO DE APP MÓVIL -

Alumno ZABALEGUI, Ignacio M. Tutora TOSELLO, Agustina Camada 9060

Introducción VamosRapido es una aplicación mobil a través de la cual se brinda el servicio de entrega bajo demanda. En el presente informe detallaremos el proceso de rediseño que se llevó adelante, a partir de la detección de una serie de problemas de experiencia de usuario.

Contexto Este año 2020 propuso una nueva realidad y para poder sobrellevarla ha sido necesario reinventarse y adaptarse a nuevas costumbres. En un contexto de pandemia, aislamiento, distanciamiento y nuevas formas de realizar acciones cotidianas, la compra de productos por delivery ha crecido significativamente. Y es necesario estar a la altura de este nuevo desafío lo más rápido posible.

En respuesta a este rápido crecimiento en la demanda de productos, la competencia entre los proveedores de servicio de compra por delivery se ha recrudecido. Por lo que es imprescindible evaluar el desempeño de nuestro producto.

Esto nos lleva a reconsiderar la necesidad de ofrecer un producto de calidad superior, que permita a los usuarios adquirir todo aquello que necesitan, de una manera práctica, simple, y sin demoras durante el proceso.

Diseño de la Investigación

Diseño de la Investigación

Objetivo de la Investigación

Contexto

La pandemia que atravesamos en los días que corren, ha modificado los hábitos de las personas de múltiples maneras. Entre ellos, la manera de comprar.

El área geográfica operativa de Vamos Rápido, se circunscribe a la ciudad de Paraná, Entre Ríos.

Por este motivo, la competencia en el rubro se ve limitada solo a dos aplicaciones.

Es por eso, que consideramos que mejorar a experiencia de los usuarios que compran por delivery, es fundamental para acercarles eso que tanto desean, de una manera rápida, simple y confiable.

Por un lado, la conocida y de alcance internacional Pedidos Ya, y por otro, Vamos Rápido. Una app conocida localmente pero, que de todas maneras, “corre desde atrás” en lo que a competencia se refiere.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Metodología Se utilizaron dos métodos para la recolección de información. Inicialmente se realizó una encuesta cuantitativa, de la cual formaron parte 33 personas. Posteriormente, luego de procesar esos datos iniciales, pasamos a una segunda etapa, en la cual trabajamos con entrevistas de tipo cualitativas, que fueron realizadas a 5 participantes.

ENCUESTAS Y ENTREVISTAS: Cuestionario semi estructurado autoadministrado online. Realizado de manera confidencial.

Procedimiento de muestreo: No probabilístico.

Por cuotas de edad y segmento.

4

Diseño de la Investigación

Analizando la voz de los usuarios

(12,1%) mayores de 60 años

Resultados obtenidos A continuación de tallaremos la valiosa información que pudimos recabar, a partir de lo que los usuarios nos fueron transmitiendo sobre sus experiencias pasadas con nuestra app.

(24,2%) 36 a 50 años

33

usuarios

Estos datos, nos serán de serán de gran utilidad para poder enfocar nuestro esfuerzo en esos puntos de dolor que, de mejorase, contribuirán a que Vamos Rápido brinde una mejor experiencia de compra para nuestros usuarios.

(63,6%) 20 a 35 años

Encuestas Cuantitativas

Entrevistas Cualitativas

Solo el

Más del

Casi el

18,19%

87%

80%

no debió modificar sus hábitos a la hora de realizar compras.

Realiza campras con delivery con cierta frecuencia.

realizar compras por delivery, al menos, una vez por semana.

Más del

Más del

80%

90%*

manifestó conocer aplicaciones para comprar por delivery.

Prefiere el buscador y el árbol de categorías para buscar.

6

Fueron seleccionados para las entrevistas cualitativas.

Funcionalidades importantes destacadas por los usuarios que participaron de ambos estudios: Buscador - Árbol de categorías - Seguimiento del pedido

*De las 28 personas que dijeron conocer apps de delivery

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

5

Diseño de la Investigación

Propuesta de Valor Los usuarios descargan y utilizan este tipo de aplicaciones porque quieren obtener un determinado producto o servicio. Pero, fundamentalmente, porque quieren hacerse con el, de una manera práctica, cómoda y en el menor tiempo posible.

Partiendo de esta premisa, ideamos las posibles opciones de mejora de nuestra app.

Mejor visualización de los elementos dentro de los menúes de productos.

Ampliar la oferta en opciones de medios de pago Geolocalización por gps más rápida y precisa.

COMPRA DE PRODUCTOS PROPUESTA DE VALOR

O SERVICIOS

Mejor buscador de tiendas, más claro y de fácil acceso.

Poder elegir el medio de pago.

Poder hacer el seguimiento del pedido.

Encontrar fácilmente la tienda que busca Que el proceso de compra sea simple y rápido

POR DELIVERY.

Comprar y recibir un producto en el domicilio Emocional:

PEDIDO DE TAXIS. BILLETERA VIRTUAL

Funcional:

Simplificar el flujo de compra

¿Cómo trabajar como repartidor?

SEGMENTO DE CLIENTE/USUARIO

Resolver de manera rápida la compra y con pago

Ofrecer la posibilidad de gestionar ambos perfiles en la app. Comprador/repartidor.

Reformular la manera en que se muestran los productos dentro de cada proveedor

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Confusión durante la búsqueda.

Falta de claridad

seguro

Proceso de compra con muchos pasos

6

Problema

Objetivo

Soluciรณn

Problema Objetivo Solución

Problema Principales puntos de dolor

Barra de búsqueda Su presente de manera ambigua en las distintas páginas del proceso de compra. Es confuso para el usuario que inició la búsqueda de su producto y quiere realizar una nueva, ya que el buscador compite con el campo de la dirección desde la que se está comprando. Al punto que en repetidas ocasiones detectamos que intentando realizar una nueva búsqueda, los usuarios hacían “click” en el campo de cambio de dirección.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Listado de productos/servicios La elección de un sistema de “acordeón” para presentar los productos/servicios de cada tienda o vendedor, es ineficiente. Consideramos que el hecho de que el usuario no pueda acceder de primera mano a los productos que ofrece cada proveedor y que, en cambio, tenga que ir desplegando y navegando un extenso scroll, es una situación que no brinda una buena experiencia.

Barra de navegación principal Se encuentra sobrecargada de elementos, los que dificultan su correcto uso. Consideramos que en el afán de brindar más opciones al usuario, se logra un efecto contrario. Ya que la manera en la que se distribuyen los elementos en el espacio dificulta, en más de una ocasión, poder “tocar” el deseado. Situación que trae problemas a la hora de navegar la aplicación.

8

Problema Objetivo Solución

Objetivo Mejoras a lograr con nuestra solución

Barra de búsqueda

Listado de productos/servicios

Facilitar su identificación y reconocimiento lo más rápido posible, eliminando cualquier posibilidad de confusión. Jerarquizar el buscador, de manera que tome el protagonismo que necesita de acuerdo a su rol fundamental en la aplicación.

Mostrar los productos/servicios de una manera rápida, eliminando lo más posible las acciones que debe realizar el usuario para llegar a ellos.

Barra de navegación principal Simplificar la cantidad de elementos que se muestran en ella. Mejorar la navegación a través de los distintos pasos del proceso de compra.

Especificaciones funcionales A partir de los objetivos que nos planteamos, y a través del rediseño de la aplicación, apuntamos a dar solución considerando que la aplicación actual brinda servicio tanto a usuarios de Android como de iOS. Por lo tanto, nuestro trabajo estará enfocado en ambas plataformas.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

9

Problema Objetivo Solución

Solución

Modificaciones pensadas para resolver los problemas hallados

Barra de búsqueda Reposicionar el buscador, de manera que sea presentado claro, simple y fácilmente reconocible por los usuarios. Para esto se buscará elevar su nivel de jerarquía, dada su relevancia como elemento central de la app.

Listado de productos/servicios Agrupar y listar los productos de acuerdo a su categoría dentro de la oferta del proveedor.

Mostrarlos directamente al ingresar al listado y cambiar su presentación en acordeón, por una navegación más clara e intuitiva, a través de una nueva “tab-bar”.

Barra de navegación principal Simplificar los elementos que se presentan en la barra principal y eliminar información irrelevante o que puede mostrarse en otro lugar.

La presencia de tantos elementos dificulta respetar los espacios necesarios para poder interactuar con los distintos botones.

Propuesta de valor Nos proponemos mejorar la experiencia de búsqueda de tiendas, proponiendo un buscador más claro y con la relevancia que necesita al ser una funcionalidad elemental. Se reducirá el tiempo de selección del producto deseado, mejorando su presentación dentro de las tiendas. Se agilizará la navegación general dentro de la app, mejorando de manera general la experiencia del usuario.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

10

Problema Objetivo Solución

Matriz de Factibilidad, Viabilidad y Deseabilidad

ALTO y

Personas No viable

Tecnología

El hecho de ubicar las problemáticas detectadas en el cuadrante de mayores prioridades, nos permitió detectar una serie de prioridades “secundarias”, que pudimos distribuir en la matriz como se observa a continuación.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Valor para los usuarios (PERSONAS)

Deseable vs. Factible

BAJO

Mostrar al usuario el paso del proceso de compra en el que se encuentra.

Breadcrumb.

Potenciar la geolocalización, y así mejorar el seguimiento del pedido.

Reformular la manera en la que se presentan los productos.

Optimización de la “nav bar” principal. Muchos íconos complican la selección

Simplificar el flujo de compra.Recurso para mejorar la experiencia de compra.

Prioridad 3: Hacelo luego

Mejorar la visualización del buscador. Jerarquizar.

Prioridad 1: !Hacelo ya¡

Ranking de tiendas con mejores productos/ servicios. Según valoraciones de usuarios.

Listado de ofertas con lo mejores precios y promos que ofrecen las tiendas ese día.

Potenciar la geolocalización, y así mejorar el seguimiento del pedido.

Perfil repartidor. Permitir gestionar, si es el caso, los perfiles comprador y repartidor.

Programa de puntos para usuarios. Beneficios por grandes compras o compras frecuentes

Más info sobre las tiendas.

Conocer un poco más al vendedor, dará más confianza al usuario.

Prioridad 4: Olvidate de esto (por ahora...)

Prioridad 2: Si te sobra tiempo

Facilidad de implementación (TECNOLOGÍA)

x

ALTO

11

Problema Objetivo Solución

Metodología Teniendo en cuenta la naturaleza del producto y los objetivos propuestos, llevaremos adelante nuestra solución a través de la metodología de “Doble Diamante”, lo que nos permitirá abordar los problemas de una manera ordenada y progresiva para alcanzar dichos objetivos.

Entregar

nt e D iv er ge

D iv er ge

Diseñar

Research

e nt

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

PROBLEMA

e nt

DISEÑAR: Empatizar con nuestros usuarios. Una vez definido el camino a seguir, damos vida a los nuevos elementos que formarán parte de la solución.

ENTREGAR: Implementar nuestra solución. Ya con los prototipos definidos, damos lugar a la recta final, en la cual se incorporarán las nuevas características al producto terminado.

Definir

ge er nv Co

DEFINIR: Comprender a nuestros usuarios. A partir de las conclusiones obtenidas durante la investigación, pensamos la mejor solución para los problemas detectados.

Descubrir

ge er nv Co

DESCUBRIR: Donde investigamos acerca del producto, los usuarios y sus experiencias para, de esta manera, poder detectar los puntos de dolor que están experimentando.

nt e

Gráfico ilustrativo de la metodología de Doble Diamante

La metodología adoptada consta de 4 etapas:

Diseño

Etapa fundamental. Determina que nuestro diseño sea, realmente, centrado en el usuario.

SOLUCIÓN

DEFINICIÓN DEL PROBLEMA

12

Prototipo Funcional

Prototipo Funcional

Estudio utilazando la herramienta de Carsorting Conclusiones Iniciamos el presente estudio a partir de la idea de cómo consideramos que es posible mejorar la categorización y, como consecuencia, la navegación general de la aplicación. Como premisa creemos importante mencionar lo que, a nuestro entender, es el principal problema que tiene el árbol de categorías:

Las categorías principales son demasiado amplias, lo que las hace ambiguas. Por otro lado, sus nombres buscan ser demasiado abarcativos, lo que obliga a incluir dentro, productos o servicios que no, necesariamente, se vinculan directamente.

Todo esto, a su vez, complica la agrupación de las subcategorías.

A partir de este problema, planteamos un Card Sorting abierto, de manera que los participantes tuvieran total libertad para agrupar los ítems y nombrar las categorías correspondientes. Lejos de clarificarse el escenario, nos encontramos con una gran diversidad en cuanto a la manera en que se agruparon los elementos.

Las mayores coincidencias que se encontraron, responden a categorías que inicialmente son claras y tienen un segmento más marcado, por lo que creemos que su asociación no presentó mayores inconvenientes. Pero por otro lado, observamos que las categorías de mayor uso, generan cierta confusión para su vinculación, y el hecho de que solo se agrupen en tres categorías, pero sin subcategorías, es lo que genera los mayores problemas. Es por este motivo que desde nuestra propuesta de rediseño, consideramos importante incluir sub categorizaciones, que permitan agrupar mejor y ordenar más claramente los productos y servicios ofrecidos.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Matriz de similaridad obtenida en el estudio

14

Prototipo Funcional

Estudio utilazando la herramienta de Treetesting Conclusiones A partir de los datos arrojados por el estudio, pudimos observar que, en su mayoría, las categorías propuestas desde nuestro rediseño, son reconocibles por los usuarios y les permitieron cumplir las tareas propuestas. Aunque también nos encontramos con situaciones que, a nuestro entender dado el nombre de la categoría, no quedan totalmente claras.

Situación que queda claramente evidenciada cuando al tener que comprar 1 kg de helado, más del 60% lo hizo desde la categoría “Alimentos”, pero hubo un 38% que optó por buscarlo en “Otras Tiendas”. Con las demás tareas, observamos una tendencia similar. En ambos casos, al menos la mitad de los participantes tomó inicialmente el camino que se propuso como correcto.

Finalmente y a partir de lo expuesto, podemos concluir que un elemento que puede estar afectando la claridad de las categorías y sus subcategorías, es el nombre de la categoría padre. Lo que nos lleva a pensar que puede ser necesario realizar un nuevo Tree Testing, luego de plantear alternativas para los nombres de las categorías principales.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Estadísticas Las conclusiones que presentamos en este apartado fueron obtenidas a partir de los resultados obtenidos del estudio.

Puede consultar dichos gráficos a continuación:

ESTADÍSTICAS DE PRIMER CLICK

DESEMPEÑO DEL USUARIO EN LAS TAREAS

15

Prototipo Funcional

Nueva arquitectura de información (Desde la imagen se puede acceder al archivo original)

Wireflow En paralelo al desarrollo de la AI, desarrollamos el wireflow inicial. A través del cual se grafica el flujo de compra en el cuál buscamos aplicar nuestras soluciones.

VER WIREFLOW

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

16

Sistema de DiseĂąo

Prototipo Funcional

Propósitos y valores compartidos Nuestra propuesta de rediseño se funda en los siguienes propósitos y valores. Los cuales serán los faros que iluminarán la dirección a seguir, hasta la solución de los puntos de dolor detectados en la etapa de investigación.

Confianza

Tiempo

Velocidad

Las buenas relaciones se basan, fundamentalmente, en la confianza. Para ganarnos la de nuestros usuarios, les proponemos un proceso de compra transparente que les muestra, en todo momento, que sucede con el estado de su pedido antes de finalizar su compra. Y, una vez completada, pueden seguir su envío en tiempo real.

El tiempo es uno de los bienes más preciados para las personas, por lo que con nuestra app buscamos que nuestros usuarios disfruten del suyo haciendo lo que les gusta. Es por eso que desde Vamos Rápido, intentamos ofrecer una solución práctica y de fácil aprendizaje, para que nuestros puedan hacerse de sus productos y servicios, de una manera simple y sin complicaciones.

Así como buscamos que brindarle a nuestros usuarios, un flujo de compra simple y ágil, queremos que cuando realicen su compra, eso que necesitan les llegue lo más pronto posible. Es por eso que, no solo nos proponemos brindar un producto digital eficiente, sino que también apuntamos a un servicio logístico de calidad, que valore el tiempo de nuestros usuarios.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

18

Prototipo Funcional

Principios de diseño La propuesta de diseño pensada para dar vida a nuestra solución, y las decisiones tomadas para concretarla su fundan en los principios enunciados a continuación:

Simplicidad

Diseño unificado

Diseño modular

Agotar las instancias por hacer simples los

Cada elemento compositivo, forma parte

Se compone de elementos (módulos)

distintos procesos. Por más compleja que

integrante de un todo general. Por este

intercambiables fácilmente y que pueden

pueda resultar la tarea que el usuario deba

motivo, debe contribuir de una manera

ser reutilizables. Es adecuado para proyectos

realizar. Buscamos priorizar, por sobre todas

positiva a la escalabilidad del sistema.

de rápido crecimiento y que deben adaptarse a

las cosas, caminos amigables y que no

No deben existir características especiales

las necesidades de múltiples usuarios. Es una

presenten situaciones ambiguas a la hora de

o distintivas, ni valores o elementos

muy buena práctica trabajar con el modelo de

tomar decisiones.

que resulte atípicos.

Atomic Design para este tipo de sistema.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Equilibrio

Universal

Independientemente de la ubicación,

Agotar las instancias por hacer simples los

distribución y cantidad de elementos

distintos procesos. Por más compleja que

compositivos, priorizar siempre el equilibrio

pueda resultar la tarea que el usuario deba

visual de la composición. De esta manera,

realizar. Buscamos priorizar, por sobre todas

brindaremos al usuario una experiencia de

las cosas, caminos amigables y que no

uso más relajada y fluida a lo largo de las

presenten situaciones ambiguas a la hora de

distintas tareas que deba realizar.

tomar decisiones.

19

Prototipo Funcional

Identidad e idioma de marca Tipografía

Paleta de colores

MUSEO SANS CYRL: Esta es nuestra tipografía principal. Se trata de una tipografía moderna y con carácter, que dotará de claridad y personalidad todos nuestros mensajes.

Primarios

primary-light-yellow [#ffec9c] primary-yellow [#fbdd40] primary-dark-yellow [#f9cd15]

primary-black [#101010] primary-medium-black [#333333] primary-light-black [#555555]

Secundarios

dark-grey [#aaaaaa] medium-grey [#e2e2e2] light-grey [#f2f2f2]

Estilo de iconografía

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

OPEN SANS: Funcionará como nuestra tipografía de texto general. Sus formas más ámplias la dotan de un excelente funcionamiento para texto de párrafos y tiene un muy buen rendimiento en tamaños pequeños.

TÍTULO PINCIPAL

18 px / 24 px

Museo Sans Cyrl 700

Label-cards

20 px

Museo Sans Cyrl 700

Títulos-listas

18 px / 20 px

Label-cards

20 px

Museo Sans Cyrl 700

Label-icons

16 px

Museo Sans Cyrl 700

LABEL-BUTTONS

16 px

Museo Sans Cyrl 900

Párrafos

16 px

Open Sans Regular

ok-green [#34ae33] error-red [#db3333]

Museo Sans Cyrl 500/700

20

Prototipo Funcional

Identidad e idioma de marca Estilo de imรกgenes

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

21

Prototipo Funcional

Identidad e idioma de marca Nuestro “Círculo dorado”

¿Por qué?

¿Cómo?

¿Qué?

Queremos cambiar la manera en que las personas compran sus productos y servicios.

Valores genéricos: Adquisición de productos y servicios, envíos y delivery.

Queremos que cada uno pueda aprovechar su tiempo para hacer las cosas que realmente disfruta, en lugar de ocuparlo en trasladarse a algún lugar para hacer las compras.

Valores específicos: Servicio de taxis, billetera virtual.

Queremos cambiar la manera en que las personas compran sus productos y servicios.

Queremos que cada uno pueda aprovechar su tiempo para hacer las cosas que realmente disfruta, en lugar de ocuparlo en trasladarse a algún lugar para hacer las compras.

Queremos facilitar el día a día de las personas e invitarte a ser parte.

Queremos facilitar el día a día de las personas e invitarte a ser parte.

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Texto de Identidad: Delivery, movilidad y gestión de cobros y pagos, todo en un solo lugar. ¿Increíble no?

22

Prototipo Funcional

Identidad e idioma de marca Definiendo la voz de nuestra marca

Eficiente

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Confiable

Transparente

23

Prototipo Funcional

Identidad e idioma de marca Guía de estilos

Temática

Descripción

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

Buenas Prácticas

Malas Prácticas

24

Prototipo Funcional

Componentes Cards principales 16 px

Burbujas 16 px

20 px

20 px

16 px

16 px

15 px

15 px

20 px 10 px

5 px

20 px 20 px

20 px 16 px

15 px

15 px

16 px 20 px

20 px 3 px 3 px 10 px

15 15 px px

10 px

8 px

15 px

10 px 10 px

15 px

10 px 10 px 15 px

15 px

15 px 15 px

16 px

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

13 px

16 px

13 px 13 px

13 px

13 px

25

Prototipo Funcional

Componentes Barras de navegaciรณn 16 18 px px

Inputs y botunes 16 px

60 px

20 px

322 px

22 px 18 px 10 px

16 10 px px

16 px

10 px

16 px

16 px

344 px

10 px 16 px

10 px

322 px

22 px 12 px

16 px

20 px

20 px

20 px

16 px

12 px

10 px

20 px 7 px

344 px

10 px

322 px

22 px

10 px 10 px 10 px

10 10 px px 18 px

16 px

20 px

20 px

16 px

18 px

10 px 10 px 10 px 10 px

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

26

Prototipo Funcional

Coreografía general Comportamiento de los elementos

Línea de tiempo y

Posición Marca gráfica (Símbolo) Borde. izq. X: -173 >>> 139

CATEGORÍAS [Ease out]

OPACITY 500ms

1150ms

PANTALLA DE CARGA INICIAL (DIRECTA).

El disparador es la carga de la aplicación. Ingreso de la marca gráfica y aparición del botón de acceso.

SCALE Posición Marca gráfica (Logotipo) Borde izq. X: -324 >>> 68

[Ease out]

500ms

POSITION-X

1150ms

POSITION-Y Botón ingresar (Background) Opacidad: 0% >>> 100%

[Ease out]

NOTA: Dado que el movimiento es directo y todas las animaciónes se suceden en simultáneo. Unificamos el color de la curva de movimiento para referenciar a todos en una sola curva.

HEIGHT

Escala: 40% > 100%

WIDTH

500ms

1150ms

RADIUS Botón ingresar (Ícono) Opacidad: 0% >>> 100%

[Ease out]

ANGLE

Escala: 10% >>> 100%

FILL 500ms

1150ms

Ver gif animado de la coreografía

x 200

400

600

800

1000

1200

1400

600

800

1000

1200

1400

Curva de movimiento y

x 200

400

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

27

Prototipo Funcional

Coreografía general Línea de tiempo y

Comportamiento de los elementos CATEGORÍAS

Posición Marca gráfica (Símbolo) - Esquina inf. izq. X: 139 >>> 660 [Ease in] 0ms

OPACITY

650ms

Posición Marca gráfica (Logotipo) - Esquina inf. izq. X: 68 >>> 510 [Ease in]

SCALE 650ms

0ms

Background - Opacidad: 100% >>> 0% [Lineal] 650ms

POSITION-X

CARGA DEL HOME (SUBORDINADA).

El disparador es el botón (flecha) de la pantalla de bienvenida. Salida de la marca gráfica y desaparición del botón de acceso. Ingreso al home y aparición de los accesos principales de la app, entiendo que las filas 2 y 3 están subordinadas a la fila 1.

850ms

POSITION-Y

Ítems 1 y 2 - Escala: 4% >>> 120% >>> 100% [Ease in and out] 850ms

1050ms

1250ms

HEIGHT

Label Ítems 1 y 2 - Opacidad: 0% >>> 50% >>> 100% [Ease in and out] 1050ms

1250ms

WIDTH

1450ms Ítems 3 y 4 - Escala: 4% >>> 120% >>> 100% [Ease in and out] 1450ms

1650ms

RADIUS

1850ms

ANGLE

Label Ítems 3 y 4 - Opacidad: 0% >>> 50% >>> 100% [Ease in and out] 1650ms

1850ms

2050ms

FILL

Ítems 5 y 6 - Escala: 4% >>> 120% >>> 100% [Ease in and out] 2050ms

2250ms

Ver gif animado de la coreografía

2450ms

Label Ítems 5 y 6 - Opacidad: 0% >>> 50% >>> 100% [Ease in and out] 2250ms

2450ms

2650ms

x 300

600

900

1200

1500

1800

2100

2400

2700

3000

900

1200

1500

1800

2100

2400

2700

3000

Curva de movimiento y

x 300

600

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

28

Prototipo Funcional

Coreografía general Línea de tiempo y

Comportamiento de los elementos CATEGORÍAS

Transición de pantalla (Ítems mostrados) Opacidad: 100% >>> 0% [Lineal]

OPACITY 0ms 50ms Ítems del listado Opacidad: 0% >>> 100% [Ease out] 50ms

SCALE

LISTADO DE PUNTOS DE VENTA DE ALIMENTOS (SUBORDINADA).

El disparador es el ícono principal "Alimentos" en el home. Nos lleva al listado de puntos de venta de alimentos. Se listan los elementos de manera subordinada al primero.

POSITION-X

250ms

Ítem listado (Heladerías) - Borde superior. Y: 219 >>> 304 [Ease out]

POSITION-Y 250ms

900ms

HEIGHT

Ítem listado (Pastelerías y Confiterías) - Borde superior. Y: 219 >>> 389 [Ease out] 250ms

WIDTH

900ms

Ítem listado (Pizzerías) - Borde superior. Y: 219 >>> 474 [Ease out] 250ms

RADIUS 900ms

ANGLE

Ítem listado (Restaurantes) - Borde superior. Y: 219 >>> 559 [Ease out]

FILL 250ms

150

900ms

300

Ver gif animado de la coreografía

450

600

750

900

1050

450

600

750

900

1050

Curva de movimiento y

x 150

300

ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2

29

Prototipo funcional A medida que avanzamos durante el proceso de doble diamante, descrito anteriormente, fuimos realizando mĂşltiples iteraciones que nos permitieron ir mejorando nuestro prototipo final. El mismo les permitirĂĄ navegar la soluciĂłn propuesta, de manera que pueda interactuar con las funcionalidades que mejoramos.

Acceder al prototipo

Muchas gracias.