> Sobre okPass
okPass nació como un proyecto dedicado a ayudar a las personas a realizar sus compras de manera presencial más eficiente y segura. Fue una aplicación híbrida con un sistema de turnos; las personas buscaban un negocio, seleccionaban día y horario de visita y obtenían un pase. Con ese pase, podían realizar sus compras y de esa manera se evitaba que tuvieran que realizar largas filas para poder comprar.
Nace como una necesidad de aliviar los colapsados sistemas de compra y venta online durante el inicio de la pandemia del COVID-19.
> Mi Rol
Participé en este producto desde el momento de la gestación de la idea hasta su posterior desarrollo como producto digital, pasando así por etapas de definición, ideación, prototipado, testing y mantenimiento. Me desempeñé como front-end UX/UI designer. 
Trabajé de manera conjunta con desarrolladores, equipos de marketing y diseñadores externos a la empresa en la cuál se desarrolló este proyecto.
Las tareas que ejecutaba día a día eran las siguientes:
●  Prototipado de pantallas y userflows en Figma y Zeplin.
●  Desarrollo de sistema de diseño para la aplicación web y mobile tanto como para clientes como para dueños de negocios.
●  Creación de material publicitario para medios impresos y digitales. 
●  Desarrollo creativo de piezas para redes sociales: Instagram, Facebook, LinkedIn y Youtube.
●  Maquetado de diseños para la aplicación web utilizando HTML5, CSS3 y Bootstrap en entorno Angular.
> Período
Marzo, 2020 - Diciembre, 2020.
> Ubicación
Buenos Aires, Argentina.
> Target
Argentinos y personas residentes de la República Argentina. Mujeres y hombres desde los 14 a los 50 años de edad.
> Problema
Durante el inicio del 2020, debido a la situación sanitaria de público conocimiento, muchas personas comenzaron a ordenar alimentos y productos de higiene y limpieza online. En consecuencia, muchos de los servicios de logística y distribución de los supermercados se vieron colapsados. Muchas clientes no tenían opción y debían realizar sus compras en persona, lo que respresentaba un riesgo para su salud. Por otro lado, los negocios tenían la obligación de limitar la cantidad de personas que podía comprar a la vez, y a causa de esto se generaban extensas filas de clientes esperando para realizar sus compras.
> Objetivos
💗 Reducir la cantidad de tiempo que las personas pasan esperando en las filas antes de comprar.
💗 Promover pequeños y medianos negocios durante la pandemia.
💗 Traer calma y positividad a una sociedad que vivía con incertidumbre y miedo.
> Solución
Desarrollo de un sistema de turnos que contaba con aplicación web (para asignación de turnos para comerciantes) y aplicación híbrida mobile (para reserva de pases para clientes)*
*Para este caso de estudio sólo se detallará parte del proceso relacionado al desarrollo de la aplicación mobile para clientes.
Para obtener un pase de acceso a un negocio el usuario debía realizar los siguientes pasos:
●  Buscar por dirección, rubro o nombre de negocio.
●  Seleccionar un negocio de una amplia lista de opciones.
●  Elegir un día y fecha.
●  Confirmar cita.
Luego de realizar estos simples pasos los usuarios obtenía un pase de acceso al negocio en cuestión. Gracias a esto el tiempo de espera se redució considerablemente.
> Desktop Research
Contexto
Durante los últimos días de Diciembre del 2019, Wuhan, China fue el epicetro de un brote epidemiológico muy resistente a los tratamientos médicos actuales. En solo unos pocos días las personas infectadas aumentaron exponencialmente, no sólo en este país sino que también en todo el mundo. Un nuevo virus: COVID-19.
En el año 2020, la World Health Organization, declaró a este desastre como una pandemia. Una de las principales recomendaciones incluían:

