Food delivery app

Introducción

Para cualquier empresa crear una aplicación de entrega de comida en comedores industriales; es un reto bastante complejo. La mejor manera de crear un gran producto, es mediar entre las ideas de nuestros clientes y las necesidades del usuario,  además de entender los principios de la tecnología a la que va a ser desarrollada.  

¿Qué es Drizline?

Drizline es una aplicación que automatiza los pedidos en comedores industriales. Pasó de ser una pequeña startup, a ser una aplicación con más de 5 cadenas de operación.

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.  

Drizline en la appstore

Ilustración no oficial realizada por Carlos Damián.
Ilustración no oficial realizada por Carlos Damián. App delivery.

Toda la información presentada en este proyecto es pública y fue tomada de las páginas oficiales de la empresa citada. Los proyectos de tecnología son longevos, por ello sólo se presenta las características que se haya publicado desde las fuentes oficiales. Las imágenes son prototipos de alta fidelidad, con fines informativos, no lucrativos.

Mi participación en el proyecto

Para este proyecto tuve la oportunidad de trabajar en el rediseño de su app versión móvil para IOS y Android. Mi cargo fue de diseñador de experiencia de usuario e interfaz de usuario, el tiempo de trabajo fue de 5 meses.

Haciendo una investigación

¿Qué queríamos solucionar? En nuestra investigación nos dimos cuenta que el principal problema de Drizline era su estructura, la interfaz de usuario era bastante complicada de entender, y los usuarios 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.  

Ilustración no oficial realizada por Carlos Damián.
Ilustración no oficial realizada por Carlos Damián.

Opciones importantes para el usuario 

• Puede registrarse

• Puede ingresar y encontrar  platillos, combos y promociones.

• Puede solicitar un platillo y pagar. 

• Tiene acceso a descuentos y promociones

• Tiene su billetera y puede agregar saldo a Drizline

• Puede solicitar ayuda 

Lo más divertido ¡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 (esto se configura desde un administrador). Por ello la aplicación debe tener una cantidad limitada de elementos coloridos, para que el diseño no tenga problemas de legibilidad, o problemas en el desarrollo.

Mi mayor preocupación era agregar los componentes y tener problemas de color con el contraste o 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, muchos consideraban que se veía muy vacía y otros les gustaba bastante porque lo consideraban minimalista, por ello presente una evaluación de costos, tiempos y pruebas con los desarrolladores. Finalmente estuvimos desacuerdo que está versión era la correcta, por su simpleza visual que se adaptaba a las necesidades del cliente y su fácil desarrollo por la característica de cambio de color.

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

Anteriormente para encontrar productos se debía ingresar al restaurante o comedor, después se buscaba los productos en un listado, pero en la nueva versión decidí usar patrones de diseño actuales 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 se les recomendara los más populares o cercanos a ellos; como ya lo hacen otras aplicaciones de food delivery.

Está excluyó imágenes de productos. Las marcas se usa sólo como ejemplo.
Está excluyó imágenes de productos. Las marcas se usa sólo como ejemplo.

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
Pasos para comprar un platillo en Food delivery app

Wallet

En la billetera el usuario puede administrar sus tarjetas ya 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. También 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 muy divertido analizar, diseñar y aprender de una startup con tantas necesidades, espero seguir viendo como esta aplicación crece.

Contáctame para trabajar contigoicon-arrow

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.