Client
CareerFoundry
My role
UX/UI Designer
Timeline
August 2018- October 2018
Tools
Marvel, Sketch, Invision, Proto.io
Summary
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.
Features
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.
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.
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:
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.
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.
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.
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.