🏡 Quedarse en casa y ventilar los espacios con frecuencia.
🧼 Lavarse las manos frecuentemente.
📏 Mantener distancia social de otras personas.
😷 Utilizar mascarillas en público, especialmente, en espacios cerrraods o cuando la distancia social no es posible.
El objetivo principal de la desktop research fue indagar para conocer cómo se sentían los usuarios con respecto al contexto de pandemia y su repercusión en una de las actividades que realizaban a diario: Compras. En consecuencia, se optó por utilizar el siguiente método de análisis cualitativo para obtener esa información. 
Se realizaron breves sesiones de entrevistas individuales tanto a clientes como a dueños de negocios. Se crearon mapas de empatía con la información decantada:
También se aplicaron encuestas online como método de análisis cuantitativo para conocer más sobre el comportamiento de los usuarios durante la pandemia con respecto a cómo hacen sus compras diarias. Los resultados obtenidos fueron los siguientes:
Un dato importante que se desprende de esta investigación es que muchos pequeños y medianos comercios no cuentan con servicio de entrega a domicilio, por lo tanto, la app además de ser beneficiosa para usuarios que desean comprar de manera presencial también beneficiaría a aquellos dueños de locales que no cuentan con la posibilidad de poder costear un servicio de entregas.
​​​​​Iterative Process: Design Thinking
💗 EMPATIZAR
🎯 DEFINIR
💡 IDEAR
✏️ PROTOTIPAR 
📱 TESTEAR
> MPV: Producto Mínimo Viable
Es una técnica que permite determinar cuáles son las funciones principales que debe tener un producto digital para satisfacer las necesidades de sus early adopters.  ​​​​​​​
Funciones esenciales:
📍  Encontrar negocios cerca del hogar del usuario.
📆  Reservar pases.
Otras funcioalidades deseables:
⚠️ Reportar negocios con largas filas.
✉️ Invitar amigos a la aplicación.
⭐️ ​​​​​​​Calificar negocios.
> Versión Inicial del Prototipo
> ​​​​​​​Propuesta de Mejoras
Se tomaron los diseños creados con anterioridad y se aplicaron los siguientes ajustes a partir de testeos realizados con usuarios reales.​​​​​​​
Reservar Pase Paso 1:
- Algunos usuarios tuvieron confusiones a la hora de ingresar la dirección del local. Por lo tanto, se optó por colocar un único input para ingresar la dirección y un pequeño botón, el cuál al hacer click ingresa la ubicación actual.
-Se hicieron ajustes en los tamaños de las tipografías, alturas de los campos de formulario e iconos de la barra de navegación inferior, ya que, todo estaba demasiado pequeño.
- Se decidió quitar el logo de la barra de navegación superior para colocar un texto que haga alusión a la funcionalidad de esa pantalla.
Opción Inicial
Opción Inicial
Reservar Pase Paso 2:
- Cuando el usuario ingresa datos para buscar un negocio en específico, la aplicación arroja resultados (En el caso de que los encuentre) y éstos se pueden mostrar como vista lista o en un mapa. Se cambió el icono para acceder al mapa por uno que sea más fácil de reconocer. 
-Se ajustó la UI de las listas (Vista Lista) y de la bottom sheet (Vista Mapa), estableciendo jerarquías tipográficas más claras y visibles. También se incorporó la posibilidad de agregar una imagen acorde al servicio o producto del negocio.
Reservar Pase Paso 3:
- Varios usuarios comentaron que les sería más útil poder seleccionar dentro de un espectro más amplio de fechas. En consecuencia, se agregaron más meses y días para elegir.
Reservar Pase Paso 4:
- Las opciones de cancelar pase, descargar y compartir se movieron a la app bar. 
- Cada pase contará con un código QR, el cual podrá ser escaneado por el dueño del negocio para ofrecerle información detallada sobre el pase del cliente en cuestión (fecha, hora, id y vigencia) . Evitando el intercambio de papeles, contacto social y agilizando las compras. 
- Inicialmente, cada pase tenía su color. Los pases vigentes eran verdes, pases próximos blancos y pases vencidos rojos. En ningún lugar se especificaba la referencia de color. En la sección donde figura la información relacionada al pase, se detalló el estado.
Sugerir Negocios Cercanos:
- Se cambió la UX Writing de la acción de 'Reportar Negocio' porque sonaba negativa. La acción es notificar a okPass que un negocio en particular no dispone de su servicio. Por lo tanto, se optó por llamar al botón 'Sugerir Negocio'.
- Se eliminó el mapa, porque era confuso para los usuarios. Siemplemente, se colocó un formulario para completar con nombre del negocio, rubro, dirección y volúmen de fila. Si se considera necesario también hay un campo para comentarios extras.
- Se optó por utilizar imágenes 3D para generar mayor atractivo visual.
Mis Pases:
- Con el objetivo de unificar la UI y mejorar la UX de la pantalla de Reservar Pases con Mis Pases, se procedió a hacer un rediseño de la misma. Si el usuario decide cancelar un pase, directamente, no se muestra en el calendario. 
- Se puede acceder al detalle del pase, haciendo tap sobre el mismo. Cosa que no era posible en la versión anterior.
- El pase más reciente asignado aparecerá en color verde.
Mis Favoritos:
- Se cambió el diseño de la lista de favoritos siguiendo el mismo estilo que la pantalla de Resultados de Búsqueda. Si el usuario toca un item de la lista puede eliminarlo.
Mi Perfil:
- Para mi perfil,  se eliminó el botón 'Guardar' y se agregó un text button para editar datos personales tales como nombre, teléfono y/o e-mail.
- Se agregó más espacio entre las opciones de la parte inferior de la pantalla para que sea más cómodo para el usuario.
Version Final del Prototipo
A continuación el detalle de las pantallas ajustadas de acuerdo a los testeos de usabilidad.
> Aprendizajes
​​​​​​​ okPass fue uno de los proyectos más enriquecedores de los que he formado parte. No sólo por todo lo aprendido, sino también porque los ajustados deadlines a los que el equipo tuvo que adaptarse para desarrollar este producto me permitieron mejorar habilidades blandas tales como la comunicación, escucha activa, flexibilidad y negociación.
 Imprementación de herramientas tales como Trello para tener un mejor control del estado de las tareas y los requerimientos técnicos de los pedidos. 
  Contacto frecuente con frameworks tales como Angular y Bootstrap. 
●  Aprendí a entregar assets en tiempo y forma a mobile developers para aplicaciones híbridas.

You may also like

Back to Top