Entrega-UIDesign_03

Vista previa del material en texto

Segunda Entrega
- PROYECTO FINAL -
Alumno
ZABALEGUI, Ignacio M.
Tutora
TOSELLO, Agustina
Camada
9060
Problema Objetivo Solución
3ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
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.
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.
Problema
Objetivo
Solución
4ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Mejoras a lograr con nuestra solución
Barra de búsqueda
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.
Listado de productos/servicios
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.
Objetivo
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.
Problema
Objetivo
Solución
Solución
5ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
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
Problema
Objetivo
Solución
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.
Modificaciones pensadas para resolver los problemas hallados
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.
6ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Potenciar la 
geolocalización, y así 
mejorar el seguimiento del 
pedido.
Mostrar al usuario el paso 
del proceso de compra en 
el que se encuentra. 
Breadcrumb.
Optimización de la “nav 
bar” principal. Muchos 
íconos complican la 
selección
Reformular la manera en la 
que se presentan los 
productos.
Simplificar el flujo de 
compra.Recurso para 
mejorar la experiencia de 
compra.
Mejorar la visualización 
del buscador. Jerarquizar.
y
x
Potenciar la 
geolocalización, y así 
mejorar el seguimiento del 
pedido.
Listado de ofertas con lo 
mejores precios y promos 
que ofrecen las tiendas 
ese día.
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.
Ranking de tiendas con 
mejores productos/ 
servicios. Según 
valoraciones de usuarios.
Perfil repartidor. Permitir 
gestionar, si es el caso, los 
perfiles comprador y 
repartidor.
Prioridad 3: Hacelo luego
Prioridad 4: Olvidate de esto (por ahora...)
Prioridad 1: !Hacelo ya¡
Prioridad 2: Si te sobra tiempo
BAJO Facilidad de implementación (TECNOLOGÍA)
V
al
o
r 
p
ar
a 
lo
s 
u
su
ar
io
s 
(P
E
R
SO
N
A
S)
ALTO
ALTO
Deseable vs. Factible
Matriz de Factibilidad,
Viabilidad y Deseabilidad
Personas
Tecnología
No viable
Problema
Objetivo
Solución
Prototipo Funcional
8ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Conclusiones
Estudio utilazando
la herramienta de Carsorting
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. Matriz de similaridad obtenida en el estudio
Prototipo
Funcional
9ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Conclusiones
Estudio utilazando
la herramienta de Treetesting
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 losparticipantes 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.
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
Prototipo
Funcional
https://drive.google.com/file/d/1ilhvCrT6z1CRw8LkbTz7hyqmrdYkv3rC/view?usp=sharing
https://drive.google.com/file/d/1ilhvCrT6z1CRw8LkbTz7hyqmrdYkv3rC/view?usp=sharing
10ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
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
Prototipo
Funcional
https://whimsical.com/zabalegui-arquitectura-de-informacion-BiByNL2gpcpswjJbynHhJg@LUSUr8hW5df8ei3dR4
https://www.figma.com/file/WsWJXc5p5d4n2TKSOL6OFN/Prototipado-r%C3%A1pido-App-Vamos-R%C3%A1pido?node-id=0%3A1
Sistema de Diseño
12ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
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
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.
Velocidad
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.
Tiempo
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.
13ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
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:
Agotar las instancias por hacer simples los 
distintos procesos. Por más compleja que 
pueda resultar la tarea que el usuario deba 
realizar. Buscamos priorizar, por sobre todas 
las cosas, caminos amigables y que no 
presenten situaciones ambiguas a la hora de 
tomar decisiones.
Simplicidad
Cada elemento compositivo, forma parte 
integrante de un todo general. Por este
motivo, debe contribuir de una manera 
positiva a la escalabilidad del sistema.
No deben existir características especiales
o distintivas, ni valores o elementos
que resulte atípicos.
Diseño unificado
Se compone de elementos (módulos) 
intercambiables fácilmente y que pueden
ser reutilizables. Es adecuado para proyectos 
de rápido crecimiento y que deben adaptarse a 
las necesidades de múltiples usuarios. Es una 
muy buena práctica trabajar con el modelo de 
Atomic Design para este tipo de sistema.
Diseño modular
Independientemente de la ubicación, 
distribución y cantidad de elementos 
compositivos, priorizar siempre el equilibrio 
visual de la composición. De esta manera, 
brindaremos al usuario una experiencia de 
uso más relajada y fluida a lo largo de las 
distintas tareas que deba realizar.
Equilibrio
Agotar las instancias por hacer simples los 
distintos procesos. Por más compleja que 
pueda resultar la tarea que el usuario deba 
realizar. Buscamos priorizar, por sobre todas 
las cosas, caminos amigables y que no 
presenten situaciones ambiguas a la hora de 
tomar decisiones.
Universal
14ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Identidad e idioma de marca
Paleta de colores
primary-dark-yellow [#f9cd15]
primary-yellow [#fbdd40]
primary-light-yellow [#�ec9c] primary-black [#101010]
primary-medium-black [#333333]
primary-light-black [#555555]
dark-grey [#aaaaaa]
medium-grey [#e2e2e2]
light-grey [#f2f2f2]
ok-green [#34ae33]
error-red [#db3333]
Primarios
Secundarios
Estilo de iconografía
Tipografía
18 px / 24 pxTÍTULO PINCIPAL Museo Sans Cyrl 700
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.
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.
20 pxLabel-cards Museo Sans Cyrl 700
18 px / 20 pxTítulos-listas Museo Sans Cyrl 500/700
20 pxLabel-cards Museo Sans Cyrl 700
16 pxLabel-icons Museo Sans Cyrl 700
16 pxLABEL-BUTTONS Museo Sans Cyrl 900
16 pxPárrafos Open Sans Regular
15ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Estilo de imágenes
Identidad e idioma de marca
16ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Nuestro “Círculo dorado”
Identidad e idioma de marca
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.
Valores genéricos: Adquisición de productos 
y servicios, envíos y delivery.
Valores específicos: Servicio de taxis, billetera 
virtual.
Texto de Identidad: Delivery, movilidad y 
gestión de cobros y pagos, todo en un solo 
lugar. ¿Increíble no?
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.
¿Qué?¿Cómo?¿Por qué?
17ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Definiendo la voz de nuestra marca
Identidad e idioma de marca
18ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Guía de estilos
Identidad e idioma de marca
19ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Cards principales Burbujas
Componentes
15
px
15
px
13
px
13
px
13
px
10
px
8
px
15
px
15
px
15 px
15 px
10 px
10 px
10 px
10 px
15 px
13 px
13 px
5 px
15 px
16
px
16
px
16
px
16
px
20 px
15 px
15 px
15 px
15 px
10 px
20 px
16
px
16
px
16
px
16
px20 px
20 px
20 px
20 px
20 px
10 px
3 px
20 px
3 px
20ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Sistema
de Diseño
Barras de navegación Inputs y botunes
Componentes
16
px
16
px
16
px
20
px
20
px
10 px
344 px
344 px
10 px
10 px
10 px
18 px
18 px
20
px
22 px
16
px
22 px
20
px
22 px
10
px
10
px
10
px
10 px
10 px
10 px
10 px
10px
10 px
322 px
322 px
322 px
16
px
16
px
16
px
16
px
16
px
20
px
20
px
20
px
10
px
16
px
16
px
18 px 60 px
18 px
10 px
10 px
12 px
12 px
7 px
Sistema
de Diseño
21ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Ver gif animado de la coreografía
Línea de tiempo
y
x
OPACITY
SCALE
POSITION-X
POSITION-Y
HEIGHT
WIDTH
RADIUS
ANGLE
FILL
CATEGORÍAS
200 400 600
500ms
Posición Marca gráfica (Símbolo)
[Ease out]Borde. izq. X: -173 >>> 139
1150ms
800 1000 1200 1400
500ms
Posición Marca gráfica (Logotipo)
[Ease out]Borde izq. X: -324 >>> 68
1150ms
Botón ingresar (Background)
Opacidad: 0% >>> 100%
500ms
Escala: 40% > 100%
1150ms
Botón ingresar (Ícono)
Opacidad: 0% >>> 100%
500ms
Escala: 10% >>> 100%
1150ms
[Ease out]
[Ease out]
Comportamiento de los elementos
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. 
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.
Curva de movimiento
y
x
Coreografía general
200 400 600 800 1000 1200 1400
https://drive.google.com/file/d/10DTwpDDLO2N4yP-8oQAHYJVgiNxoKgnb/view?usp=sharing
Sistema
de Diseño
22ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Coreografía general
y
x
300 600 900 1200 1500 1800 2100 2400 2700 3000
Comportamiento de los elementos
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.
Línea de tiempo
OPACITY
SCALE
POSITION-X
POSITION-Y
HEIGHT
WIDTH
RADIUS
ANGLE
FILL
CATEGORÍAS
0ms
Posición Marca gráfica (Símbolo) - Esquina inf. izq. X: 139 >>> 660 [Ease in]
650ms
650ms0ms
Posición Marca gráfica (Logotipo) - Esquina inf. izq. X: 68 >>> 510 [Ease in]
Background - Opacidad: 100% >>> 0% [Lineal]
650ms 850ms
Ítems 1 y 2 - Escala: 4% >>> 120% >>> 100% [Ease in and out]
850ms 1250ms1050ms
Label Ítems 1 y 2 - Opacidad: 0% >>> 50% >>> 100% [Ease in and out]
1050ms 1450ms1250ms
Ítems 3 y 4 - Escala: 4% >>> 120% >>> 100% [Ease in and out]
1450ms 1850ms1650ms
Label Ítems 3 y 4 - Opacidad: 0% >>> 50% >>> 100% [Ease in and out]
1650ms 2050ms1850ms
Ítems 5 y 6 - Escala: 4% >>> 120% >>> 100% [Ease in and out]
2050ms 2450ms2250ms
Label Ítems 5 y 6 - Opacidad: 0% >>> 50% >>> 100% [Ease in and out]
2250ms 2650ms2450ms
y
x
300 600 900 1200 1500 1800 2100 2400 2700 3000
Curva de movimiento
Ver gif animado de la coreografía
https://drive.google.com/file/d/1CZrvQ8zulVlff7zN0XNiX2HSHPs7NXEC/view?usp=sharing
Sistema
de Diseño
23ZABALEGUI, Ignacio M. | Proyecto Final - Entrega.2
Coreografía general
Línea de tiempo
OPACITY
SCALE
POSITION-X
POSITION-Y
HEIGHT
WIDTH
RADIUS
ANGLE
FILL
CATEGORÍAS
150 300 450 600 750 900 1050
0ms
Transición de pantalla (Ítems mostrados)
Opacidad: 100% >>> 0% [Lineal]
50ms
50ms
Ítems del listado
Opacidad: 0% >>> 100% [Ease out]
250ms
250ms
Ítem listado (Heladerías) - Borde superior. Y: 219 >>> 304 [Ease out]
900ms
250ms
Ítem listado (Pastelerías y Confiterías) - Borde superior. Y: 219 >>> 389 [Ease out]
900ms
250ms
Ítem listado (Pizzerías) - Borde superior. Y: 219 >>> 474 [Ease out]
900ms
250ms
Ítem listado (Restaurantes) - Borde superior. Y: 219 >>> 559 [Ease out]
900ms
Comportamiento de los elementos
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.
Ver gif animado de la coreografía
Curva de movimiento
y
x
150 300 450 600 750 900 1050
y
https://drive.google.com/file/d/1pfoqmRd4eMsd1CmFufRe_RXjai689BtT/view?usp=sharing