Shared Holiday Homes
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (winter term 2021/22).
Abstract
Our aim is to provide each person access to vacation in their own vacation home without having to give up changing destinations! That was our setted aim for starting the project. With a quick and simple search or just a quick look at our recommendations we would like to connect owners and potential shareholders to split up costs and raise the usage of a property.
Introduction
Many people are looking for their own holiday home, a real home away from
home. On the other hand, they struggle to finance a second home for holidays and/or they do not want to spend the rest of their lives in the same holiday
destination. This is the reason why we created Shared Holiday Homes: We want to offer everyone access to holidays in their own holiday home without having to give up changing destinations. The concept of our website is to offer houses in several countries and regions. The potential buyer can preselect the destination and the budget. The selected houses give detailed information of the location, the size, how many shares are available and for what price. If the user browses through the results and details of the houses and chooses one, the user can contact Shared Holiday Homes via an email and express their interest to buy a share of the house. In the future, more features can be added to the website: sellers can upload and offer their houses through a form; questions and legal advises for sellers and buyers can be offered; and the website is also intended to serve as a platform, where the different homeowners can communicate e.g. with a booking platform to coordinate the holidays between the shared houses.
Methodology
For the successful implementation of our project, we first considered the goal of the website we wanted to create within this project. Since the goal is for potential buyers to find holiday homes at a certain budget and in a certain location, the primary goal is a functioning search and a detailed view of the holiday homes.
In a second step we defined which tools and skills we needed to implement the project. For this, we decided to divide our team of 6 people into three groups of two each (two people for UI/UX, two for frontend and two for backend). The small groups always had a time frame of one week to implement the goals we had set in our weekly team meeting. For communication and project management we used different messengers, Slack, Notion and Zoom.
Our starting point was that the UI/UX team should create design mockups via Figma so that we could simultaneously simulate the user journey and also have a “coding template” for the frontend team. The mockups ranged from the basic structure of the individual web pages of the project, to the colours for different applications and functions, to click dummies. Especially, the click dummies allowed us to derive different user journeys, so that we could add more functionalities to our project.
At the same time, the front- and backend team created a repository on GitHub, which was responsible for our version management, and familiarised themselves with their tools. VS Code and the GitHub Desktop were used for the development environment. The tech stack of the frontend team consisted of HTML, CSS, Javascript and React with Bootstrap. For the backend team, node.js and MongoDB were added.
Based on the design mockup, the frontend team constructed page by page by dividing the individual pages into their components and implementing them according to prioritised functionality, as recommended by “thinking in react”.
In order to have the first data available, the backend team first created mockup data of holiday homes.
The (mockup) holiday home data includes the number of total units, the number of available units, the number of rooms and bathrooms, the square metres, the location of the holiday home incl. geo-data for localisation via Google Maps, as well as pictures and special features of the property and a short description. Using a schema defined by the backend team, sample data sets of holiday homes were then generated in MongoDB.
Finally, the client and server were brought together by programming an interface to transfer the user queries from the search bar of the website to the server and to generate the corresponding results.
Results of the project
To achieve this, the design of the navigation is basic and uses all the codes of a flexible and digestible architecture for the user with a menu bar as global navigation. Any more specific content corresponds to local navigation. The so-called “hierarchical” architecture is particularly appropriate for sites with a large volume and a desktop resolution. This is a good thing, as it meets our requirements.
The principle is as follows. Without having to be logged in beforehand, everything starts from the home page where the user enters his budget and his search location, Pic 1. The frontend data is sent to the backend allowing to filter the MongoDB database and to return the essential categories of the property on the search results page. Note that the color palette used — anthracite and coral — differs from real estate sites that traditionally have bluish tones as well as competing sites such as Pacaso or Myne-Homes.
If these were the only filters, it wouldn’t be fun. Hence the possibility of filtering by feature, either one or several at a time, Pic 2. A classification by ascending or descending order of the price per share, the number of shares available, the number of rooms and the size of the property in addition to a classification by alphabetical order of the city is possible. However, this is not cumulative so that the user does not tear his hair out and go to a competing site.
An element is held on a frame whose content is articulated around an image, a place, a tempting title (it is necessary), data relating to the living space and those relating to the share price, Pic 3.
As it is possible to see Pic. 4, clicking on one of the entities allows access to more information about the property, with more images, a Google Maps and a more extensive description of what awaits our potential investor. So it is only when our target is looking to connect to the property that an account is required. We must always caress in the direction of the hair.
What about making an offer? The process can be started without being connected, by entering the number of rooms and the location of the property. Then, authentication is necessary to fill in all the information that has already been shown from the investor’s point of view in addition to the bank data.
Dear reader, the whole process described above can be played on Figma through the following link:
The content is dynamic, with animations for the menu, for each button or for each box. It is an excellent support to check the feasibility of the site, to test it and to communicate efficiently with the WD team.
In conclusion, with Shared Holidays, it is possible to buy or sell shares of a vacation home and enjoy other localities every year, alone, as a couple or as a family. The code of the website includes the search for vacation homes, so an improvement of the project would be to implement all the other functions present on Figma. The management of a calendar allowing each investor to book his vacations in the house would also be an important function to add. Starting from this tip of the iceberg, we should dive in and answer questions about regulations and laws on renting a property.
The team
Ina Ranieri Web Development: Frontend (LinkedIn)
Luc Ham UX Design (LinkedIn)
Julia Scheidt Web Development: Backend (LinkedIn)
Jan-Dennis Witthoff Web Development: Frontend (LinkedIn)
Paul Sommerfeld Web Development: Backend (LinkedIn)
Theophilus Oyama UX Design (LinkedIn)
Roles inside the team
During our project „Shared Holiday Homes“ we took advantage of our different interests and specialities we decided for at the beginning of the TechLabs Journey. Luc and Theo were in charge of the UX Design. They build the creative part in our team and developed design proposals including font types, color themes via Figma.
Those no-code proposals made by the UX Team, had to transform into a code basis in Visual Studio Code. This was the part of the Frontend-Team, consisting of Ina and Jan-Dennis. They connected the visual creativity from the Figma Board into a dynamic webpage. Each Frontend cannot work without informations, especially changing information, e.g. individual criterias for our searchbar, which leads to individual houses fitting to the seekers preferences. Those dynamic informations where processed in the Backend, which is developed by Julia and Paul. They provided the structure of data transfer between the Frontend and Backend. All in all we successfully splitted up different tasks, which converged into a great teamwork result!
Mentor
Lars Wittkämper
