Sliceinn
Sliceinn serves the evolving trend of workcations and staycations, embedding luxurious living spaces within everyday residential neighborhoods.
Slice Inn is crafted to provide a slice of life, from personalized designer rooms that double as efficient workspaces, to communal dining areas where stories and meals are shared.
Project Overview
SliceInn reached out to us only for some design edits on their existing Wix website. However, as we went along with the edits, we realised that Wix did not offer the functionalities needed to implement such design elements. Also, Wix did not allow heavy custom code for advanced functionalities. So, we proposed migrating to Webflow and the SliceInn team agreed.
SliceInn was not just facing a substandard design but also poor user experience. They were also unable to compete with their competitors in the hospitality industry as they lacked important booking filters and functionalities.
Their existing website was poorly optimized and struggled with poor performance and slow loading times. Wix also did not offer any powerful CMS features. So, the website did not even have a CMS-linked property slider.
Overall, once the migration to Webflow was final, we had to start from scratch in terms of both the design and development to build a compelling UI and UX.
Solution
Our inspiration for both the design and development came from industry leaders such as Airbnb, Coliving and Stanza Living.
We already had the branding guidelines in place, so the design revamp was all about reflecting the brand’s offer and adding a premium and luxurious aesthetic.
Apart from addressing the lack of extensive property filters, we were also asked to integrate an on-site map with a distance calculator functionality. It was a complex feature to execute and we did not have any references, but we still managed to pull it off with extensive research.
Got a Project? Let’s Talk
Realtime Property Status Updates
Choosing Webflow for the CMS was an important part of SliceInn’s digital transformation. Webflow’s intuitive design interface and robust CMS allow even non-technical team members at Slice Inn to easily manage and update content.
We also integrated the Webflow CMS with the booking engine API to pull real-time data directly into the website, ensuring that property details are always accurate.
Whether it's room availability, pricing changes, or new amenities, the information is automatically updated in the CMS, eliminating the need for manual data entry.So, from adding new properties to updating room availability, the process is straightforward.
This not only improves operational efficiency but also guarantees that guests receive the most reliable information when making their bookings.
Onsite Map and Distance Calculator
SliceInn wanted us to integrate a map on the website that not only displayed each property but also showed the distance from a user-selected location in real time.
This functionality is not even found on websites of industry giants like Airbnb or Coliving. Hence, the SliceInn was not even sure whether it could be implemented or not.
This single feature allowed every user to complete their property research without leaving the website.
We had to research a lot and figure out how we could implement this complex functionality, but eventually, we built it.
Here’s a detailed description of the process that went behind this feature-
Our solution for dynamic map
1. Interactive Map Development:
Using Leaflet, an open-source mapping tool, we created an interactive map that dynamically displays properties using data from OpenStreetMap for a rich visual experience.
2. Property Data Integration:
Each property's latitude and longitude were extracted from the CMS and represented on the map with custom markers. These markers included interactive elements such as pop-ups that displayed property details on hover.
3. Search Functionality with Autocomplete:
We integrated Google Maps’ Places Autocomplete API in the search field to allow users to begin typing a location and see suggested places dynamically. This feature was supported by Google Maps Geocoding API to precisely locate the searched area.
4. Real-time Distance Calculation:
The distance between the searched location and each property was calculated using Google Maps Distance Matrix API. The results were displayed instantly as the user hovered over different properties, providing a seamless user experience.
5. Directions and Route Visualization:
For users who wanted detailed directions, we implemented a feature where clicking on a property would take them to Google Maps, with the route from their location to the property already loaded, using the routing machine plugin.
This advanced mapping functionality not only differentiated SliceInn from its competitors but also improved user engagement by making the property selection process more interactive and informative.
We prioritize seamless user experiences across all devices by implementing responsive design principles. By ensuring that the website adapts fluidly to various screen sizes and orientations, including mobile devices, tablets, and desktops, we guarantee accessibility and usability for all users.
Serotonin Labs
