top of page

PROPTY

A project focused on designing the user interface for a real estate investment app primarily directed at first-time investors looking to secure their financial future.

THE PROBLEM

Individuals are increasingly turning to real estate investment to achieve financial security. It's an exciting and emotional experience, but it's also frequently complicated. While there are numerous blogs and agencies that provide information, buyers who are new to the market may struggle to get started without professional guidance and may waste time viewing properties that are out of their price range.

THE SOLUTION

To design a responsive web app that provides information on properties of interest to property buyers. This web app will provide them with the knowledge they need to get started quickly.

TIMELINE

Two Months

MAKE OF THE TEAM

This project was completed for the UI for UX Designers course at CareerFoundry. I was the sole UX & UI designer. 

KEY GOAL

Design an intuitive and visually sound app prototype for real estate investors who are new to the game.

USER PERSONA

Based on preexisting user research, a user persona was created to better understand the user's needs and motivations.

01

USER PERSONA

02

USER FLOW

03

LOW-FIDELITY WIREFRAMES

04

MID-FIDELITY WIREFRAMES

05

MOOD BOARD

09

UI CLICKABLE PROTOTYPE

06

MOBILE MOCKUPS

07

STYLE GUIDE

10

BREAKPOINT MOCKUPS & PRESENTATION SCREENS

11

LESSONS LEARNED

08

HIGH-FIDELITY WIREFRAMES

1Persona_edited.jpg

USER FLOW

The first step in developing the visual design was to create a user flow based on the user stories provided in the project brief, in order to visualize the steps required for the user to achieve their objectives.

Some aspects of this flow, most notably the filter feature, were subject to change, as demonstrated later in the iteration process.

User Flow_edited.png

LOW-FIDELITY WIREFRAMES

The app's main functionalities were sketched out with pen and paper based on the persona, their goals, and the user flow diagram.

Low Fidelity Wireframes for Mobile

ADDITIONAL RESPONSIVE BREAKPOINTS

Additional low-fidelity wireframes were created to demonstrate the responsiveness of the app's main functionalities.

Low Fidelity Wireframes for Tablet

Home Page

Property View

Filter Results

Low Fidelity Wireframes for Desktop

Home Page

Property View

Filter Results

MID-FIDELITY WIREFRAMES

To more effectively communicate the form and functionality of the responsive web app, grayscale mockups for each breakpoint were created.

To help with the alignment of the elements on each screen, a grid system was first created for each breakpoint.

Mobile

Mobile Grid

4 Column Grid

Tablet

Tablet Grid

8 Column Grid

Desktop

Desktop Grid

12 Column Grid

Mobile Wireframes

Tablet Wireframes

DesktopWireframes

MOOD BOARD

A mood board was created to aid in the collection of ideas and to establish the overall tone and visual feel we desired for the design of this project.

Several styles were attempted, but, ultimately, the one shown below was selected as it seems to generate the overall feeling and mood that we want our users to have when interacting with our product.

MOBILE MOCKUPS

Now that the overall mood has been established, the visual design could be experimented with and iterated upon.

Examples of the Design Stages of Some Wireframes

1

2

3

4

Final Design

  • Text cards were superimposed on the images to increase visibility and change color when one is selected.

  • The next button has been replaced with arrows and indicator dots to make the user more aware of the remaining steps

  • The size and positioning of the title and subtitle have been adjusted to better match the overall design.

1

2

3

4

Final Design

  • Insert text components were reduced because the additional steps could cause frustration.

  • The next button has been replaced with arrows and indicator dots to make the user more aware of the remaining steps.

  • The size and positioning of the title and subtitle have been adjusted to better match the overall design.

1

2

3

4

5

Final Design

  • Checkbox sizes were reduced because they made the design appear ridiculous.

  • To improve usability, the view results button has been changed to set, and a back arrow and indicator dots have been added.

  • The size and positioning of the title and subtitle have been adjusted to better match the overall design.

1

2

3

4

5

Final Design

  • Property images have been enlarged to improve visibility and make better use of available white space. The bookmark icon has been enlarged and the color has changed.

  • Indicator dots were added to indicate a scroll interaction and to inform the user of how many images remain.

  • We were trying to solve too many problems at once and were exceeding the project brief, so the bid/buy buttons were removed because they were unnecessary at this early stage of app development.

