SpareSpace Is a mock concept of an online real-estate agency that specialises in the letting of spare land. The concept was developed after recognising real-estate websites lacked the ability to rent land easily.
Design with the goal of implementing a clean, simplistic, east to use interface and the removal of complex features that currently reside in the real estate applications like Right-move and OnTheMarket. SpareSpace was developed with the idea of only providing the essential components to deliver the information needed by the user to achieve their goals.
The objective of SpareSpace is to create a platform that can be used within a variety of demographics. Due to the nature of the product, there will be many people from different economical backgrounds requiring the need to rent land. So the product has to be inclusive of all demographics.Design with the goal of implementing a clean, simplistic, east to use interface and the removal of complex features that currently reside in the real estate applications like Right-move and OnTheMarket. SpareSpace was developed with the idea of only providing the essential components to deliver the information needed by the user to achieve their goals.
To create an accessible web application that allows a user to easily navigate an interface which can help them find a piece of land from a land-owner and be able to contact them directly. The other solution is to provide and interface that allows a land-owner to easily post an advert of land they have available to rent out.
These are fictional characters based from the research conducted on what sort of user would be attracted to the site and why they might need it. This was to make sure I had an understanding of what could be considered constraints or blocks when designing the product.
I used quick wireframe sketches to understand what I wanted my site to look like and how it would flow. I knew I wanted to use cards for adverts that were clean and readable, with clear input boxes and buttons. I felt like working with current design consistencies like form formats and search buttons would help in terms of navigation and usability
I used the tool flowmapp to create my user flow’s. These were key in terms of me being able to understand my process of how the site would actually function. Having a visual reference to constantly check back on made the process much smoother overall.
This user flow shows the users actions on how they can go to the site and from there pick a piece of land they are interested in and then contact the property owner.
Finding advert and enquiring
This user flow represents how a user signs in and posts an advert for land available. I wanted the whole site to be very minimal with a smooth uncomplicated process. The user flows show how simple it could be to post a fairly complex concept into an advert.
The result is four screens With one being a 3 stage process and three actions required from the user. I wanted to reduce the amount of effort required for the user to post an ad as this would be a positive experience, hopefully bringing back more user of the product.
The branding of SpareSpace was very much driven from an understanding of land and physical space. I wanted that to be reflected in the colour schemes, UI layout as and logo.
The logo came from the idea of what we understand of land and layers. Due to the site’s purpose being too renting out a small chuck of land I wanted to represent it in a tangible shape. This developed in the form of a cube. I believe this is where my idea stemmed from. My choice to go for a more solid colour palette I feel kept the logo fresh and current.
Colour and Typography
The colour choices came from the final development of the logo from what I used to represent land and soil. I used a typeface that represented something formal but spacious which was the overarching thematics in my design which I found Montserrat to be best suited.
The design consistencies were very important as they indicated to the user how to interact and navigate the website. I made a conscious decision to create all button elements in the same format by using the same colour, text and rounded corners with no shadows. I used the same format with headers but these were not clickable elements.
The design choice for forms were consistent with most contemporary forms used in the web now. I wanted to make a distinction with the corners and text of the forms as these elements were imputes rather than clickable.
My decision to display each advert as cards was due to my research on current real estate sites. Rightmove and Zoopla displayed adverts that were the width of the web browser. Where as OnTheMarket displayed each advert in cards, which was much more effective. But I also found that OnTheMarket's design of these cards could be improved upon. There was a lot of information that was not required as a user would always click on the advert to find out more about the property. So I condensed and streamlined my design to give the details you initially look for when searching for a property.
The following designs show the development of the products UI and how it changed after constant reiteration. The design gradually met the standards to which reflected the goals of the project, which were to have a minimal/clean UI that was easy to navigate. The below development designs did not have enough contrast in the elements, did not use white space intelligently, the containers were not reflective of the brand I had in mind. I constantly evolved the designs to match the goals of the product.
These are the final revisions of the project. Leading you from the landing page to the end process of posting an advert to the main page.
I wanted to use a welcoming image in the landing page to invite the user in. Using some personal photography I decided an image of a road into the mountains fitted the website and its purpose, as a lot of people looking for land want to escape somewhere else.
From the landing page you are directed to ether login, create an account or just search for land. To post an advert you are required to have an account. If you do not need an account and are just looking for land you can continue to the site by clicking ‘Search for Land’
The create account page sets the tone of the website. It had to be user friendly, easy to follow and navigate. This was reflected in the design choices of how the form was layout and styled. Contrasting green type, with the slight off-grey background to show what each section of the form entailed. Minimal information needed to create account, definitive buttons with one large create account button to make sure the user understood what page they were currently on. I added in an illustration of a figure looking in the distance as if in nature. I felt this was quite symbolic in what it represented for the website and the ‘journey’ they might take in obtaining land.
This is the main page of the website and will be constant throughout your searches. I wanted to create a page that was consistent when searching as you it gave the user a good indication of where they were in the website. There is only two pages to essentially navigate between: The main page, which displays all the advert cards with your filtered options. The property page, which displays all the information of the piece of land you selected and a prompt to contact the seller. When logged in there is also an option to ‘post an ad’ which takes you to the ‘post ad’ form
The Enlarged Property page design proved to be the most difficult as it had to provide the most information, let the user easily find that information and understand where to go next if they were interested in that advert. It also had to have all the necessary components users expect to see on a website, like; share, email, maps, distance for local necessities. These were all provided in the in a readable format, while removing all the unnecessary information found in current real estate agency’s websites. One of the key differences with SpareSpace is that it asks land owners to provide where the land boundaries are situated and what size they are. This lets the users make sure they know exactly where the land is and what it provides.
This page lets you contact the landlord by name, phone number and email. The idea is to let the communication through SpareSpare be as minimal as possible so to eliminate the a stereotypical idea of a middle-man. This was a specific design choice as it was a pain point from the research.
The posting advert pages were initially designed to be fitted into the one page. Though the design but it was extremely busy and realised this would be off-putting for the user. If it seemed overcomplicated it would eventually stop the user from using the service. So I broke the screen into a 3 page process, making it seem like a much more achievable task, while also guiding them through the process. This was a much more successful design choice which I was happy to finalise.
The account page screen is for a user to look at their current adverts as well as their account information. There is also a Post Ad button which lets you create a new advert from the account screen. The adverts are kept in the same design as the cards on the main page. This is to keep design consistency as well as to make a more visually appropriate way to display all the adverts in a block. You get a very quick idea how many live adverts there are and how to edit them if need be.