Bricks & Bells Properties

Overview

Bricks & Bells Properties is a responsive web app that allows prospective property buyers to search a database for properties of interest.

With this new web app, potential buyers can view comprehensive information about property listings, schedule property viewings and get in contact with real estate professionals to guide them throughout their buying process.

‍

Objective

Typically, searching for real estate properties can be time consuming and complicated for new buyers. Bricks & Bells Properties offers a solution that helps streamline the process, making the search for the perfect property quicker and easier.

My Role: UX/UI Designer

As the UX/UI Designer on this project, I will lay out my process of designing this solution, with a primary focus on the UI Design.

‍

Process

1. User Persona
2. User Flows
3. Wireframes
4. Mood Board
5. Style Guide
6. Mockups & Prototype

‍

Let's Start by Understanding Who We're Designing For

‍

Meet Rashida Molayo

User Persona

Whenever I am developing a solution, I think it is imperative to start with the people that I am designing for.

Having a solid understanding of what the target users' needs are and what their goals are, lays down the important foundation on how to proceed with ideation for the possible solution to the given problem.

To deepen my understanding and empathy, I chose to examine Rashida Molayo, a user persona backed by UX research. 

Demographics:

• Age: 42
• Gender: Female
• Occupation: IT Consultant
• Marital Status: Married with 2 children

Goals:

• Rashida makes a good living and wants to invest in property beyond the city for increased financial security for her family.
•  She wants a tool to help her find the right properties so as not to waste her time.
•  She wants to find the right information for fast decision making.

Tasks:

As Rashida is new to real estate, she wants a tool that is easy to use and that will help her find the property she’s looking for.

• Search for properties, inputting criteria relevant to what she’s looking for.
•  Easily view and return to listings she’s interested in.
• Receive relevant and comprehensive information about properties.

‍

User Flows

After I reviewed some user stories and analyzed the various tasks that my user would need to complete, I mapped out some user flows.

Mapping the flows helped me determine what pages I should include in the site, so that my users can effectively achieve their goals with the product.

This process helped me design a better product by allowing me to visually evaluate the sequence of interactions between screens, which in turn helped me to ensure logical and efficient progressions from the points of entry through task completion.

‍

‍

Wireframes

I created my early, low-fidelity wireframes with Balsamiq to quickly work out the basic layouts for my screens. In this, I was also able to outline in more detail the steps organized in my user flows. 

My low-fidelity wireframes were eventually compiled into a paper prototype, which I used to conduct an informal, in-person usability test. The informal usability test was used to validate whether or not my designs were on the right track.

The mid-fidelity wireframes were created with Figma and it granted me the chance to improve upon my layout and UI design by establishing a consistent visual hierarchy and applying principles of good spacing.

‍

Mood Board

To establish a visual direction and cohesive mood for the web app, I chose to build a mood board. This helped me get aligned with what the users would want in the product. 

Based on the user persona, our target user is a new property buyer that is looking for efficient expertise that will put comprehensive property data in front of them for quick and easy searching.

Furthermore, users of the app are looking for a professional source, that they can trust to lead them where they need to go.

‍

Style Guide

As I got close to finishing my mockups, I compiled a visual style guide to document all of the visual and UI elements of the app's brand. I felt that creating a visual style guide would help guide anyone who may be working on this project in the future. In addition, establishing this style guide will help to ensure consistency in the design and maintain a professional feeling for the users.

To take a closer look at the visual style guide, follow this link: Bricks & Bells Style Guide

‍

Mobile Mockups

Once my designs were reviewed and polished, I started creating the final screens and prototype in Figma. Below are some of the key features.

‍

‍

Search and Filter

• Users can input data to search for properties and apply filters to refine their search.
• This helps users to have a more focused and targeted search for properties that fit their specific wants and needs.

‍

Scheduling

• If a user is interested in taking a tour of a particular property, they can schedule a viewing for a date and time of their choosing.
• Users benefit from this design and layout because it walks them through the scheduling process step by step in a simplistic, yet focused way.

‍

Favorites

• Liked properties can be marked and saved so that users can easily revisit them under the Favorites tab.
• With a large number of properties being viewed by users, an easy way to mark and return to properties is beneficial, so buyers can quickly find all the properties they previously liked.
• Property listings of interest can even be shared with others.

‍

Responsive Mockups

The responsive web app was designed to adapt to different breakpoints: Mobile, Tablet and Desktop. Specifically, the breakpoints were defined as 375px for Mobile, 768px for Tablet and 1440px for Desktop.

‍

‍