Mobile UI Design: Property Investor

Project Background

Completed design

As a UX Designer who works largely on strategy and research, I don't always get the opportunity to focus on UI work. This personal project was exclusively geared towards UI work with the goal of designing a mobile real estate app. 

Tools & Process

I designed this app from scratch using paper and pen for sketching, Marvel's Pop for paper prototype, used Sketch for my UI design and built a high fidelity prototype and animations in Principle.

User profile

Javier is a a small, first time investor who is motivated by providing for his family, particularly his kids who are soon off to college. He has been interested in investing in real estate for some time but hasn't made the leap. He needs an app to help him identify good investment properties within his budget that he can hold on to long term.

 

Initial Sketches, competitive review and paper prototype

Pencil icon.png

My initial sketches had a traditional hamburger menu. I then reviewed various competitors like Redfin, Realtor, Trulia, Zillow and Streeteasy and I thought that tabs would be a better approach. I followed the conventions of apps on the market. I then built a paper prototype to think through the interactions.

 

Grid layout

Grid.png

Moving my design from paper to Sketch, I focused my grid on the iPhone 8. I began with a modular design approach and added my elements. Because my app would not have a ton of complexity, I decided that a 12 column layout worked best.

 

 

Elements & Hierarchy

Elements & Hierarchy.png

After defining my grid, I moved from placeholder rectangles to actual initial elements, including images and icons.

 

Interaction flows

Flow.png

I organized my low fidelity wireframes into various interaction flows. From switching tabs to sending a message to an agent to sharing the property.

 

Moodboards

Moodboards.png

To help me decide on the direction of color, images, and font choices, I created two moodboards based on the user. My two directions for moodboards focused on 1) the pragmatic, financial and wealth focus vs 2) a more family and legacy approach. I ensured the button colors were accessible and adjusted as needed.

Freedom Wealth.png
Family LIfe focus.png
 

Fonts

Font.png

For more emphasis, I used serif for headlines and sans serif for readability in body copy. After review of a number of fonts I chose the following:

  • PT Serif: H1and buttons
  • Quattrocentro: Subtitle used for top and bottom navigation
  • Oxygen: body
 

Colors

Color.png

Moodboard & Initial color palette 

I went back to my moodboard’s initial color palette as a starting point and used Adobe’s Color Wheel to refine. 

  • #061161 became the driver for the majority of the palettes because of it’s accessibility against yellow and gold backgrounds
  • I needed a darker color for body text so chose #2C3E50 as I wanted a color analogous to blue and didn’t want to go with black
  • I considered bolder color like what I saw in Triad but didn’t want to take a chance with an app that is more about business/investment than social/fun
Initial Color Pale

Initial Color Pale

After review, I chose to use #1C2661 as the primary color and went with a complementary palette.

Color Choice

Color Choice

 

Imagery & Iconography

Images+icons.png

Images I chose were representative of various geographical markets. I also looked to break down images by urban, suburban and rural areas.  

I identified a few screens where images could amplify the product and still keep some consistent branding. I saw the loading, landing and the page where a user has saved searches as opportunities. Rather than imagery, I created some simple icons for the profile page.

 

 

Animation

Ani basic.gif

Finally, I created a prototype with some animations. The flow is as a user:

  • Reviews and favorites properties
  • Goes to favorites
  • Selects property for more detailed information
  • Returns to previous results