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.