Delivery

Drizline es una aplicación que automatiza los pedidos en comedores industriales. El público meta de Drizline son empresas que tienen afiliadas cafeterías.

los usuarios pueden pedir su comida desde una app móvil. Los comedores reciben la petición en una web app y el pedido se realiza, después la orden es llevada a su oficina o se puede consumir desde las instalaciones de la empresa.  

Delivery app
Capturas
⚠️ 
Toda la información presentada en este proyecto es pública y fue tomada de las páginas oficiales de la empresa citada.

Mi participación en el proyecto

Tuve la oportunidad de trabajar como diseñador UX UI en la versión móvil para ios y android. La duración de este proyecto fue de 8 meses.

Research

Nos dimos cuenta que el principal problema de Drizline era su estructura, la interfaz de usuario era bastante complicada de entender, y los clientes estaban muy inconformes con la experiencia de uso, además sentían incertidumbre al solicitar un pedido.

Versión antigua  de drizline, via Google Playstore y web oficial.
Versión antigua de drizline, via Google Playstore y web oficial.

Principales problemas a solucionar 

  1. Mejor flujo de usuario.
  1. Registro más sencillo.
  1. Menos pasos al seleccionar una ubicación y una empresa.
  1. Mejorar la exploración de productos.
  1. Reducir la cantidad de pasos para ordenar un producto.
  1. Diseñar una arquitectura considerado la escalabilidad.
  1. Crear un mejor diseño visual y de marca.

Diseño centrado en el usuario

Existen 2 tipos de usuarios que usan Drizline. El usuario recurrente, este usuario trabaja para una empresa y come todos los días en su comedor. El usuario variable, este usuario visita una instalación y hace uso casual del la aplicación.  

Opciones importantes para el usuario 

  • Registro por teléfono y redes sociales
  • Ingreso a la plataforma
  • Descubrir platillos y combos sugeridos
  • Solicitar un platillos y pagar
  • Acceso a promociones y afiliado
  • Ingreso a billetera y agregar saldo a Drizline
  • Solicitar ayuda 

Soluciones

Una vez definido los principales problemas, empecé a crear diagramas de flujo y prototipos de toda la arquitectura de la aplicación, junto al equipo lo dividimos en varias etapas de desarrollo y empezamos a aplicar los resultados en un prototipo de alta fidelidad.

El aspecto visual y sus retos

El primer gran reto era el aspecto visual. Como podemos ver en la imagen de abajo, el usuario debe seleccionar su ubicación, después escoge la empresa a la que pertenece o visita. Dependiendo del logo de la empresa, el color de la aplicación cambia. Por ello la aplicación debe tener una cantidad limitada de elementos coloridos.

Mi mayor preocupación era agregar los componentes y tener problemas de legibilidad sobre todo en los navbars, así que decidí proponer una versión muy simple con pocos elementos.

El diseño tuvo una aceptación dividida, algunos consideraban que se veía muy vacía y otros les gustaba porque lo consideraban simple, por ello presente una evaluación de costos, tiempos y pruebas con los desarrolladores. Finalmente estuvimos desacuerdo que está versión era la correcta, esto nos permite tener un diseño funcional y bajar la fatiga del desarrollo.

Pantallas de la nueva propuesta. Las primeras 2 pantallas tienen la identidad de Drizline, la tercera pantalla tiene la identidad de la empresa escogida.
Pantallas de la nueva propuesta. Las primeras 2 pantallas tienen la identidad de Drizline, la tercera pantalla tiene la identidad de la empresa escogida.

Descubrir platillos y productos

En el diseño anterior; encontrar productos era complicado, se debía ingresar al restaurante o comedor, después se buscaba los productos dentro de este.

En la nueva versión decidimos usar patrones de diseño amigables y brindarles a los usuarios una mejor experiencia para encontrar platillos a su gusto. La idea era que los usuarios no buscaran los platillos, sino que la app les recomendara los más populares o cercanos a ellos.

Está excluyó imágenes de productos. Las marcas se usa sólo como ejemplo.
Está excluyó imágenes de productos para evitar problemas legales. Las íconos son usados sólo para ejemplificar la solución no la versión final.

Una mejor manera de escoger

Reorganizamos la forma de pago, anteriormente se mostraba en forma de lista, pero en la nueva versión decidimos separar cada módulo usando los principios de atomic design, así logramos una mejor legibilidad.

En este ejemplo el usuario puede entrar al perfil de cada restaurante, después escoge su platillo y finalmente puede pagar.

Pasos para comprar un platillo
Está excluyó imágenes de productos para evitar problemas legales. Las íconos son usados sólo para ejemplificar la solución no la versión final.

Wallet

En la billetera el usuario puede administrar sus tarjetas y agregar saldo.

Administrar tarjetas
Administrar tarjetas

Menor incertidumbre

Quisimos mejorar los pedidos en curso, agregamos opciones de entrega, confirmación de la orden y la posibilidad de escanear un QR para evitar fraudes. Agregamos una sección para el historial de pedidos.

Versión vieja vs versión nueva. Estatus de los pedidos. Aplicación móvil food delivery.
Versión vieja vs versión nueva. Estatus de los pedidos. Aplicación móvil food delivery.

Aplicación nativa

El desarrollo de Drizline fue nativo, hubo una versión para android y otra para IOS. Ambas pueden ser descargadas en sus portales oficiales.

Versión nativa en IOS y android.
Versión nativa en IOS y android.

Drizline en la Appstore

Drizline en la Playstore

Conclusión del proyecto

Drizline continua en desarrollo, hicimos una gran cantidad de módulos que esperemos ver en un futuro. Fue divertido analizar, diseñar y aprender de una startup con tantas necesidades, espero seguir viendo como esta aplicación crece y si es.

Contáctame para trabajar contigo

Ilustraciones y recursos para creativos y startups | creative | free resourceslogo ux ui logo app carlos damian animacion
Compara la nueva versión, con la anterior. Food delivery app.

Deja un comentario

Tu dirección de correo electrónico no será publicada.