Perfect Properties



My role
UX/UI Designer

August 2018- October 2018

Marvel, Sketch, Invision,

I recognize that the process of finding a perfect property is time-consuming, tricky, and complicated. This is one of the most important decisions in people’s lives. I want to be involved in this project to reduce the stress of new homeowners. I decided to choose the Perfect Properties project to help simplify the process of finding properties for the people who want to invest in real estate. 

A responsive web app is a webapp that maintains the optimal structure, layout, and functionality of the web, and doesn’t depend on the device that the user is using.

Sign-in and sign-up as a new user, create user’s profile, input the property preferences, search and filter available properties, and save a property listing as a favorite

View details for given property such as number of bedrooms and bathrooms, size, price per sqft, gas, electricity, internet coverage, elevator, beach view, pets allowed, 24/7 security
Property recommendations
Contact real estate agent/manager for scheduling a viewing


I created a user persona to focus on my target audience - property investors. My persona name is Rashida, and the persona contains her background, introduction, needs, and behaviors. I used the personas to guide design decisions on important features of my responsive app based on their characteristics.

User persona for Perfect Properties


User flow is a diagram of screens Rashida must interact with in order to complete a task on the responsive web app. The user flow allows me to determine what pages I should include in my web app in order for my users to achieve their goals.

User Flow Diagram

User flow diagram for Perfect Properties


Low-fidelity wireframe allow me to design some of the basic details and content for each of the screens represented in my user flow diagram. This will help me to test ideas quickly and iterate my designs faster in order to deliver a better design solution for users. This process also help me determine the minimum requirement for each screen and the connection between the screens.

Low fidelity prototype screens for Perfect Properties


For the mid fidelity prototype, I incorporated UI design patterns into the prototypes to make the design more usable and clear to the users. UI design patterns are common, reusable design solutions to common UI problems. Below are some of the examples of how I put the UI design patterns into the web app screens:

  • Onboarding 1, 2, 3
    Description about what features Perfect Properties offers to the users
  • Create Account Page
    Input feedback for the user as they fill out Create Account Page
    Show warning if user inputs the wrong information
    Show check mark if user inputs the right information
  • Sign In Page
    Input feedback for the user as they fill out Sign In Page
    Show check sign if user fill in the correct information
  • Search Page
    Insert the hamburger menu on the search page to provide users with a better navigation
  • Hamburger Menu
    User can view the profile and change the settings in this menu
  • Search Filled Page
    Search autocomplete pattern is used to recommend the users with locations based on what they are typing
  • Map View Page
    Insert the map feature, so users can search for properties by locating them on the map
Onboarding screen 1, mid-fidelity, Perfect Properties
Onboarding screen 2, mid-fidelity, Perfect Properties
Onboarding screen 3, mid-fidelity, Perfect Properties
Create account screen, mid-fidelity, Perfect Properties
Create account screen, filled-in, mid-fidelity, Perfect Properties
Sign in, mid-fidelity, Perfect Properties
Sign in screen, filled in, mid-fidelity for Perfect Properties
Search results, mid-fidelity, Perfect Properties
Hamburger menu screen, mid-fidelity, Perfect Properties
Search screen, active, mid-fidelity, Perfect Properties
Map view, mid-fidelity, Perfect Properties


I created two moodboards for the Perfect Properties project. Moodboards are simple collections of inspiration and design elements that establish the mood for my project. This helps share my vision with clients, teammates, and employers in the future.

  • The first moodboard gives a feeling of a simple, clean and modern look. It is inspired from the colors of nature and modern houses.
  • The second moodboard gives a feeling of a peaceful, cozy and relaxed look. I take the inspiration from sky color and lights reflecting on the buildings under the dark night. 
  • I decided to move on with the second moodboard. I think finding perfect properties is a stressful process, and I want to reduce the stress in the process. The users will feel like they are in a new journey and making one of the most important decisions with the second moodboard. The moodboard will help the users feel relaxed, cozy and peaceful. They will feel like they are taking a walk under the wonderful gradient color of the dark sky with the second color scheme.
Moodboard 1
Moodboard 2


This is the color palette that I choose for my project. The primary color is a gradient purple color, and it’s also a UI trend in 2018. I choose blue as an accent color because blue is closely related to purple on the color wheel, and it will be easy on the eyes for the transitions. All colors in this palette create harmony colors compared to the other color palette.

Perfect Properties Style Guide


Edit Profile@2x
Map View
Drop down menu
onboarding 3
Onboarding 2
Onboarding 1


Responsive prototype is based on the concept that designs should work on multiple device interfaces with different breakpoints. Breakpoints are the points where layout, structure and content of the screens start to look bad. For this project, I created three different popular breakpoints including mobile, tablet, and desktop interface. At first, I paid attention to the mobile-first approach where I design for mobile breakpoint and changed it to work for bigger breakpoints. Mobile-first screens are harder to design, so it has to been completed first. This makes me think of all the screen requirements before moving on to bigger screens. Below are the responsive screens for the home page and property details.


Future Plans
  • Perform usability testing for my responsive web app.
  • Iterate the design based the the results from usability testing.
Lessons Learned
  • Include UI design to supplement the UX design thinking process. I should use common UI design patterns because they are already tested extensively through user research, information, and wireframes that have been used by UX professionals.
  • Always be consistent with my UX design as well as UI design by following the style guide. For example, all fonts have to be the same and aligned. All colors have to fall into either primary or secondary sets of colors. This will support the branding of my app.
  • When using trendy UI elements such as gradient background, the light color has to be on the top, and dark color has to be on the bottom. The gradient will flow vertically instead of horizontally.
  • Color and contrast is important to help users easily consume and understand the content on the screen. Use the color contrast checker to check the readibility for the user. Adding more grey colors for the background to create depth for my designs.
  • All images have to be in high definition when exporting assets for developers.

Selected Works

Microsoft TeamsProduct Design, Desktop and mobile application

Human Health ProjectUX/UI Design, Branding, Web

Word of lifeUX/UI Design, Mobile App, iOS

Pacifier in the BackpackUX/UI Design, iOS

Perfect PropertiesVisual Design, Web, Mobile App, Tablet

SeedshareUX Design, iOS

© NHUNG LE 2019. All rights reserved.