Shay Chu
Product Designer | Multilingual

Bootcamp UI/UX Design Project

Capital Properties

Image alt tag


Student Project


UI/UX Designer


2 Months



Objective: A responsive web app that provides property buyers with information on properties of interest.

Who: This web app is made primarily for new, small-scale property buyers who are looking
to invest for additional income or financial security.

What: This will be a user-friendly, responsive web app containing a database of available
residential properties and land, and comprehensive information on each listing.

When: Buyers will use this tool when conducting property searches, and making a decision
about where to invest.

Where: Buyers will use this tool at home or on the go. Users can search for properties
anywhere, as long as they’re logged in on a device.

Why: Unseasoned buyers need access to reliable, uncomplicated information about their
potential property investments. Buyers get a feel for a place by viewing
comprehensive information about the property and its neighborhood before spending
time on-site.

Guiding Questions

  • What are some frustrations that property investors have?

  • How can we speed up the process of buying a property while following rules and regulations and without sacrificing accuracy?

User Flows
Low-fidelity Wireframes

Incorporated Best Practices

  • The sign-up form goes from top to bottom to aid people who use text-to-audio software.

  • The sign-up form has labels, along with placeholders where appropriate.

  • The sign-up form uses the terminology of "given name" and "family name" to be inclusive.

  • The logo is at the top-left corner, where people who use a left-to-right alphabet expect it to be.

Mid-fidelity Wireframes

Incorporated Best Practices

  • Buttons are 56 pixels in height, exceeding the requirements of Human Interface (that is, 44 px by 44) and of Material Design (that is, 48 px by 48 px).

  • The grid system uses four columns for the smartphone.

  • The container of the button for the primary action on the screen is filled.

  • The container of the button for the secondary action on the screen is outlined.

  • Design is based on Material Design, which is the guideline that is used by the most people in the smartphone market.

High-fidelity Wireframes

Incorporated Best Practices

  • Primary actions are associate with 1 colour (that is, green) while secondary actions are associated with other shades of another colour (that is, blue).

  • Links are underlined, and are in colour #0000EE.

Mood Board
Style Guide
Final Wireframes

What have I learned?

  • Include more photos and fewer words in future mood boards.

Potential Next Steps

  • Conduct a round of usability testing, and revise the designs based on the results

  • Conduct a round of preference test.

Drop me a message
Let's share ideas & discuss ways to collaborate!