1

2

3

Final Design

  • The expanded menu was converted from a pop-out to a full-page view for improved design, visibility, and clickable space.

  • We overextended ourselves with the pages needed to be designed in the original expanded menu. For a faster prototype turnaround, menu items were reduced to only those that were absolutely necessary.

  • The size of the profile image and text were increased.

1

2

3

4

5

Final Design

  • The profile image and welcome text have been enlarged.

  • For improved visibility, the color of the bookmark icon was changed.

  • The price text was bolded to make it stand out and catch the user's eye.

  • The page highlight in the bottom navigation bar has been changed to improve visibility and contrast.

1

2

3

4

5

Final Design

  • Original page design was scrapped in order to better fit into the overall app design.

  • Checkboxes have been made larger to improve clickable area.

  • The text color was changed to improve visibility, and the amenity item list was modified to provide more useful options.

STYLE GUIDE

Based on the existing user interface design, a visual style guide was created to assist with all current and future changes to the current app.

Four different color palettes were considered before settling on a blue-based palette. All of the options were attractive, but the blue primary color stood out the most when combined with the other colors selected. Furthermore, the blue color is more calming in nature and feels more modern, all of which relate to the app's overall purpose.

check out the complete style guide here

Color Palette

Primary

Vector-3.png

Hex: #062C43
RGB: 6 44 67

Vector-1.png

Hex: #1A4634
RGB: 26 70 52

Buttons

Primary

Secondary

Secondary

Vector-2.png

Hex: #CBCFAC
RGB: 203 207 172

Vector.png

Hex: #869687
RGB: 134 150 135

Typography

Heading 1

Josefin Slab Regular 90pt

​

Heading 2

Josefin Slab Regular 67pt

​

Heading 3

Josefin Slab Regular 50pt

​

Heading 4

Josefin Slab Regular 38pt

​

Heading 4

Josefin Slab Bold 38pt

​

Heading 5

Josefin Slab Regular 28pt

​

HEADING 5

Josefin Slab Bold 28pt

​

Heading 6

Josefin Slab Regular 21pt

Body 1

Body text body text body text body text body text body text body text body text.

​

Quicksand Regular 20pt | Line Height 32.4

​

Body 2

Body text body text body text body text body text body text body text body text body text body text.

​

Quicksand Regular 16pt | Line Height 25.9

​

Body 3

Body text body text body text body text body text body text body text body text body text body text body text.

​

Quicksand Regular 12pt | Line Height 19.4

Logo

On Light Background

On Dark Background

Iconography

Buttons.png

HIGH-FIDELITY WIREFRAMES

These are some of the app's final wireframes after multiple iterations.

UI CLICKABLE PROTOTYPE

All of the completed high-fidelity wireframes were linked together to create an interactive prototype, showing how the app would function once developed.

Scrolling was made possible, as well as specific interactive components such as checkboxes, selection cards, and bookmarking a property.

or interact with the prototype below

BREAKPOINT MOCKUPS & PRESENTATION SCREENS

To demonstrate responsiveness, screens for three key app features were created for both tablet and desktop breakpoints.

Tablet

Propty_Tablet1_HomePage.png
Propty_Tablet2_FilterResults.png
Propty_Tablet3_PropertyView.png

Desktop

Propty_Desktop1_HomePage.png
Propty_Desktop2_FilterResults.png
Propty_Desktop3_PropertyView.png

Real World Mockup Presentation

Presentation Mockups.png

LESSONS LEARNED

One of the most significant lessons learned from this project was the importance of flexibility within design and thought.

​

I frequently found myself exceeding the scope of the project brief and having to catch myself and scale back. I included many features that were not really necessary for a minimum viable product like this, and had to learn that only the most important features should be prioritized.

 

This project taught me about visual design and all of its various components, but most notably, it taught me about humility as a designer and knowing when to pull back or start over. ​

​

Designing visual user interfaces fall within the purview of psychology, and knowing how to design for various scenarios is a skill that requires honing through practice and dedication. This project is currently complete, but there are numerous adjustments that could be made to improve on it. That is the beauty of design, and it is also one of the most difficult lessons I have had to learn, but I am stronger because of it.

Like what you see?

Let's chat.

bottom of page