Mobile UI Design: Property Investor

Project Background

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

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

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

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

Interaction flows

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

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.

Fonts

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

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

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

Imagery & Iconography

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

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