Portafolio / Producto digital a medida
De una solicitud a una operación coordinada.
La Tía de la USA mueve pasajeros en Miami, Fort Lauderdale, Palm Beach y Orlando con chofer privado. El servicio siempre fue personal —un despachador responde por cada viaje—, pero vivía repartido entre formularios, llamadas, correos y cobros sueltos. Diseñamos y desarrollamos el sistema que lo sostiene: estimado en el sitio, reserva estructurada, revisión humana, factura con enlace seguro, portal privado del viaje y un panel donde el equipo opera todo.
01El encargo
El servicio ya era bueno. El proceso no se veía.
En transporte ejecutivo el producto es la certeza: que el carro esté, que el precio sea el que se dijo, que alguien responda si el vuelo se retrasa. La Tía ya daba eso —lo daba un despachador, viaje por viaje—, pero el camino hasta ahí era un formulario aquí, una llamada allá, un correo de confirmación, un cobro por otro lado y una hoja donde apuntar qué vehículo quedaba libre.
Ese reparto no se nota cuando hay tres viajes al día; se nota cuando hay treinta. El encargo fue quitarle fricción a la operación sin quitarle lo personal: que el sitio prepare la solicitud completa y que el equipo siga decidiendo el precio final.
Antes: puntos sueltos
- 01Solicitudes por formulario y por teléfono
- 02Cotizaciones escritas a mano
- 03Confirmaciones por correo
- 04Disponibilidad de vehículos en una hoja
- 05Cobros y saldos por fuera
- 06Cambios y cancelaciones por chat
Nuestro rol
Producto, diseño y desarrollo completos: la experiencia pública, el autocotizador, el flujo de reservas, el portal del viaje, el panel operativo y las integraciones de cobro y correo. Un solo equipo de punta a punta.
02Arquitectura
Tres superficies, una misma reserva.
No son tres productos: son tres vistas del mismo viaje, cada una con lo que su lector necesita decidir y nada más.
Para decidir antes de escribir.
Servicios, flota por tipo de vehículo, zonas cubiertas, qué incluye cada reserva y un estimado que se calcula solo. El visitante llega a la conversación sabiendo qué pide y qué cuesta aproximadamente.
Para coordinar el día.
Panel con reservas nuevas, confirmadas y próximas, calendario, clientes, vehículos, servicios adicionales, cotizaciones, facturas, pagos, saldos y roles del equipo.
Para seguir el viaje sin perseguir a nadie.
Cada reserva puede abrir un enlace privado donde el pasajero consulta su viaje y gestiona cambios, sin que cada actualización dependa de un mensaje manual.
03La idea
Lo que el sistema tenía que probar.
La marca promete confianza. El sistema la hace operable.
Un sitio de transporte de lujo puede verse impecable y seguir dejando al cliente sin saber qué pasa después de enviar el formulario. Aquí la promesa se sostiene en el proceso: el estimado dice que es un estimado, la revisión del despachador es explícita, el precio se aprueba antes de cobrar y cada cambio queda en un enlace que el pasajero puede abrir.
Por eso el autocotizador no cierra la venta solo. Prepara la solicitud, evita la conversación incompleta y le deja al concierge la decisión que sí es humana: qué vehículo, qué ruta, qué precio final.
CotizarCoordinarCobrar
04El sistema
Del estimado a la operación coordinada.
Una sola reserva atraviesa todas las piezas. Estos son los sistemas que la sostienen y lo que pasa con ella en cada tramo.
Sitio · React
Experiencia públicaMapLibre
Rutas y zonasSupabase
Datos y accesosSquare
Facturas y pagosSendGrid
Correo transaccionalPortal
Enlace privado del viaje
- 01
Estimado en el sitio
El visitante elige servicio, recogida, destino, fecha, vehículo, pasajeros y extras. El sistema devuelve un estimado contextual y lo dice con todas sus letras: es un estimado, todavía no se cobra nada.
- 02
Solicitud de reserva
Los datos del estimado pasan al formulario, así que nadie repite la ruta ni la fecha. Se suman equipaje, notas especiales, idioma de contacto y verificación anti-bot antes de enviar.
- 03
Revisión del concierge
Un despachador revisa disponibilidad real de vehículo y chofer, ajusta lo que haya que ajustar y fija el precio final. Es el paso que el software no reemplaza: lo prepara.
- 04
Confirmación
La reserva pasa a confirmada con su desglose. Vehículo, horario, punto de recogida y extras quedan escritos en el mismo lugar donde después se opera el viaje.
- 05
Factura y enlace de pago
Se emite la cotización o la factura y el cliente recibe un enlace seguro de pago. Los datos de tarjeta nunca pasan por el sitio: viven en la pasarela, y el sistema solo escucha el resultado.
- 06
Pago, saldo y reembolso
El estado del pago vuelve a la reserva. El equipo consulta cobrado, pendiente y devuelto sin salir del panel ni cuadrar cifras a mano.
- 07
Portal del viaje
Cada reserva puede abrir un enlace privado para el pasajero: su viaje, su desglose y sus gestiones, sin cuenta que crear ni contraseña que recordar.
- 08
Operación del día
Calendario, vehículos asignados, servicios adicionales, estados y equipo. Quien despacha ve la jornada completa en una pantalla y no en cinco pestañas.
- 09
Aviso al pasajero
Confirmaciones, recordatorios y cambios salen como correo transaccional en el idioma que el cliente eligió al reservar.
Una reserva · nueve tramos · un solo registro
05Experiencia pública
Todo lo que se puede resolver antes de hablar.
Sedán, SUV o Sprinter.
La flota se presenta por lo que el viaje necesita —discreción ejecutiva, espacio y equipaje, o cabina para grupo— con fotografía real de cada categoría en vez de un catálogo de fichas técnicas.
Tres pasos, precio cerrado antes de pagar.
Enviar la solicitud, revisión del despachador con desglose para aprobar, y la llegada del chofer con los datos por adelantado. Cada paso dice qué ocurre después, que es justo lo que un formulario suele callar.
Lo que no se cobra aparte.
Seguimiento de vuelo, espera incluida en aeropuerto, meet and greet a pedido, sillas infantiles y paradas extra, tarifa fija sin recargos por demanda y un enlace privado para cambiar o cancelar.
06El sistema
Lo que sostiene una reserva.
No son métricas de campaña: son las condiciones que hacen que el proceso se pueda repetir treinta veces al día sin que se caiga un dato.
- 3
- Superficies sobre una misma reserva
- 9
- Tramos entre estimado y viaje
- 2
- Idiomas y monedas en el sitio
- 0
- Datos de tarjeta tocando el sitio
07La marca en el producto
Un logotipo serif en una interfaz operativa.
El logotipo lo trae la marca
Un serif itálico de contraste alto, sin isotipo. Nuestro trabajo no fue redibujarlo: fue decidir cómo convive con formularios, tablas y estados sin perder su tono de servicio.
Dónde aparece
Nav flotante, pie de página, correos transaccionales, facturas y portal del viaje. En claro va en tinta; sobre fotografía o sobre tinta, la versión blanca.
Contención del oro
El dorado se reserva para hairlines, etiquetas y un botón de acción. Cuanto menos aparece, más caro se ve — y una interfaz operativa necesita que el color signifique estado, no adorno.
Fondos aprobados
Usa la versión que contrasta
Tinta sobre papel, blanco sobre tinta o sobre fotografía oscura.
No lo pongas en dorado
El oro es acento del sistema, no color del logotipo.
No lo estires ni lo inclines más
La itálica ya está en el dibujo. Escalar siempre desde una esquina.
No lo apoyes sobre el motor de la foto
Sobre imagen va en zona limpia y con la versión clara, nunca sobre el detalle.
No lo mezcles con otra serif
En la interfaz solo hay dos familias: la serif del titular y la sans del dato.
08Sistema visual
Obsidiana, papel y un oro contenido.
Superficie principal
- HEX
- #FBFAF6
- RGB
- 251 · 250 · 246
Texto · Autoridad
- HEX
- #101010
- RGB
- 16 · 16 · 16
Hairlines · Etiquetas
- HEX
- #B9954D
- RGB
- 185 · 149 · 77
Acento legible
- HEX
- #8F6F2F
- RGB
- 143 · 111 · 47
Confirmado · Cobrado
- HEX
- #3F7D53
- RGB
- 63 · 125 · 83
09Tipografía
Una serif que narra, una sans que informa.
Cormorant Garamond
Aa Bb Cc — 0123456789
Light 300 · Regular 400 · Medium 500
Jost
Aa Bb Cc — 0123456789
Light 300 · Regular 400 · Medium 500
Jost · versalitas
Aa Bb Cc — 0123456789
Medium 500 · SemiBold 600
Su chofer lo espera.
clamp(40–72) · -2% · 400Tres pasos, y el precio queda cerrado.
clamp(30–48) · -1% · 400El despachador confirma
clamp(22–30) · 0 · 500El precio que ve en el sitio es un estimado y no se cobra nada en este punto: un despachador revisa el viaje y le envía el desglose para aprobar.
16 / 26 · 0 · 400Reserva confirmada · vehículo asignado
11 / 15 · 16% · 500 UP10El producto
Lo público y lo interno.
El módulo de estimado vive en el primer pantallazo: ruta, fecha, hora y pasajeros antes de cualquier conversación.
La flota se elige por el viaje: sedán para trayecto ejecutivo, SUV por espacio y equipaje, Sprinter como cabina de grupo.
| Reserva | Estado | Vehículo | Ruta |
|---|---|---|---|
| MIA · 07:40 · llegada AA1123 | Confirmada | Sedán | Aeropuerto MIA → Brickell |
| Charter · 4 h · corporativo | Por confirmar | SUV | Downtown → Fort Lauderdale |
| Grupo · 11 pasajeros | Cotizada | Sprinter | Miami Beach → Palm Beach |
| Traslado · tarde | Pagada | Sedán | Coral Gables → MIA |
| Reserva nueva · sin revisar | En revisión | — | Orlando · fecha por confirmar |
Dos reservas esperan revisión antes de facturar. El vuelo de las 07:40 se adelantó veinte minutos: la recogida ya quedó ajustada y el pasajero recibió el aviso en su portal.
Reconstrucción del panel con reservas inventadas: estado de cada viaje, vehículo asignado, ruta y cobro. La operación real del cliente no se publica.
11El resultado
Un sitio bonito no coordina un viaje.
Lo que se entregó no es una identidad con formulario: es la capa que conecta al pasajero, al despachador y a la operación sobre un mismo registro. El cliente pide desde el sitio, el equipo decide y cobra desde el panel, y el pasajero sigue su viaje desde un enlace propio — sin que nadie tenga que reconstruir la información en cada paso.
Está construido para crecer por donde crece este negocio: más vehículos, más servicios, más idiomas y más reglas de precio son configuración dentro del sistema, no una reconstrucción. Y como el cobro vive en la pasarela y los accesos en la base de datos, sumar gente al equipo es dar un rol, no repartir contraseñas.
Stack
- 01React 19 · TypeScript · Vite
- 02Tailwind CSS · Motion
- 03MapLibre y Leaflet
- 04Supabase · Postgres · RLS
- 05Edge Functions serverless
- 06Square · facturas y pagos
- 07SendGrid · correo transaccional
- 08PDF y reCAPTCHA
Cómo se opera
El despachador revisa la solicitud, ajusta vehículo y precio, emite la factura y confirma. Lo demás —avisos, portal, saldos y calendario— se actualiza solo a partir de esa decisión.
Sigue el trabajo
Cuando el servicio es el producto, el proceso es el diseño.
Si tu operación se apoya en llamadas, hojas y cobros sueltos, y cada cliente nuevo suma trabajo manual en vez de restarlo, eso es exactamente lo que construimos: el sistema que sostiene la promesa que tu marca ya está haciendo.
Cuéntanos tu proyecto