Elegir asiento
El mapa usa tres colores: amarillo para los libres, gris para los ocupados y rojo para el seleccionado. Al costado, un resumen con los asientos de ida y vuelta y el total.
CITA.
Rediseño completo del sitio web de CITA, empresa uruguaya de transporte de pasajeros. El objetivo: modernizar su imagen digital y que comprar un pasaje desde el celular sea rápido y claro.
Objetivos
- Experiencia mobile-first
- Flujo de compra en pasos claros
- Precios y horarios a la vista
- Interfaz limpia e intuitiva
Problema
El sitio no estaba pensado para el celular, que es el canal principal de los pasajeros. Horarios y tarifas estaban dispersos y pedían varios clics. El buscador estaba en el home, pero sin una guía clara, y comprar un pasaje se volvía confuso.
Solución
Una interfaz nueva con el buscador como protagonista. La compra se ordenó en cuatro pasos: horario, asiento, datos y pago. Tarjetas visuales y un mapa de asientos por colores hacen que cada decisión se entienda de un vistazo.
Antes y después
Las mismas cinco pantallas del recorrido de compra, en el sitio anterior y en el rediseño. La línea recorre cada pantalla para mostrar el cambio; también se puede arrastrar o elegir una pantalla de la lista.
Comprar en
simples pasos
Cada paso de la compra repite el mismo patrón: un resumen del viaje arriba, la decisión en el centro y el botón para seguir siempre a la vista.
Elegir horario
Cada horario muestra salida, llegada, duración, si es directo y si tiene accesibilidad. El precio y la flecha para avanzar quedan alineados a la derecha.
Confirmar y pagar
Antes de pagar, un resumen con los dos tramos, los asientos elegidos y el desglose del total.
Amarillo, rojo
y nada de ruido
Partí de los colores de la marca: el amarillo CITA para la acción principal y los asientos libres, y el rojo para el logo, los íconos y lo seleccionado. El resto de la interfaz queda en grises suaves para que el contenido respire.
Roboto en toda la interfaz y un mismo sistema de tarjetas para horarios, resúmenes y comprobantes, así cada paso se lee igual que el anterior.
Elegir horario
Elegí el día y el horario que más te convenga.
Elegir asiento
Seleccioná tu asiento preferido dentro del bus.
Completar tus datos
Ingresá tu información personal y de contacto.
Pagar
Realizá el pago de forma rápida y segura.
Roboto
AaBbCc
LibresOcupadosSeleccionado
Flujo de compra
1-Elegís el horario
Con el resumen del viaje arriba y una pestaña para la ida y otra para la vuelta.
2-Elegís el asiento
Libres, ocupados y seleccionado, cada uno con su color.
3-Completás tus datos
Un formulario corto, con el resumen de lo elegido siempre arriba.
4-Confirmás y pagás
El total desglosado antes de tocar “Pagar”.
CITA — Rediseño web
Tu forma más simple de
buscar, reservar y viajar