I really enjoyed the challenge of this project! The brief was to create a site solely for display on screens in a showroom for a new housing development. Sales representatives would use iPads when talking to potential buyers but the site would also be viewable and usable on a large display.
The designer who provided the brief was very clear and particular about how it should look and and behave, which made discussions nice and productive.
The final product had the following features:
- A map of the development with each house-number overlaid in a colour-based system for identifying the property type
- A menu listing the property-types
- Selecting a type from the menu would highlight only those house-numbers, hiding all others
- Selecting a house-number would display a modal identifying the house and street and show a large visual of the house-type
- An admin page where the status of each property could be set: for sale, reserved or sold
- Visual representation of each property’s status on the overview map
Because of the requirement to manage each property’s status, we needed a database of the houses. We then decided to use an SVG to wrap the whole map. That allowed dynamically creating the house-number elements, adding the colour based on their other attributes. It also meant we could trigger Javascript events from clicks on each of these elements. Finally, using an SVG meant we could easily work with varying screen sizes.
This project included elements that were new or unfamiliar to me, especially working with SVGs and some of the Javascript solutions. It was very satisfying though, because the result was flawless and is a pleasure to use.
Unfortunately this project cannot be viewed anywhere publicly, but if I am doing any work for you and you would like to see it, I can demo it personally for you and talk you through it further.