Diego Valencia
Designer

E-commerce Instantáneo

Agrega productos, activa tu tienda online y recibe órdenes en minutos.

"Diego totalmente domina el mundo del UX/UI. Es un pensador estratégico con una ejecución brillante."

Manuel Gutiérrez, CTO.

Freepik.com

Freepik.com

Un contexto difícil para todos

Sabemos lo difícil que ha sido el COVID para todos. Así como hubo compañías que pudieron continuar trabajando de manera remota, hubo otras que se vieron obligadas a suspender e incluso terminar completamente sus operaciones. 

Mientras trabajaba en el producto principal de DRUO, surgió este proyecto en el que, por medio de una aplicación móvil, los pequeños y medianos negocios recibían órdenes de sus productos y servicios y podrían mantener con vida sus operaciones.

Construyendo el producto

Mientras la cuarentena se mantenga, la solución se enfoca en órdenes online. El negocio se encarga de los domicilios o ejecución del servicio según su naturaleza.

- Crea una cuenta gratuita.

- Agrega mínimo un producto o servicio con su nombre y precio.

- Configura los detalles de la tienda online y actívala con solo un click.

- Comparte el link de la tienda completa o de productos individuales a través de WhatsApp o redes sociales.

- Tus clientes van a poder realizar un pedido de uno o más de tus productos o solicitar un servicio.

Así de simple.

Principales desafíos

Estuve a cargo de los flujos y la interfaz de la aplicación y la tienda online.

Esto tenía que completarse en 10 días para que los desarrolladores lo implementaran en el resto del mes para lanzarlo rápidamente.

Los principales desafíos de diseño fueron:

· Mantener un diseño limpio que no generara ninguna fricción tanto para los negocios publicar productos y gestionar órdenes, como para los clientes realizar sus pedidos.

· En el contexto en el que vivimos de pandemia, una comunicación directa entre el comercio y el cliente es crucial y el producto debe mostrarles una forma clara de hacerlo.

· La lista de productos y los detalles de cada uno debe ser muy fácil de leer. 

· La gestión de las órdenes debe ser sencilla. Esto incluye el cambio de estados y comunicación directa entre negocios-clientes.

· Generalmente inicio los proyectos construyendo flujos de navegación, usabilidad y wireframes para estudiar arquitectura e ir iterando. En esta oportunidad, debido al poco tiempo que se tenía para finalizar el diseño, esto no fue posible. Esto obligó a tomar decisiones más rápidas basadas en hipótesis y tomando como referencias productos de delivery que sabíamos nuestros usuarios han usado.

· A nivel de desarrollo, la aplicación fue construida en ionic, así que hubo decisiones de diseño que se limitaron a lo que este framework permitía.

Diseño de interfaz

Lo que tenemos en el inicio son las órdenes que necesitan una atención inmediata por parte del negocio.

Ubicamos tres call to action para gestionar la tienda en general: productos, órdenes y configuración. Esta configuración permite agregar detalles que posteriormente se van a mostrar en la tienda online que es creada automáticamente.

Es muy importante para los comercios el poder compartir su tienda o productos individuales a sus clientes, así que ubicamos un call to action "compartir tienda" que les permite hacer justo eso.

Pantalla de inicio

Pantalla de inicio

Catálogo de productos

La lista de productos y los detalles de cada uno debe ser muy fácil de leer. Por estrategia de negocio y esfuerzo de desarrollo, se limitaron los detalles de producto a foto, nombre, descripción y precio. 

Mantener una lista de productos o servicios limpia, con solamente foto, un snippet de la descripción y precio, fue la solución para mantener una lectura rápida de todo el catálogo.

Ubiqué el icono "+" en la parte superior derecha para permitir agregar un nuevo producto desde la vista del catálogo sin que un botón fijo en la parte inferior quitara visibilidad de algún producto.

E-commerce Instantáneo
Compartir la tienda

Es muy importante para los comercios el poder compartir su tienda o productos individuales a sus clientes, así que ubicamos un call to action "compartir tienda" que les permite hacer justo eso.

Ya sea que desee compartir toda la tienda o productos individuales, la aplicación permite a las empresas tener la opción de compartir enlaces con sus clientes para recibir pedidos más rápido.

Lo que comparten es un vínculo al producto en particular que dirigirá a los compradores a la tienda online.

Presionando el botón superior de

Presionando el botón superior de "compartir tienda" o a un producto individual, se va a desplegar la acción del sistema operativo para compartir estos enlaces por el medio que más les convenga.

Tienda online

La aplicación crea la tienda online de forma automática. Los vendedores lo activan con solo un clic. A través de aquí, los compradores pueden agregar productos al carrito y continuar con el pago para realizar un pedido.

Después de agregar productos a su carrito, los compradores indican su información de contacto y dirección para que los vendedores se pongan en contacto y entreguen el producto o servicio con facilidad.

Tomamos la decisión de combinar el paso de 'revisar carrito' y 'checkout' para una mayor agilidad en la creación de una orden.

Versión responsive de la tienda online

Versión responsive de la tienda online

Manejo de órdenes

Cuando llegan los pedidos, los vendedores deben tomar medidas inmediatas.

La gestión de las órdenes debe ser sencilla. Esto incluye el cambio de estados y comunicación directa entre negocios-clientes:

· Teniendo en cuenta la cantidad de estados que puede tener una orden, tenemos filtros rápidos en la lista de órdenes para hacer una búsqueda más rápida.

· En el detalle de la orden, ubicamos un call to action azul en la parte superior con el siguiente estado exacto de un pedido (por ejemplo, de nuevo --> en progreso --> completada). 

· Debajo de este botón, tenemos la opción de "contactar cliente" para brindarle distintos canales de comunicación directa.

E-commerce Instantáneo