Perfect Property App
01 Brief
02 User Flow
03 Design Process
04 Mood board
05 Mockups
06 Animation
07 Style Guide
08 UI Prototype
01 Brief
Objective
A responsive web app that provides property buyers with information on properties of interest.
Context
Real estate investment is a popular way for individuals to achieve financial security. It's an exciting and emotional experience, but often complicated. While there are plenty of blogs and agencies providing information, often, buyers new to the market my struggle to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.
02 User Flow
Following the first time user after sign up, the user choses his preferences for his property search which then provides him with a result that can be further refined by using the filter. The user can also chose to manually search for properties with the search tool.
03 Design Process
The 'user flow' is used as the base to create the first paper wireframes for the different screens. Subsequently, with the help of the Marvel app, it is easy to create a a low fidelity paper prototype in order to test out the usability of basic features. The wireframes are further developed by adding and distracting pattern ideas until it results in pleasant, usable high fidelity wireframes.
The paper prototype can be found here:
https://marvelapp.com/5d77fha
Using Sketch to create mid fidelity wireframes further patterns were introduced and explored.
Refining the screens. Making sure that the user is offered easy functionality.
The high fidelity wireframes are finally made into a prototype and tested to assure usability.
04 Mood board
The first mood board 'Elegant Modern Home Feeling' is derived from association. Wood is a cosy element in homes. It creates warmth. Marble adds a modern, luxurious touch and blue reminds people of blue sky and fresh air which is highly desirable.
The second mood board which was a possibility for the app was 'Popping Color'. Following the trend of vibrant, neon colours and a bit of nostalgia from the eighties this mood board is both modern and memorable.
In conclusion the choice fell on the 'Elegant Modern Home Feeling' for the reasons that it conveys more trust and reliability through a clean and modern look.
05 Mockups
Mockups in different breaking points.
06 Animation
Short walk-though
07 Style Guide
The style guide makes it easier to keep the consistency of the brand and facilitates communication between different stakeholders.
It addresses the task of creating a communal language between designers and developers by offering easy to copy CSS code and style instructions.
For a closer look click here!
08 UI Prototype
Final Conclusions
- This UI project had some challenging aspects which took some time for me to overcome. It was the first time I actually icons entirely myself. Such as the house icon. Dissecting all the shapes and looking at each object from a very basic elementary standpoint was eye-opening. The whole process of creating icons allows me in the future to create a wide range of icons.
- This project helped me to work on some weakness I wasn't aware of. Such as visual hierarchy and spacing.
- Working more extensively on the style guide helped me to understand developers a bit more by just keeping them in mind while creating it.
- Another interesting point was to be given a brief and to design something accordingly. Working to pixel perfection is something that needs getting used to.
I really enjoyed this project. If you enjoyed it too, feel free to contact me for employment or freelance work.
