USER PERSONA

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 FLOW

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

LOW FIDELITY PROTOTYPE

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.

MID FIDELITY PROTOTYPE

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

MOODBOARD

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.
  

STYLE GUIDE

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.

HIGH FIDELITY PROTOTYPE

RESPONSIVE PROTOTYPE

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.

REFLECTION

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.

© NHUNG LE 2019. All rights reserved.