Sliceinn
Sliceinn es una startup del sector hostelero que redefine el concepto de vida en comunidad en entornos urbanos, ofreciendo una mezcla perfecta entre confort del hogar y conexión comunitaria.
Diseñado por expertos en hostelería y arquitectura, este proyecto único responde a la tendencia creciente de las "workcations" y "staycations", integrando espacios de vida de lujo dentro de barrios residenciales cotidianos. SliceInn está pensado para ofrecer una auténtica porción de vida: desde habitaciones de diseño personalizadas que funcionan también como espacios de trabajo eficientes, hasta zonas comunes donde compartir historias y comidas.
Aumento de la conversión de clientes potenciales
Propiedades en India
Ocupación
EL RETO
SliceInn nos contactó inicialmente solo para hacer algunos ajustes de diseño en su web existente en Wix. Sin embargo, a medida que avanzábamos con esos ajustes, nos dimos cuenta de que Wix no ofrecía las funcionalidades necesarias para implementar esos elementos de diseño. Wix tampoco permitía código personalizado avanzado para funcionalidades más complejas. Así que propusimos migrar a Webflow, y el equipo de SliceInn aceptó.
SliceInn no solo tenía un diseño por debajo del estándar, sino también una experiencia de usuario deficiente. Tampoco podían competir con sus competidores del sector hostelero porque carecían de filtros de reserva y funcionalidades clave.
Su web existente estaba mal optimizada y sufría de bajo rendimiento y tiempos de carga lentos. Wix tampoco ofrecía funciones de CMS potentes, así que la web ni siquiera tenía un slider de propiedades conectado al CMS.
Una vez decidida la migración a Webflow, tuvimos que empezar de cero tanto en diseño como en desarrollo para construir una UI y UX que estuviera a la altura.
LA SOLUCIÓN
Nuestra inspiración para el diseño y el desarrollo vino de referentes del sector como Airbnb, Coliving y Stanza Living.
Ya contábamos con las guías de marca, así que el rediseño se centró en reflejar la propuesta de la marca añadiendo una estética premium y lujosa.
Además de resolver la falta de filtros de propiedad avanzados, también nos pidieron integrar un mapa en la web con una función de calculadora de distancia en tiempo real. Era una funcionalidad compleja de ejecutar y no teníamos ninguna referencia previa, pero logramos implementarla gracias a una investigación exhaustiva.
Aquí tienes un resumen de la transformación de SliceInn:
Diseño deficiente, lo que mantiene a SliceInn por detrás de la competencia
Un diseño minimalista con una estética de primera calidad, centrado en una experiencia de usuario más fluida.
Tiempos de carga lentos debido a una mala optimización de la plataforma.
Cambia de WIX a Webflow para disfrutar de funcionalidades avanzadas. Un desarrollo limpio que garantiza un alto rendimiento y tiempos de carga rápidos.
Opciones de filtrado limitadas, sin funciones de cálculo de distancia.
Múltiples filtros avanzados en todo el sitio Función única que muestra la distancia desde la ubicación del usuario hasta las propiedades.
La actualización del estado de la propiedad y la habitación resultaba engorrosa y difícil de administrar.
Estructura de CMS optimizada y bien definida que es fácil de administrar. Actualizaciones automatizadas del estado de las propiedades en tiempo real desde el motor de reservas.
Opciones de filtrado limitadas, sin funciones de cálculo de distancia.
Experiencia de usuario completamente renovada y optimizada para la conversión sin comprometer las clasificaciones de SEO.
Interfaz de usuario intuitiva que conecta y convierte
El sitio web rediseñado de SliceInn ahora destaca de manera efectiva las principales características y beneficios de elegir Slice Inn para hospedarse.
Todo lo que un usuario necesita buscar está visible a primera vista en el sitio web. La sección Hero muestra los campos de búsqueda: «Qué, dónde y cuándo» para ayudar al usuario a identificar rápidamente los términos de búsqueda.
La barra de búsqueda también permite navegar entre «City stay» y «Vacationscapes», de modo que los usuarios pueden ver rápidamente las propiedades en función de si desean cambiar de aires dentro de la ciudad o hacer una escapada de vacaciones.
En segundo plano, la sección de héroes muestra un recorrido en vídeo de alta resolución por una propiedad, que cambia según la selección del usuario de «estancia urbana» o «escapada vacacional».
Todas las secciones del sitio web están ubicadas estratégicamente para mejorar el flujo de usuarios y garantizar que, tan pronto como los visitantes lleguen al sitio, reciban motivos de peso para elegir Slice Inn.
MAPA INTEGRADO Y CALCULADORA DE DISTANCIA
SliceInn quería que integráramos un mapa en la web que no solo mostrara cada propiedad, sino también la distancia desde una ubicación elegida por el usuario en tiempo real.
Esta funcionalidad ni siquiera se encuentra en las webs de gigantes del sector como Airbnb o Coliving. Por eso SliceInn no estaba seguro de si sería posible implementarla.
Esta única función permitió a cada usuario completar su búsqueda de propiedad sin salir de la web.
Tuvimos que investigar mucho para descubrir cómo implementar esta funcionalidad compleja, pero finalmente la construimos.
El reto y los requisitos SliceInn necesitaba un sistema donde, en cuanto un usuario introdujera una ubicación, el mapa sugiriera propiedades cercanas y mostrara la distancia a cada una al pasar el cursor. Además, los usuarios debían poder obtener indicaciones a cualquier propiedad con la ruta precargada en Google Maps.
Nuestra solución
- Desarrollo de mapa interactivo: usando Leaflet, una herramienta de mapas de código abierto, creamos un mapa interactivo que muestra dinámicamente las propiedades usando datos de OpenStreetMap, para una experiencia visual rica.
- Integración de datos de propiedad: la latitud y longitud de cada propiedad se extrajeron del CMS y se representaron en el mapa con marcadores personalizados, incluyendo pop-ups interactivos con los detalles de la propiedad al pasar el cursor.
- Búsqueda con autocompletado: integramos la API de Google Maps Places Autocomplete en el campo de búsqueda para que el usuario vea sugerencias de lugares mientras escribe, apoyada por la API de Google Maps Geocoding para localizar con precisión la zona buscada.
- Cálculo de distancia en tiempo real: la distancia entre la ubicación buscada y cada propiedad se calcula con la API de Google Maps Distance Matrix, mostrando el resultado al instante al pasar el cursor sobre cada propiedad.
- Indicaciones y visualización de ruta: para quienes quieran indicaciones detalladas, al hacer clic en una propiedad se les lleva a Google Maps con la ruta ya cargada, usando el plugin de enrutamiento.
Esta avanzada funcionalidad de mapas no solo diferenció a SliceInn de su competencia, sino que también mejoró el engagement al hacer que el proceso de selección de propiedad fuera más interactivo e informativo.
DE UN CMS LIMITADO A UN CMS SIN LÍMITES
Elegir Webflow para el CMS fue una parte clave de la transformación digital de SliceInn. La interfaz de diseño intuitiva y el robusto CMS de Webflow permiten que incluso los miembros no técnicos del equipo de Slice Inn gestionen y actualicen el contenido con facilidad.
También integramos el CMS de Webflow con la API del motor de reservas para importar datos en tiempo real directamente a la web, garantizando que los detalles de las propiedades sean siempre precisos.
Ya sea disponibilidad de habitaciones, cambios de precios o nuevas comodidades, la información se actualiza automáticamente en el CMS, eliminando la necesidad de introducir datos manualmente.
Así, desde añadir nuevas propiedades hasta actualizar la disponibilidad de habitaciones, el proceso es sencillo.
Esto no solo mejora la eficiencia operativa, sino que también garantiza que los huéspedes reciban la información más fiable a la hora de reservar.
Priorizamos experiencias de usuario fluidas en todos los dispositivos aplicando principios de diseño responsive. Al garantizar que la web se adapta con fluidez a distintos tamaños y orientaciones de pantalla móviles, tablets y ordenadores de escritorio, aseguramos accesibilidad y usabilidad para todos los usuarios.
Siguiente caso práctico
ShopBox
Creemos juntos algo fuera de serie.
¿Tienes un proyecto en mente? Contáctanos para soluciones expertas de diseño y desarrollo. Hablemos de cómo podemos ayudar a hacer crecer tu negocio.
Hola, soy Divyansh - Fundador de Webyansh. Programa una llamada conmigo para hablar en detalle sobre su proyecto y cómo podemos ayudar a su empresa. También puedes solicite un presupuesto personalizado gratuito si el alcance del trabajo es claro.