The image featured at the top of the about us page #1

case study

GoodNeighbors

Finding a home isn’t just about browsing listings or comparing prices—it’s about beginning a new chapter in your life. GoodNeighbors simplifies the process of buying, selling, or renting a home, creating an experience as enjoyable as a stroll through your neighborhood.

Timeline

I March 2021 - May 2021

Role

I Lead UX designer

Problem Statement

The GoodNeighbors app users need a way to easily buy, sell or rent their homes, and efficiently browse the properties that are filtered by their needs and goals. They also need a way to browse and contact real estate agents, so they can get help from professionals.

We will know the app is effective when we see a 10% increase in users buying, selling or renting their homes within 6months of daily use of the app.

Competitive Analysis

I started by analyzing leading real estate apps to identify their strengths, weaknesses, opportunities, and threats. Since this is a UI-focused project, I concentrated on evaluating and improving the apps' UI to create a standout solution.

Zillow

Trulia

Redfin

Realtor.com

Strength

Trulia's property detail page is well-organized with intuitive icons and tabs, ensuring easy navigation and access to key information.

Realtor.com's landing page clearly distinguishes between buying, renting, and selling for easy navigation.

Weaknesses

Zillow's UX is hindered by outdated illustrations, an uninviting color scheme, and a cluttered, inconsistent property detail page.

Redfine's primary red color feels alarming, and the clean interface lacks a warm, inviting feel.

Opportunities

Refine Trulia's landing page by using more engaging visuals and simplifying the content for a cleaner, more focused user experience.

Refine Redfin's colors and overall feel to be more friendly and engaging, adding unique elements to differentiate it from other apps and move beyond its traditional, plain look.

Threats

Redfin is cleaner and more organized than Realtor.com, while Trulia offers more engaging interaction.

Trulia has a modern look, Realtor.com features an organized property detail page, and Redfin's dashboard is both organized and user-friendly.

Design Personas

I created a design persona to better understand the user's challenges, needs, and goals, ensuring the product meets her needs and achieves her objectives.

“a tech savvy multitasker”

Kindra

35 / Married with 2 kids / Software Developer / NYC

Behaviors

Does everything through her iPhone including shopping, food delivery and scheduling for her kids.

Challenges

Always on the go with work and kids, she needs a quick, efficient way to browse listings due to her busy schedule.

Needs / Goals

Living in NYC with her husband and two kids, she seeks a long-term home in the suburbs—a safe neighborhood with good schools—requiring an efficient way to filter, browse, and save properties tailored to her needs.

Task Analysis & User Flows

I created the task analysis and user flow to map out the detailed steps and pages users interact with to achieve their goals, enabling me to uncover and define user pain points and problems.

kandra’s Objective

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

Information Architecture

The information architecture showcases the app's structure, designed to minimize clicks and keep pages streamlined for a simple and efficient user experience.

Mid Fidelity Prototype

Using the user task analysis, flow, and information architecture, I created a mid-fidelity prototype. This prototype emphasizes the user flow, clickable areas, and the app's interaction and navigation possibilities.

Moodboard

For the UI design, I aim to create a cheerful and delightful real estate app that eases the stress of the process. Using illustrations and colors, I want to evoke a relaxed, neighborhood-like vibe, ensuring users feel engaged and uplifted.

Styleguide

This visual style guide documents all design components and UI elements. I focused on creating a bright, engaging aesthetic with vibrant colors, clean shapes, and readable typography. Subtle animations enhance interactivity without distracting users.

Typography

Manrope

Semibold 24
0.15px Letter Spacing

Semibold 20
0px

Regular 18
0.1px

Medium 18
0.3px

Semibold 18
0.3px

Regular 16
0.3px

Semibold 16
0.3px

Semibold 14
0.3px

Regular 12
0.1px

color

Primary

Fiesta

FAF4F

Navy

1DF4D

Mint

8BE8D4

Ground

Snow White

FDFDFD

Tofu

E8E4DA

Accents

text, buttons, outline strokes

Dove

C6C3C3

Aqua

00B099

Forrest

006C78

Sapphire

0057A2

Daybreak

8C82A1

Liberty

594A7D

animation

Cream

F7E9DD

Sand

D9C7B8

Cantaloupe

FCA797

Saffron

E28D31

Umber

A15446

Hot Coco

6B3C3B

Omphalodes

C7D7E1

Skyblue

83B3D9

iconography

Password

User

Uncheck

Checkbox

Back

Forward

Check

List

Map

Satellite

Unlike

Buy

Sell

Rent

Feed

Agent

Mortgage

Help

Settings

Logout

Rating

Property

Saved

Parking

Calendar

HOA

SQ Price

Property

Password

User

Uncheck

Checkbox

Back

Forward

Check

List

Map

Satellite

Unlike

Buy

Sell

Rent

Feed

Agent

Mortgage

Help

Settings

Logout

Rating

Property

Saved

Parking

Calendar

HOA

SQ Price

Property

Styleguide

Typography

Manrope

Semibold 24
0.15px Letter Spacing

Semibold 20
0px

Regular 18
0.1px

Medium 18
0.3px

Semibold 18
0.3px

Regular 16
0.3px

Semibold 16
0.3px

Semibold 14
0.3px

Regular 12
0.1px

color

Primary

Fiesta

FAF4F

Navy

1DF4D

Mint

8BE8D4

Ground

Snow White

FDFDFD

Tofu

E8E4DA

Accents

text, buttons, outline strokes

Dove

C6C3C3

Aqua

00B099

Forrest

006C78

Sapphire

0057A2

Daybreak

8C82A1

Liberty

594A7D

animation

Cream

F7E9DD

Sand

D9C7B8

Cantaloupe

FCA797

Saffron

E28D31

Umber

A15446

Hot Coco

6B3C3B

Omphalodes

C7D7E1

Skyblue

83B3D9

iconography

Password

User

Uncheck

Checkbox

Back

Forward

Check

List

Map

Satellite

Unlike

Buy

Sell

Rent

Feed

Agent

Mortgage

Help

Settings

Logout

Rating

Property

Saved

Parking

Calendar

HOA

SQ Price

Property

UI COMPONENTS

primary button

secondary button

Selector

search field

text field

date picker

label

switch

checkbox

card

chart

High Fidelity Prototype

Using research insights and data, I designed high-fidelity prototypes showcasing the app's intuitive flows and user-friendly interface. The goal was to ensure seamless navigation while maintaining a delightful, approachable feel.

Intro Screen

The introduction features a simple, delightful animation that sets a light and joyful tone. Users can get started quickly by tapping the search button, signing up, or signing in.

onboarding

Users can easily sign in or sign up using their email and password, or by connecting a social media account. To enhance the onboarding experience, I incorporated simple animations to create a warm and inviting first impression.

list view

Users can view their real estate search results in a list format, with each card displaying key information at a glance—helping them quickly decide which listings to explore further.

map view

Users can also switch to a map view to explore properties by location. Clicking on a property marker reveals a list of property cards, allowing users to view key details while seeing where each property is on the map.

Find agent

Users can find real estate agents through the menu and search based on their specific preferences and needs, making it easy to connect with the right agent.

Please click here for the clickable prototype

Responsive Breakpoints

The app is designed to be responsive, with screens optimized for different breakpoints to ensure a consistent layout and visual coherence across all devices.