UI Design

PERFECT PROPERTY

2020
7 min read
Context

As part of my UI Design specialisation course at CareerFoundry, I designed PERFECT PROPERTY.
A web responsive app that provides property buyers with information on properties of interest.

Tools

Pen, Papers, Keynote, Balsamiq, Sketch

Services

UX, UI and interface Design

understand
Current situation

Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated. While there are plenty of blogs and agencies providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out oft heir range.

This web app will provide them with the expertise needed to get started efficiently.

Problem statement

Our users need a web app they will use at home or on the go that provides access to reliable, uncomplicated information about their potential property investments.

emphasize

“Finding the perfect property shouldn’t be hard!”

User stories

As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.

As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.

As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them.

As a user, I want access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.

As a user, I want to be able to contact the right people if I am interested in viewing a property, so that I schedule a viewing.

User flow

Thanks to the stories above, I was able to shape the architecture and flow of the web app from a user's standpoint.

ideate
Wireframing

Based on user needs, I could understand better what type of pain points they could face. From this, I was able to iterate different level of fidelity wireframes for the key features based on my user flow (accessible here).

Low fidelity

Mid fidelity

Mood board

Afterward, I decided to create two distincts mood boards from different inspirations sources to imagine the overall look and feel of the project.

The left mood board should stir up the feeling of formal, efficiency and intelligence.

While the right one should stir up the feeling of welcoming, prosperity and protection.

After deep reflection and looking at the outcome of the preference testing, I decided to go after the right mood board. His minimalism, with a reminder to Nature, helps the user to feel secure and protected on his future investment.

design
Style guide & accessibility

The following UI style guide has been created as a reference in order to keep consistency across the full user experience.

High fidelity prototypes
conclusion

Thank you for reading through my real estate responsive web project part of my User Interface learning process. I hope you enjoyed it and feel free to reach me for any inquiry.

What didn't work

Lack of user testing rounds- Probably because it was only a "fictive" project, I didn't take enough time to do usability testing to refine my design. I only conducted one round of usability test on an early stage and one preference testing. In a real case scenario, I'm aware that testing often and early is key.

What went well

Understand key features - My UX skills helped me to structure the visual design part of the project confidently with user's needs in mind.

Inspiration to create - I successfully fuelled my creativity to create the mood and the environment required based on the project guideline.

What could be better

Make this project, a real one - Since this made up project was part of my UI course, I couldn't face up real life challenges during the development phase like incorporating a real interactive map.

Leverage visual design skills - Since I do not have a background in graphic design, I needed to spend extra effort on my visual skills, like creating consistent icons and automate my design workflow.

Please click on the interactive InVision link below to access to my polished prototype that resume the work you just went through.

contact

It is literally true that you can succeed best and quickest by helping others to succeed.

GET IN TOUCH