Sliceinn
Designed by experts in hospitality and architecture, this unique venture serves the evolving trend of workcations and staycations, embedding luxurious living spaces within everyday residential neighborhoods.
SliceInn 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.
27 +
10cr
95%
Challenge
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 optimised 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.
Here’s an overview of the SliceInn’s transformation-
Intuitive UI that Connects & Converts
The redesigned SliceInn website now effectively highlights key features and benefits of choosing Slice Inn for stays.
Everything a user needs to search is visible at first glance on the website. The Hero Section gives the search fields- “What, where and when” to help the user quickly identify the search terms.
The search bar also provides navigation between “City stay” and “Vacationscapes”, so the users can quickly view properties based on whether they want a change of scene within the city or a get away for a vacation.
A high-resolution video tour of a property runs in the background of the hero section, which changes depending upon a user’s selection of “City stay” or “Vacation scape”.
All the sections on the website are strategically placed of sections to improve user flow and ensure that as soon as visitors land on the site, they're greeted with compelling reasons to choose Slice Inn.
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:-
The Challenge and Requirements
SliceInn needed a system where as soon as a user entered a location, the map would suggest nearby properties and display the distance to each property when hovered over. Additionally, users should be able to get directions to any property with the route preloaded on Google Maps.
Our Solution
- 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.
- 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..
- 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.
- 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.
- 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.
From a limited to limitless CMS
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.
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.
Project Serotonin
Contact us
Have a project in mind? Contact us for expert design and development solutions. Let's discuss how we can help grow your business.
