UI/UX Story of Perfect Properties
User Persona
I Directly started from user persona and I created a user persona to focus on my target audience — property investors. My persona name is Aman, 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 Aman 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.
Low Fidelity Wireframes
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 Wireframes
For the mid fidelity wireframes, 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 UI Screens
High Fidelity 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.
Conclusion
I really loved every step of it, I think as a UI/UX Designer it was very important to put myself in a situation where I couldn’t assume anything about the needs of the people I designed for. It was a great learning experience as a designer and as a human, I was really glad to be able to align these two aspects in this project.
I’m aware it is far from perfect, I would love to have had the time to run some tests so I could have feedback on it. I also wish I had more time to design the in-app calendar. But overall I’m really proud to have been able to design this project in such a short amount of time.
