Sliceinn
Slice Inn es una empresa emergente en el sector de la hospitalidad que redefine el concepto de vida comunitaria en entornos urbanos, ofreciendo una combinación perfecta de confort hogareño y conexión con la comunidad.
Diseñada por expertos en hospitalidad y arquitectura, esta empresa única responde a la tendencia en evolución de las vacaciones de trabajo y estancia, integrando lujosos espacios habitables en los barrios residenciales cotidianos.
SliceInn está diseñado para brindar un toque de vida, desde habitaciones de diseño personalizadas que también funcionan como espacios de trabajo eficientes, hasta comedores comunes donde se comparten historias y comidas.
Aumento de la conversión de clientes potenciales
Propiedades en India
Ocupación
Desafío
SliceInn se puso en contacto con nosotros solo para realizar algunas modificaciones de diseño en su sitio web Wix existente. Sin embargo, a medida que avanzamos con las modificaciones, nos dimos cuenta de que Wix no ofrecía las funcionalidades necesarias para implementar dichos elementos de diseño. Además, Wix no permitía usar código personalizado pesado para las funcionalidades avanzadas. Por lo tanto, propusimos migrar a Webflow y el equipo de SliceInn estuvo de acuerdo.
SliceInn no solo se enfrentaba a un diseño deficiente, sino también a una mala experiencia de usuario. Tampoco podían competir con sus competidores en el sector de la hostelería, ya que carecían de importantes filtros y funcionalidades de reserva.
Su sitio web actual estaba mal optimizado y tenía problemas con un rendimiento deficiente y tiempos de carga lentos. Wix tampoco ofrecía ninguna función potente de CMS. Por lo tanto, el sitio web ni siquiera tenía un control deslizante de propiedades vinculado a un CMS.
En general, una vez finalizada la migración a Webflow, tuvimos que empezar desde cero en términos de diseño y desarrollo para crear una interfaz de usuario y una experiencia de usuario atractivas.
Solución
Nuestra inspiración tanto para el diseño como para el desarrollo provino de líderes de la industria como Airbnb, Coliving y Stanza Living.
Ya teníamos las directrices de marca establecidas, por lo que la renovación del diseño consistía en reflejar la oferta de la marca y añadir una estética lujosa y de primera calidad.
Además de abordar la falta de filtros de propiedad extensos, también nos pidieron que integráramos un mapa in situ con una función de calculadora de distancias. Era una función compleja de ejecutar y no teníamos ninguna referencia, pero aun así logramos llevarla a cabo tras una investigación exhaustiva.
He aquí 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.
Calculadora de mapas y distancias in situ
SliceInn quería que integráramos un mapa en el sitio web que no solo mostrara cada propiedad, sino que también mostrara la distancia desde una ubicación seleccionada por el usuario en tiempo real.
Esta funcionalidad ni siquiera se encuentra en los sitios web de gigantes de la industria como Airbnb o Coliving. Por lo tanto, SliceInn ni siquiera estaba seguro de si podría implementarse o no.
Esta característica única permitía a todos los usuarios completar su búsqueda de propiedades sin salir del sitio web.
Tuvimos que investigar mucho y averiguar cómo podíamos implementar esta compleja funcionalidad, pero al final la construimos.
Esta es una descripción detallada del proceso que se llevó a cabo detrás de esta función: -
El desafío y los requisitos
SliceInn necesitaba un sistema en el que, tan pronto como un usuario ingresara una ubicación, el mapa sugiriera propiedades cercanas y mostrara la distancia a cada propiedad cuando pasaba el cursor sobre ella. Además, los usuarios deberían poder obtener indicaciones para llegar a cualquier propiedad con la ruta precargada en Google Maps.
Nuestra solución
- Desarrollo de mapas interactivos:
Con Leaflet, una herramienta de mapeo de código abierto, creamos un mapa interactivo que muestra dinámicamente las propiedades utilizando 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. Estos marcadores incluían elementos interactivos, como ventanas emergentes que mostraban los detalles de la propiedad al pasar el ratón sobre ellos.
- Funcionalidad de búsqueda con autocompletar:
Hemos integrado la API Places Autocomplete de Google Maps en el campo de búsqueda para que los usuarios puedan empezar a escribir una ubicación y ver los lugares sugeridos de forma dinámica. Esta función era compatible con la API de geocodificación de Google Maps para localizar con precisión el área buscada.
- Cálculo de distancia en tiempo real:
La distancia entre la ubicación buscada y cada propiedad se calculó mediante la API Distance Matrix de Google Maps. Los resultados se mostraban al instante cuando el usuario pasaba el ratón por encima de las diferentes propiedades, lo que ofrecía una experiencia de usuario perfecta.
- Visualización de direcciones y rutas:
Para los usuarios que querían indicaciones detalladas, implementamos una función en la que, al hacer clic en una propiedad, accederían a Google Maps, con la ruta desde su ubicación hasta la propiedad ya cargada, mediante el complemento de máquina de enrutamiento.
Esta funcionalidad avanzada de mapeo no solo diferenció a SliceInn de sus competidores, sino que también mejoró la participación de los usuarios al hacer que el proceso de selección de propiedades fuera más interactivo e informativo.
De un CMS limitado a uno ilimitado
La elección de Webflow para el CMS fue una parte importante de la transformación digital de SliceInn. La interfaz de diseño intuitivo y el sólido CMS de Webflow permiten a los miembros del equipo de Slice Inn que no tienen conocimientos técnicos gestionar y actualizar el contenido fácilmente.
También integramos el CMS Webflow con la API del motor de reservas para extraer datos en tiempo real directamente en el sitio web, garantizando que los detalles de la propiedad sean siempre precisos.
Ya sea que se trate de disponibilidad de habitaciones, cambios en los precios o nuevos servicios, la información se actualiza automáticamente en el CMS, lo que elimina la necesidad de introducir datos manualmente.
Por lo tanto, desde agregar 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 al hacer sus reservas.
Priorizamos las experiencias de usuario fluidas en todos los dispositivos mediante la implementación de principios de diseño responsivo. Al garantizar que el sitio web se adapte con fluidez a los distintos tamaños y orientaciones de pantalla, incluidos los dispositivos móviles, las tabletas y las computadoras de escritorio, garantizamos la accesibilidad y la usabilidad para todos los usuarios.
Siguiente caso práctico
ShopBox
Vamos a crear algo fuera de este mundo juntos.
¿Tienes un proyecto en mente? Póngase en contacto con nosotros para obtener soluciones expertas de diseño y desarrollo. Analicemos cómo podemos ayudarle a hacer crecer su 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.