Perfect Properties
UI design
UI design
Create a web app that helps first-time homebuyers find their perfect home based on the user research provided by CareerFoundry.
Based on the user persona and user stories provided, the plan was to create 3 user flows to answers the persona’s goals. These user flows would then inform the first step of the design process and be translated into wireframes. Then, a deeper analysis of the brand’s identity with some visual inspirations would help define the style guide of the web app. Finally, everything would be put together as a final high-fidelity prototype.
A responsive web app that lets first-time buyers find their dream home by quickly and efficiently access a property’s informations without having to waste time on site.
The persona given was Rashida. Her goal was to invest in a property for the first time. To do so, she wanted to find the right information quickly and wanted the information to be relevant and comprehensible.
To help the user achieve her goals, 3 user stories were given. Based on the user stories, 3 user flows were created to map the user experience and overall use of the main features: creating an account, searching for properties, and consulting
a listing.
‘’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 access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.’’
Based on the user flows and persona, low-fidelity and mid-fidelity wireframes were created. The goal was to create a seamless flow with a minimal amount of screens so the user could access a listing and book a call for a visit quickly.
Following the brand guidelines, 2 moodboards were created with 2 distinct visual direction. Since the persona, Rashida, works in IT it was decided to go with a style that she would be most familiar with. Also, the choice of colors and style would help the product differentiate itself from its competitors.
Click here to view the full styleguide
Equipped with the mid-fidelity wireframes and the style guide, it was time to create the high-fidelity wireframes.
The goal of onboarding is to get to know the user and offer them a personalized experience based on their preferences.
To make the searching process faster, the user has access to an autocomplete search functionality. Also, they can use either the list or map view depending on their goals.
Perfect properties was one of my first UI design project and I’ve learned a lot while working on it.
Don’t be afraid to iterate
Throughout the project, I made many iterations to my screens. As I was learning and discovering new insights about UI, I applied it to my project. The result made it better each time and made me realise that this is a process.
Be precise and think of all the possibilities
I’ve learned a lot about layout and grids and how important the alignement is. Through trial and errors I have learned that I needed to broaden my point of view and not just work with one color, but shades and tints of it so I could apply it to different ui elements.
Be consistent
A good UI should be consitent throughout its screens. First, so the user understand the intent, but also for your team and the developpers that work on your project. People shouldn’t be asking themselves questions about your design.
