1. Resumen Ejecutivo
Empresa: Distribuidora de papa fresca B2B y B2C
Ubicación: Pasto, Colombia
Mi Rol: Technical Product Owner & Full-Stack Designer/Developer (Freelance)
Duración: 4 semanas (MVP)
Estado: En fase de pruebas con usuarios reales
Tecnologías: Next.js, Supabase, Tailwind CSS, OpenAI GPT-4o-mini, Meta WhatsApp API, Vercel, Figma
Resultado clave: Sistema end-to-end que incluye landing page de conversión, automatización del 100% de la toma de pedidos vía WhatsApp, reduce tiempos de respuesta de minutos a segundos y elimina pérdida de pedidos.
2. El Problema
La distribuidora operaba con un proceso manual fragmentado:
- Sin presencia digital: No tenían sitio web para captar clientes nuevos.
- Canales dispersos: Llamadas telefónicas, WhatsApp manual, papel y lápiz.
- Cuello de botella: El dueño debía atender personalmente cada consulta para brindar información de productos, precios y tomar pedidos.
- Pérdida de oportunidades: Pedidos perdidos por no contestar a tiempo, especialmente en horas pico.
- Desorganización operativa: 5 domiciliarios sin sistema de asignación clara, causando demoras y pedidos olvidados.
3. Mi Rol como Technical Product Owner & Designer
Como TPO freelance, lideré el proyecto de descubrimiento a deploy, incluyendo diseño visual completo:
| Fase | Actividades |
|---|---|
| Descubrimiento | Entrevistas con dueño y 5 domiciliarios para mapear flujo de trabajo real y necesidades de marca. |
| Definición | Priorización de features (MVP vs. futuro), definición de alcance técnico y estrategia de conversión. |
| Diseño UX/UI | Wireframes, prototipos y diseño visual completo de landing page, dashboard y PWA validados con usuarios finales. |
| Arquitectura | Decisiones técnicas: stack serverless, integración AI, base de datos. |
| Desarrollo | Full-stack implementation (frontend, backend, integraciones). |
| Deploy | CI/CD en Vercel, configuración de webhooks Meta. |
| Validación | Sesiones de feedback con usuarios, iteración continua. |
4. Solución: Ecosistema Digital Completo
4.1. Landing Page — Diseño de Conversión
Diseñé y desarrollé una landing page orientada a conversión que sirve como punto de entrada para nuevos clientes.
4.1.1. Objetivos de diseño:
- Transmitir confianza: Identidad visual que refleje origen local y frescura del producto.
- Educar al cliente: Información clara sobre variedades de papa y usos (hogar vs. restaurantes).
- Convertir visitantes: CTA claro hacia WhatsApp de ventas.
4.1.2. Elementos clave:
- Hero section: Fotografía de producto de alta calidad con value proposition clara ("Directamente del campo a su mesa").
- Sección de beneficios: Cards visuales destacando "Papa 100% Nariñense", "Seleccionada", "Calidad Superior".
- Social proof: Testimonios de clientes (asaderos, restaurantes).
- Recetas: Contenido de valor para engagement y SEO.
- CTA múltiple: Botones de "Cotiza tu papa" en hero, navbar sticky y footer.
4.2. Flujo de Automatización Inteligente
5. Decisiones Técnicas Clave
5.1. AI con Function Calling (No solo chatbot)
En lugar de un chatbot conversacional genérico, implementé Function Calling de OpenAI para garantizar estructura de datos.
Ventaja: El pedido se registra directamente en base de datos sin intervención humana, eliminando errores de transcripción.
5.2. Sincronización Realtime con Supabase
Utilicé el canal realtime de Supabase para:
- Dashboard admin: Actualización instantánea de nuevos pedidos (sin refresh).
- PWA domiciliarios: Notificación push inmediata al ser asignado un pedido.
- Concurrencia: Múltiples domiciliarios pueden operar simultáneamente sin conflictos de estado.
5.3. PWA Optimizada para Contexto de Uso Real
Basado en feedback directo de los domiciliarios:
- Diseño one-hand: Botones grandes (min 48px touch target) para manejo con una mano y sin necesidad de quitarse los guantes.
- Modo offline: Cache de pedidos asignados para consulta sin conexión.
- Notificaciones nativas: Service Worker con push notifications para nuevas asignaciones.
6. Impacto y Resultados (Sistema de Medición Directa)
| Métrica | Antes | Después | Mejora |
|---|---|---|---|
| Tiempo Promedio de Toma de Pedido | 15 mins (Llamada) | 10 Segundos (AI) | 90% Más Rápido |
| Cuellos de botella (Asignación Domiciliaria) | Llamadas manuales cruzadas | Botones de Estado Digital | Efectividad 100% |
| Tiempo de Entrega Promedio | 120+ mins | 45 mins | +55% Velocidad |
| Errores de Facturación | 15% Promedio (Error Humano) | 0% | Automatización Total |
Adicionalmente:
- Curva de adopción del domiciliario de 1 solo día (Gracias a UX predictiva de botones grandes).
- Recupero de la inversión (ROI) en el primer mes gracias a los pedidos nocturnos capturados que antes se perdían.
7. Galería del Producto
8. Lecciones Aprendidas y Próximos Pasos
Lecciones Aprendidas Clave
- Móvil First es "Logístico First": Para el trabajador Logístico, los botones deben ser gigantes. Evitar interfaces recargadas en pantallas pequeñas.
- Fricción Cero en IA: El mercado latino asimila la IA de manera transparente en WhatsApp mucho mejor que en portales web donde requieren "Crear una cuenta y contraseña".
Próximos Pasos (ROADMAP)
- Geolocalización centralizada de repartidores en Google Maps (Waze integrado) desde el Dashboard central.
- Módulo de finanzas (Balance General Semanal Automático).
- Prepago online (Pasarela Nequi / Bancolombia Integrada al Bot).
- App Nativa (APK) para Domiciliarios con PWA (Progressive Web App).
9. Sobre Este Proyecto
- Mi contribución: Product discovery, arquitectura técnica, diseño UX/UI, desarrollo full-stack, deploy y validación con usuarios.
- Tipo: Proyecto freelance end-to-end
- Equipo: Individual (yo como único desarrollador y TPO)