Proyectos Rodos Backpackers
Un sitio con la energía de un hostel en Rodas.
Rodos Backpackers es un hostel boutique familiar con departamentos en la isla de Rodas, Grecia. Rediseñamos su sitio con video, reels, galería, reserva directa y siete idiomas.
- Cliente
- Rodos Backpackers Boutique Hostel & Apartments
- Rubro
- Hostel boutique y departamentos en Rodas, Grecia
- Qué hicimos
- Desarrollo, siete idiomas, reserva directa y puesta en producción
El contexto
Rodos Backpackers es un hostel y guest house familiar, a 8 minutos del casco antiguo de Rodas. Ofrece habitaciones compartidas y privadas, cuatro departamentos, un bar con desayuno y un jardín zen. Es uno de nuestros clientes en Europa.
Un viajero suele elegir dónde dormir desde el celular: mira fotos, lee reseñas y compara precios en varias plataformas. El sitio propio es el lugar donde el hostel puede mostrarse como es y recibir la reserva directa.
El desafío
El sitio anterior estaba hecho en WordPress. Al revisarlo encontramos cuatro puntos a resolver.
- Un diseño desactualizado. La estética había quedado vieja y no transmitía cómo es alojarse en el hostel.
- Un sitio lento. Las páginas tardaban en cargar, y eso pesa más en el celular, que es donde se busca alojamiento.
- Sin identidad propia. Nada en el diseño distinguía a Rodos Backpackers de otros alojamientos de la isla.
- Un mensaje poco claro. El sitio no le hablaba de forma directa a su público: mochileros, grupos de amigos y viajeros que trabajan a distancia.
¿Cómo transmite un sitio el clima de un hostel para que alguien que nunca estuvo en Rodas reserve directo con él?
Las decisiones
Antes de diseñar, definimos qué tenía que sentir y hacer un viajero al entrar.
Video primero
El hero y los reels muestran escenas reales del hostel, grabadas por huéspedes y por el equipo.
Un color para cada público
El dorado acompaña al hostel y su vida social. El azul del Egeo acompaña a los departamentos, pensados para descansar.
La reserva siempre a mano
El botón de reserva está en el menú, en el hero y al final de la página, y abre el motor del hostel con las fechas elegidas.
El sitio, en movimiento.
Un recorrido por la home en una pantalla de escritorio.
Qué hicimos, sección por sección.
Un hero que se siente como llegar
La home abre con un video del hostel a pantalla completa. Encima corre una cinta inclinada con lo que ofrece: dorms, privados, departamentos, el casco antiguo y el jardín zen.
Abajo a la derecha gira una insignia con la leyenda “Best price, book direct”, que lleva directo a la reserva. Más abajo, cinco motivos para elegir el hostel, del Wi-Fi para nómadas digitales a las actividades de día y de noche.
Reels, como en Instagram
Un carrusel muestra seis reels de la cuenta @rodosbackpackers, con sus vistas: excursiones, playas, paseos en barco, comidas, salidas de noche y atardeceres. Se reproducen solos y sin sonido, y al pasar el mouse aparecen corazones.
Los videos originales pesaban 65 MB. Los comprimimos a menos de 6 MB en total, para que el carrusel cargue rápido también con datos móviles.
Las reseñas, a la vista
Antes de reservar directo, un viajero quiere saber qué opinan otros huéspedes. El sitio muestra los puntajes de las cuatro plataformas donde el hostel tiene reseñas: Hostelworld, Booking.com, Tripadvisor y Google.
Galería y departamentos
La galería del hostel se recorre arrastrando, y cada foto se abre en un visor a pantalla completa. Muestra el patio, el bar y las habitaciones.
Los cuatro departamentos, Zeus, Gaia, Penelope y Aphrodite's, aparecen como pilas de fotos polaroid. Al pasar el mouse las fotos se abren en abanico, y con un clic se ve la galería completa de cada uno, con 37 fotos en total.
Reserva directa
Al final de la home, un buscador pide la fecha de llegada, la de salida y la cantidad de huéspedes. Al confirmar, abre Beds24, el motor de reservas del hostel, con la búsqueda ya cargada.
Así el viajero ve la disponibilidad real sin volver a escribir sus datos, y el hostel recibe la reserva sin intermediarios como Booking.com o Hostelworld.
Siete idiomas
El sitio está en inglés, español, italiano, alemán, finés, griego y ruso. Cada idioma tiene su propia dirección, y Google muestra a cada persona la versión en su idioma.
Si el navegador del visitante está en otro idioma de la lista, un aviso le ofrece cambiar. Si dice que no, el sitio no vuelve a preguntar.
Pensado para el celular
En el teléfono, los reels se deslizan con el dedo como en Instagram, y los departamentos se apilan uno debajo del otro. El buscador de reservas ocupa todo el ancho, con botones grandes para elegir fechas y huéspedes.
El stack
Construimos el sitio con Next.js y React, en TypeScript, con estilos en Tailwind CSS. Las animaciones usan Framer Motion, el scroll suave usa Lenis y los idiomas se manejan con next-intl. La tipografía Montserrat se aloja en el propio servidor.
El sitio corre en el servidor del hostel. Nginx entrega las imágenes y los videos directo desde el disco, y Node.js, con PM2, arma las páginas.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Node.js
- Nginx
- Framer Motion
- Lenis
- next-intl
- Beds24
- PM2
100 en Lighthouse, en los cuatro ítems
Lighthouse es la herramienta de Google que mide la calidad técnica de un sitio. Rodos Backpackers obtuvo 100 en Rendimiento, Accesibilidad, Buenas prácticas y SEO, aun con video en el hero y seis reels en la home.
Lo logramos con imágenes en formato WebP, videos comprimidos, archivos estáticos servidos por Nginx y páginas que Next.js genera de antemano para cada idioma.
Lighthouse backpackers.com.gr
Listo para Google
Cada página incluye los datos del hostel (nombre, dirección y teléfono) en el formato que leen los buscadores, y el mapa del sitio lista las versiones en cada idioma.
Las mismas direcciones
La política de privacidad del sitio anterior redirige a la nueva, para no perder los enlaces que ya circulaban.
Resultados
Este caso todavía no incluye datos de reservas. Cuando el hostel los comparta, los vamos a sumar.
Lo que aprendimos
- En turismo, el video vende el lugar. Las escenas reales de huéspedes muestran el clima del hostel mejor que cualquier descripción.
- Las reseñas de otros sitios generan confianza en el propio. Ver los puntajes de Hostelworld, Booking.com, Tripadvisor y Google le da al viajero la prueba que busca antes de reservar directo.
- Un sitio con mucho video también puede ser rápido. Comprimir cada reel y servir los archivos estáticos desde Nginx mantiene la carga liviana.
- Cada viajero lee mejor en su idioma. Con siete idiomas y un aviso según el navegador, cada visitante encuentra su versión desde la primera página.
