Rediseño 360° de plataforma de reservas turísticas para el mayor turoperador de alojamientos en Cuba · Feb 2024 – presente
FEB 2024
Inicio del proyecto · en curso hacia lanzamiento
4 ROLES
UX · UI · IxD supervisor · QA-UX
PRIME VUE→ DS
UIKit extendido hasta Design System propio
LIBERTAD TOTAL
Decisiones de diseño y producto 100% propias
Mi rol en el proyecto
- UX Lead
- UI Design
- IxD · Diseño de interacción
- QA-UX
- Design System
- Influencia de PO
Fui el único responsable de UX/UI del proyecto desde la arquitectura de información hasta la supervisión del diseño de interacción y el aseguramiento de calidad desde la perspectiva del usuario. A diferencia de otros proyectos, aquí el equipo —con bajo nivel de madurez UX— confió plenamente en mis decisiones y me dio libertad para dirigir mi área casi en su totalidad, llegando a participar con influencia de Product Owner en la toma de decisiones de producto.
Lo que hace único este proyecto
No fue solo diseñar pantallas. Fue transformar un producto arcaico en una plataforma orientada 100% a ventas y resultados, en un equipo que no tenía cultura UX establecida, con libertad para construir desde cero: mapa mental, arquitectura de información, Design System completo, patrones de interacción y supervisión de implementación.
El Problema
Travelnet es una agencia de viajes con sede en La Habana y filiales en las principales zonas turísticas de Cuba. Su plataforma digital existente era un producto arcaico con contenidos desactualizados, arquitectura de navegación deficiente y problemas críticos de usabilidad y accesibilidad. No estaba orientada a conversión — era un catálogo digital sin flujo de venta.
El objetivo no era solo modernizar la interfaz. Era hacer un giro de 360° al negocio digital: convertir un sitio informativo en una plataforma de reservas que compitiera en el mercado turístico internacional, con un sistema escalable que el equipo de desarrollo pudiera mantener de forma autónoma.
Proceso — desde la estructura hasta la interacción
1-Mapa mental — ordenar el proyecto antes de diseñar
Brief | Mental map | Alineación de equipo | Definición de alcance
El punto de partida no fue un wireframe — fue un mapa mental. Usé esta herramienta para estructurar todos los aspectos clave del rediseño: arquitectura de información, usabilidad, accesibilidad, flujos de usuario y diseño de interfaz. Con el mapa mental también alineé al equipo: al tener una representación visual compartida, fue posible debatir, aportar y tomar decisiones de producto de forma colectiva incluso con un equipo de bajo nivel de madurez UX.
2-Mapa conceptual / cognitivo — entender cómo piensa el usuario
Mapa conceptual | Análisis de flujo de reserva | Identificación de puntos de abandono
Diseñé un mapa conceptual para visualizar los patrones de pensamiento, comportamientos y necesidades de los viajeros que usan plataformas de reservas. Este mapa me permitió identificar las conexiones entre los factores que influyen en la decisión de reserva — confianza en la marca, facilidad de uso, transparencia de precios, seguridad percibida — y los puntos críticos donde los usuarios abandonaban el flujo.
3-Arquitectura de información — estructura antes que estética
Information architecture | Jerarquía de contenidos| Navegación por secciones
Desde la arquitectura de información definí la jerarquía de contenidos, la navegación principal y la lógica de secciones del sitio. Este fue el entregable fundacional del proyecto: todas las decisiones de UI posteriores nacieron de esta estructura. Sin IA sólida, un sitio de reservas turísticas con múltiples productos (alojamientos, tours, excursiones) se convierte en un laberinto.
4-Wireframes de baja fidelidad — validar estructura antes de invertir en UI
Lo-fi wireframes | Validación con stakeholder | Iteración de estructura
Diseñé wireframes lo-fi para las secciones críticas antes de avanzar a alta fidelidad. El objetivo fue validar la arquitectura de información con el equipo y el stakeholder sin el ruido visual del color y la tipografía. Los wireframes de alojamientos y tours fueron los más iterados — son los flujos con mayor impacto en la tasa de conversión.
Diseño de interfaces — decisiones orientadas a conversión
5-Home — central de reservas con propuesta de valor clara
Diseñé el home con una sección hero con propuesta de valor visible y una central de reservas con tabs diferenciadas por producto: tours, alojamientos y excursiones. Cada tab permite búsquedas rápidas sin salir de la página principal. Completé el home con tours recomendados, destinos populares, ofertas especiales y testimonios — una arquitectura de conversión pensada para reducir el tiempo desde la llegada hasta la intención de reserva.
6-Resultados y detalle de hotel — filtros avanzados y mapa interactivo
La página de resultados incluye filtros avanzados por precio, estrellas, comodidades y ubicación. El detalle de hotel integra galería de imágenes, descripción, servicios y un mapa interactivo con puntos de interés cercanos — un estándar en plataformas de reservas globales como Booking.com que aquí se implementó por primera vez en la plataforma.
7-Flujo de reserva paso a paso — diseñado para maximizar conversión
Diseñé el flujo completo de reserva: selección de habitación → datos personales → opciones de pago → confirmación. Cada paso tiene un indicador de progreso claro y validaciones en tiempo real. El objetivo fue reducir la fricción al mínimo en el momento de mayor intención de compra.
8-Diagrama de flujo del CRS — sistema central de reservas
Diseñé el user flow completo del Sistema Central de Reservas (CRS) para alojamientos, incluyendo el caso especial de reserva con menores de edad y límites de edades. Este entregable sirvió como contrato visual entre diseño y desarrollo: cualquier desviación en la implementación era detectable contra el diagrama original.
9-Diseño responsivo — optimizado para mobile
Adapté todos los componentes críticos para pantallas pequeñas: calendarios, filtros de búsqueda, cards y formularios. El turismo es uno de los sectores con mayor tráfico mobile — un flujo de reserva que no funciona en smartphone pierde conversiones directamente.
Design System — de UIKit a sistema propio
De Prime Vue a Design System completo
Partí del UIKit de Prime Vue y lo extendí hasta convertirlo en un Design System propio con patrones de diseño documentados, componentes enriquecidos y comportamientos de interacción definidos. Este sistema fue la base que permitió al equipo de desarrollo implementar con consistencia y al equipo de diseño escalar sin deuda visual.
Definí cinco patrones de diseño críticos que ningún producto digital de reservas puede ignorar. Cada uno fue documentado con variantes, estados y guías de uso para desarrollo:
Patrón 01: Manejo de errores
Errores de validación, errores de sistema y errores de conexión con mensajes contextuales y acciones de recuperación claras. Ningún error deja al usuario sin una salida.
Patrón 02: Reducción de los tiempos de latencia
Estados de carga diferenciados según el tipo de espera: skeleton screens para contenido, spinners para acciones puntuales. Crítico en una plataforma de reservas con consultas a sistemas externos.
Patrón 03: Loadings
Tipología completa de estados de carga con variantes por contexto. Elimina la incertidumbre del usuario durante esperas del sistema y estandariza la implementación para desarrollo.
Patrón 04: Dialogs
Variantes de diálogos modales para confirmaciones, alertas, formularios en overlay y mensajes críticos. Cada variante tiene comportamiento de cierre y acciones primarias/secundarias documentadas.
Patrón 05: Notificaciones
Sistema de notificaciones con variantes informativas, de éxito, advertencia y error. Posicionamiento, duración y comportamiento de cierre estandarizados para toda la plataforma.
Por qué estos patrones importan más allá del diseño
Estos cinco patrones no solo mejoraron la experiencia del usuario — también fueron la herramienta de comunicación entre diseño, desarrollo, PO y SM. Al estandarizar cómo se ven y se comportan los estados críticos del sistema, redujimos el tiempo de desarrollo, eliminamos ambigüedades en los sprints y dimos al equipo un lenguaje común para discutir el producto.
QA-UX — supervisión de la implementación
Además del diseño, asumí el rol de QA-UX durante la implementación: revisé que los componentes desarrollados respetaran los patrones documentados, que los flujos de interacción coincidieran con los diseños aprobados y que la experiencia final en navegador fuera coherente con la intención de diseño. Este rol es poco común en equipos de bajo nivel de madurez UX — y fue el que garantizó que el trabajo de diseño no se perdiera en la implementación.
Antes vs. después
Travelnet Cuba – Antes
- Diseño anticuado y sobrecargado
- Navegación confusa sin jerarquía
- Sin flujo de reserva estructurado
- Producto informativo, no de ventas
- Sin Design System ni patrones
Travelnet Cuba – Después
- Interfaz moderna orientada a conversión
- Arquitectura de información clara
- Flujo de reserva paso a paso optimizado
- Central de reservas con 3 productos integrados
- Design System con 5 patrones documentados
Este before/after no es solo estético — es el resultado de una transformación de negocio. La plataforma anterior no podía vender. La nueva fue diseñada desde el primer mapa mental para convertir visitas en reservas.
Estado actual y resultados esperados
Proyecto en curso · próximo lanzamiento
El proyecto comenzó en febrero de 2024 y está próximo a lanzarse. Los resultados de negocio — conversión, reservas, retención — se concretarán post-lanzamiento. Lo que sí está entregado: arquitectura de información, sistema de diseño completo, patrones de interacción documentados, flujos de reserva validados y supervisión de implementación finalizada.
Lo que demuestra este proyecto
Que sé liderar el diseño de un producto complejo de principio a fin, en un equipo sin cultura UX establecida, con libertad para tomar decisiones de producto y diseño. Que puedo construir un Design System desde un UIKit existente sin empezar de cero. Que entiendo el negocio detrás del diseño — este no es un rediseño estético, es una estrategia de ventas construida desde la experiencia de usuario. Y que el rol de QA-UX es parte de mi responsabilidad, no una tarea separada.