Course project in UI for UX Designers at Career Foundry.


2 months, May - June 2022

My Role

UI Designer


Pen & Paper, Figma, Illustrator





Looking for properties can sure be a clutter of information when entering real estate pages, especially when you’re new.

So what if there was an app that just did what it was intended to do without all the extra? An app that would make new buyers such as Rashida or old ones encouraged to find properties without the overwhelming feeling of a complicated process.


A web responsive real estate app for especially first-time buyers to find and invest in suitable properties based on their profile.

So how did I get there?

I started this project with a brief where I was provided with the objective, context, 5 why's, and a user persona. Design criteria had also been made with user stories and feature requirements.

This is Rashida, our user persona

  • 42, married, and 2 kids.

  • New to real estate.

  • Wants to invest in a property beyond the city for increased financial security for her family.

  • Wants a tool with the right information that doesn't waste her time for fast decisions.

The 5 why's:

I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!


  • Who: Primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.

  • What: 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.


I started with a quick competitor analysis to find strengths, weaknesses, opportunities, and threats with similar sites. But also to get a good sense of familiar design patterns.

  • Where:  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.

From user stories to user flows

I took the already known user stories and outlined the key functionality. From these, I created user flows to make sure all task flows were covered.

1. As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.

2. As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.

3. As a user, I want to be able to save or mark properties I am interested in so that I can easily revisit them.

4. As a user, I want to be able to contact the right people if I am interested in scheduling a viewing.

Low to high fidelity

I started with ideating quick sketches on pen and paper and moved on to digitize these with prototyping to test the form and functionality of my user flows. I made alterations after conducting guerilla testing.

Some of the improvements after testing:

  • Made icons bigger 32x32.

  • Moved icons to the left of the text in property view.

  • Touch-friendly size of the drop-down menu.
  • Added a zebra pattern for easier scanning.

  • Made links underlined to add contrast on sign up and login screen.

  • Alphabetical order in the search field.


Profile setup

Property view

Book a viewing

Building the brand

These were chosen after scanning for keywords and associations found in user stories and user persona.


The users are looking for
stability for themselves and their families. Most of them are first-time buyers.


Users want to invest in properties that meets their needs. They are looking for financal security and economy growth.


Our users are modern busy people on the go who needs to quickly access suitable properties on the go regardless of location.


I created two distinct mood boards from the above keywords to determine better which aligned with the project brief and knowledge of the user best.

Why? - The colors were more vivid. Additionally, it communicated Stability, Growth, and Availability better than the other.

Rather, the brief aligned more with #1 and Rashida, a first-time buyer with family and kids who likes to be out in nature while investing in safety for her youngsters.

The muted analog colors used in #1 conveyed growth, nature, relaxation, and reliability. Additionally, the rounded corners made it easier on the eyes. They include icons, buttons, and illustrations

Style guide

This is one of the parts I love the most. I get a good chance to make sure all elements align and speak the same visual language throughout the app. 

Picking colors

I wanted to create an atmosphere of inviting calmness, and trust mixed with growth and stability. How could I find a balance between contrast and harmony with the analogous hues of green and blue while designing for color blind and staying with my mood board?

I played around with different palletes and decided on the following which was the best fit with the mood board, atmosphere, and contrast in mind. I also tested it with the most common types of color blindness to ensure contrast.

Typefaces & hierarchy

Fjalla One is a sans-serif which works good for larger semibold headings that breathes. I’ve chosen Noto sans for smaller headings and body text since it’s a good readable text that harmonises well with Fjalla One.




I'm passionate about illustrations and created these vector images. It was important to align these to the brand colors and make them consistent.  I wanted them to be clean and in the spirit of diversity and inclusion.


Familiar gesture patterns used within the app, mimicin the real world.


Animations were used to guide users attention.

Confirmation success with an arrow jumping up and down
used as onboarding to find the location of inbox for new users.

Designing for breakpoints

I took a mobile-first design approach to then scale up to both tablet and desktop, deciding on where the design will adapt for different sizes. Bottom bar navigation will adapt to top bar navigation on desktop for example.

Mobile (414px)

Tablet (834px)

Desktop (1440px)


High fidelity prototype

Retrospect & next steps

I was able to dig deeper into the aspects of UI from a UX perspective during this project. I learned even more about accessibility and vision impairment which is a huge interesting challenge. I also learned more about UI animation which is a skill I aim to become better at.

The next step would be to run more user tests with real potential property buyers to gain more feedback for further improvements. A 360view would be nice to implement to give a good representation of the neighborhood. 




  • Craftwork: Basil Icons (Figma Community)
  • Gesture icons: Jeff Portaro
  • Reshot
  • Extra made by me


  • Unsplash


  • Made by me