Volver a proyectos

8 min de lectura

La primera tienda online de una de las cadenas de farmacias más grandes de Venezuela y el sistema interno con el que su equipo gestiona cada pedido.

  • Diseño UX/UI
  • E-commerce
  • Diseño web

Resumen

Farmacias Nuevo Siglo tiene más de 40 sucursales en Venezuela, pero antes de este proyecto solo se podía comprar en una sucursal o por WhatsApp. Diseñé su primera tienda online, para teléfono y computadora, y el sistema interno con el que su equipo gestiona los pedidos, desde el pago hasta la entrega.

Rol
Diseñador UX/UI (freelance)
Cliente
Farmacias Nuevo Siglo
Equipo
Dueño, un gerente y 2 desarrolladores
Duración
Febrero – septiembre de 2024
Plataforma
Tienda web pensada para el teléfono y sistema de gestión de pedidos
Estado
Publicada en farmaciasnuevosiglo.com

El contexto

Nuevo Siglo es una de las cadenas de farmacias más grandes de Venezuela. La mayoría de sus sucursales está en el centro y el occidente del país, y sigue abriendo en otros estados. En internet, sin embargo, solo tenía una página institucional. El proyecto me llegó a través del desarrollador que lo iba a programar, y el pedido era claro. Querían una tienda hecha a la medida, fácil de usar, que mostrara qué había en la sucursal que eligiera el cliente y que le permitiera comprar en más de una sucursal en el mismo pedido, mientras la farmacia se encargaba de la logística.

La iban a usar personas de todas las edades, así que tenía que estar optimizada para el teléfono y funcionar desde el navegador, sin nada que descargar. Además, el equipo de la farmacia necesitaba una forma de gestionar los pedidos online, que hasta entonces llegaban por WhatsApp y no quedaban registrados en un solo lugar.

El reto

Cada sucursal tiene su propio inventario. Un cliente puede encontrar un medicamento en la sucursal cerca de su casa y otro solo en una al otro lado de la ciudad. Lo más difícil fue diseñar un carrito y un checkout que manejaran productos de varias sucursales, dos formas de entrega y varios métodos de pago, sin que comprar medicinas se sintiera como un trámite. Además, algunos pagos, como el pago móvil, Zelle y las transferencias, hay que verificarlos a mano con el banco antes de que el pedido avance.

Proceso

Empecé estudiando a la competencia, qué hacían bien otras tiendas de farmacias y en qué fallaban, y busqué referencias de tiendas similares en otros países. También me reuní con el personal de la farmacia para conocer los problemas que enfrentaban a diario y cómo la nueva tienda podía facilitarles el trabajo.

Con eso armé una librería de componentes bastante amplia, con todos los estados que podía tener cada pieza: disponible, agotado, solo en tienda, vacío y error. El handoff fue parte de todo el proyecto. Me reunía constantemente con los desarrolladores, anoté el prototipo y revisé el sitio a medida que lo iban montando.

Colores y escala tipográfica.
Algunos de los componentes, cada uno con todos sus estados.

Pensada primero para el teléfono

Diseñé cada pantalla para computadora y para teléfono, pero el teléfono puso las reglas. En móvil, el buscador y el carrito están arriba en todas las páginas, los filtros caben en un solo botón y los que aplicas aparecen como etiquetas que se quitan con un toque. El buscador, que programó el desarrollador, encuentra los productos por principio activo, por nombre comercial o aunque estén mal escritos. Si aun así no encuentra nada, la página lo dice claramente y sugiere revisar la ortografía.

El inicio en computadora. Yo definí dónde va cada banner y el equipo de la farmacia los diseña.

Tu sucursal más cercana desde la primera visita

Como el inventario y los tiempos de entrega dependen de la sucursal, la tienda necesita saber cuál es la tuya. En la primera visita pide tu ubicación y elige sola la sucursal más cercana, y puedes cambiarla cuando quieras. Una sucursal más cerca significa entregas más rápidas y menos camino si prefieres retirar en tienda. En el buscador de sucursales puedes buscar por estado, ciudad o nombre, y ver la distancia, la dirección, el horario, si está abierta en ese momento y cómo llegar.

Saber si hay antes de salir de casa

Cada producto muestra si está disponible en tu sucursal y cuántas unidades quedan. Si está agotado, un enlace muestra en qué otras sucursales hay y desde ahí lo puedes agregar. Los medicamentos con récipe llevan una etiqueta clara que dice que solo se venden en tienda presentando el récipe, para que nadie llegue al checkout y se entere ahí de que no los puede comprar.

Un carrito, varias sucursales

El carrito agrupa los productos según la sucursal de la que salen, con su dirección, para que siempre quede claro de dónde viene cada uno. Ahí mismo se cambian las cantidades o se eliminan productos, y si el pedido incluye más de una sucursal, el checkout te avisa antes de pagar para que lo revises.

Los productos agrupados por sucursal.

El checkout en una sola página

Es la decisión de la que más orgulloso estoy. Todo pasa en una sola página: eliges envío a domicilio o retiro en tienda, cambias la dirección, eliges la forma de pago y aplicas un cupón. En los pagos que hay que verificar con el banco, como el pago móvil o Zelle, la página muestra los datos de la cuenta de la farmacia y te deja reportar el pago ahí mismo, sin salir del checkout. Al terminar, recibes una confirmación en el teléfono y la preparación empieza en cuanto el equipo confirma el pago.

Todo el checkout en una sola página.

Detrás de la tienda: un solo lugar para todos los pedidos

Los pedidos se gestionan desde una oficina central en cada estado donde está la farmacia. Antes, las ventas online llegaban por WhatsApp y no quedaban registradas en un solo lugar, así que diseñé un sistema interno que las reúne todas. Cada pedido avanza por etapas claras, desde la confirmación del pago hasta la facturación, la preparación, el envío y la entrega, y en cualquier momento el equipo puede contactar al cliente o cancelar el pedido.

Hay tres roles. El administrador tiene acceso a todo y crea los demás usuarios. El operario es quien más usa el sistema. Verifica cada pago con el banco, asigna repartidores y hace avanzar los pedidos. El repartidor solo ve los pedidos en camino, entregados y cancelados, y cierra cada entrega con el código de seis dígitos que recibió el cliente o escaneando un código QR.

Seguir el pedido

El cliente sigue las mismas etapas desde su lado. Cada pedido tiene una línea de progreso con la hora de cada paso y, cuando sale a entrega, el nombre del repartidor, la placa de su vehículo y un botón para contactarlo.

Estado del proyecto

La tienda está publicada en farmaciasnuevosiglo.com y, salvo los banners promocionales, que hace el equipo de la farmacia, se ve igual que el diseño. Por primera vez, Nuevo Siglo vende por internet y su equipo lleva todos los pedidos en un solo lugar, en vez de en chats de WhatsApp.

Qué mejoraría

Hoy hay que iniciar sesión para abrir el carrito. La cuenta hace falta para la facturación, pero pedirla tan temprano puede alejar a quien solo quiere ver cuánto pagaría. Dejaría que cualquiera llene su carrito y pediría iniciar sesión solo al momento de pagar.