Sliceinn
Sliceinn est une startup du secteur de l'hôtellerie qui réinvente la vie en communauté en milieu urbain, en proposant un mélange harmonieux de confort à domicile et de connexion communautaire.
Conçu par des experts en hôtellerie et en architecture, ce projet unique répond à la tendance croissante des "workcations" et "staycations", en intégrant des espaces de vie luxueux au cœur de quartiers résidentiels classiques. SliceInn a été pensé pour offrir une véritable tranche de vie : des chambres design personnalisées qui font aussi office d'espaces de travail efficaces, et des espaces de restauration communs où se partagent repas et histoires.
Augmentation de la conversion de prospects
Propriétés en Inde
Occupation
LE DÉFI
SliceInn nous a initialement contactés pour de simples retouches de design sur leur site Wix existant. Mais en avançant sur ces modifications, nous avons vite compris que Wix ne proposait pas les fonctionnalités nécessaires pour implémenter ces éléments de design. Wix ne permettait pas non plus l'ajout de code personnalisé conséquent pour des fonctionnalités avancées. Nous avons donc proposé une migration vers Webflow, que l'équipe SliceInn a acceptée.
SliceInn ne souffrait pas seulement d'un design en dessous des standards, mais aussi d'une expérience utilisateur médiocre. La marque ne pouvait pas rivaliser avec ses concurrents du secteur hôtelier faute de filtres de réservation et de fonctionnalités essentielles.
Leur site existant était mal optimisé, avec des performances faibles et des temps de chargement lents. Wix ne proposait pas non plus de fonctionnalités CMS puissantes : le site n'avait même pas de slider de propriétés relié à un CMS.
Une fois la migration vers Webflow actée, nous sommes repartis de zéro, aussi bien sur le design que sur le développement, pour construire une UI et une UX à la hauteur des ambitions de la marque.
LA SOLUTION
Notre inspiration pour le design et le développement est venue de leaders du secteur comme Airbnb, Coliving et Stanza Living.
La charte graphique de la marque était déjà en place : la refonte du design consistait donc à refléter l'offre de la marque tout en y ajoutant une esthétique premium et luxueuse.
Au-delà de l'absence de filtres de propriétés avancés, on nous a également demandé d'intégrer une carte interactive avec un calculateur de distance en temps réel. C'était une fonctionnalité complexe à réaliser, sans aucune référence existante sur le marché, mais nous avons réussi à la livrer grâce à un travail de recherche approfondi.
Voici un aperçu de la transformation de SliceInn :
Design de qualité inférieure, permettant à SliceInn de rester derrière ses concurrents
Un design minimaliste à l'esthétique haut de gamme, axé sur une expérience utilisateur plus fluide.
Temps de chargement lents en raison d'une mauvaise optimisation de la plateforme.
Passez de WIX à Webflow pour bénéficier de fonctionnalités avancées. Développement propre garantissant des performances élevées et des temps de chargement rapides.
Options de filtrage limitées, aucune fonction de calcul de distance.
Plusieurs filtres avancés sur le site Fonctionnalité unique qui indique la distance entre l'emplacement de l'utilisateur et les propriétés.
Maladroite et difficile à gérer, la mise à jour de l'état de la propriété et de la chambre était fastidieuse.
Structure CMS rationalisée et bien définie, facile à gérer. Mises à jour automatisées en temps réel de l'état des propriétés à partir du moteur de réservation.
Options de filtrage limitées, aucune fonction de calcul de distance.
Une expérience utilisateur entièrement remaniée et optimisée pour les conversions sans compromettre le classement SEO.
UNE UI INTUITIVE QUI CONNECTE ET CONVERTIT
Le site SliceInn repensé met désormais efficacement en avant les caractéristiques et avantages clés du séjour chez Slice Inn.
Tout ce dont un utilisateur a besoin pour lancer sa recherche est visible au premier coup d'œil. La section hero propose les champs de recherche "Quoi, où et quand" pour aider l'utilisateur à identifier rapidement ses critères.
La barre de recherche permet également de naviguer entre "Séjour en ville" et "Escapade vacances", pour que les utilisateurs visualisent rapidement les propriétés selon qu'ils cherchent un changement de décor en ville ou une véritable coupure.
Une vidéo de visite en haute résolution d'une propriété défile en arrière-plan de la section hero, et change selon que l'utilisateur sélectionne "Séjour en ville" ou "Escapade vacances".
Toutes les sections du site sont positionnées stratégiquement pour améliorer le parcours utilisateur et s'assurer que dès leur arrivée, les visiteurs sont accueillis par des raisons convaincantes de choisir Slice Inn.
CARTE INTÉGRÉE ET CALCULATEUR DE DISTANCE
SliceInn souhaitait que nous intégrions une carte affichant non seulement chaque propriété, mais aussi la distance en temps réel depuis un lieu choisi par l'utilisateur.
Cette fonctionnalité ne se retrouve même pas sur les sites de géants du secteur comme Airbnb ou Coliving. SliceInn n'était donc pas certain que cela soit réalisable.
Cette fonctionnalité à elle seule a permis à chaque utilisateur de finaliser ses recherches de propriété sans jamais quitter le site.
Il a fallu énormément de recherche pour comprendre comment implémenter cette fonctionnalité complexe, mais nous avons fini par la construire.
Le défi et les besoins SliceInn avait besoin d'un système où, dès qu'un utilisateur saisissait un lieu, la carte suggérait les propriétés à proximité et affichait la distance jusqu'à chacune d'elles au survol. Les utilisateurs devaient aussi pouvoir obtenir un itinéraire vers n'importe quelle propriété, directement préchargé sur Google Maps.
Notre solution
- Développement d'une carte interactive : à l'aide de Leaflet, un outil de cartographie open-source, nous avons créé une carte interactive affichant dynamiquement les propriétés grâce aux données d'OpenStreetMap, pour une expérience visuelle riche.
- Intégration des données de propriété : la latitude et la longitude de chaque propriété ont été extraites du CMS et représentées sur la carte par des marqueurs personnalisés, incluant des pop-ups interactifs affichant les détails au survol.
- Fonction de recherche avec autocomplétion : nous avons intégré l'API Google Maps Places Autocomplete dans le champ de recherche pour permettre à l'utilisateur de voir des suggestions de lieux dès la saisie, complétée par l'API Google Maps Geocoding pour localiser précisément la zone recherchée.
- Calcul de distance en temps réel : la distance entre le lieu recherché et chaque propriété est calculée via l'API Google Maps Distance Matrix, avec un affichage instantané au survol de chaque propriété.
- Itinéraires et visualisation du trajet : pour les utilisateurs souhaitant un itinéraire détaillé, un clic sur une propriété les redirige vers Google Maps avec le trajet déjà chargé, grâce au plugin de routage.
Cette fonctionnalité cartographique avancée a non seulement démarqué SliceInn de ses concurrents, mais a aussi amélioré l'engagement utilisateur en rendant la sélection de propriété plus interactive et informative.
D'UN CMS LIMITÉ À UN CMS SANS LIMITES
Choisir Webflow pour le CMS a été une étape clé de la transformation digitale de SliceInn. L'interface de design intuitive et le CMS robuste de Webflow permettent même aux membres non techniques de l'équipe SliceInn de gérer et mettre à jour facilement le contenu.
Nous avons également intégré le CMS Webflow à l'API du moteur de réservation pour importer des données en temps réel directement sur le site, garantissant que les détails des propriétés soient toujours à jour.
Qu'il s'agisse de la disponibilité des chambres, des changements de tarifs ou de nouveaux équipements, l'information est automatiquement mise à jour dans le CMS, supprimant tout besoin de saisie manuelle.
Ainsi, de l'ajout de nouvelles propriétés à la mise à jour des disponibilités, le processus est simple.
Cela améliore non seulement l'efficacité opérationnelle, mais garantit aussi aux voyageurs de disposer des informations les plus fiables au moment de réserver.
Nous accordons une attention particulière à une expérience utilisateur fluide sur tous les appareils, en appliquant des principes de design responsive. En garantissant que le site s'adapte parfaitement aux différentes tailles et orientations d'écran — mobile, tablette et desktop — nous assurons accessibilité et confort d'usage pour tous les utilisateurs.
Étude de cas suivante
Boîte de magasin
Créons ensemble quelque chose d'exceptionnel.
Vous avez un projet en tête ? Contactez-nous pour des solutions expertes de design et de développement. Discutons de la façon dont nous pouvons faire grandir votre activité.
Bonjour, je suis Divyansh - Fondatrice de Webyansh. Planifiez un appel avec moi pour discuter en détail de votre projet et de la manière dont nous pouvons aider votre entreprise. Vous pouvez également demande de devis personnalisé gratuit si l'étendue des travaux est claire.