The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
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.

Finding a home is about starting a new chapter. GoodNeighbors makes buying, selling, or renting simple and enjoyable.

Timeline

I  March 2021 - May 2021

Role

I  Lead UX designer

Problem Statement

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.

GoodNeighbors helps users buy, sell, or rent homes through personalized listings and agent access, driving a ↑10% increase in completed transactions within 6 months.

Competitive Analysis

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.

I analyzed leading real estate apps to identify strengths, weaknesses, opportunities, and threats to create an enhanced experience.

Zillow

Trulia

Redfin

Realtor.com

Strength

Trulia’s property detail page uses intuitive icons and tabs to make key information easy to find.

Realtor.com’s landing page clearly separates buying, renting, and selling for easy navigation.

Weaknesses

Zillow’s UX is weakened by outdated illustrations, an uninviting color palette, and a cluttered, inconsistent property detail page.

Redfin’s primary red feels alarming, and its clean interface lacks warmth.

Opportunities

Refine Trulia’s landing page with engaging visuals and simplified content for a clearer, focused experience.

Refine Redfin’s color palette and visual tone to feel more friendly, engaging, and differentiated from competitors.

Threats

Redfin is cleaner and more organized, while Trulia offers more engaging interactions.

Trulia has a modern look, Realtor.com offers a well-organized property detail page, and Redfin’s dashboard is organized and user-friendly.

Design Personas

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.

I created a design persona to understand user needs, challenges, and goals and guide product decisions.

“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.

Living in NYC with her family, she is seeking a long-term suburban home and needs efficient tools to filter, browse, and save properties.

Task Analysis & User Flows

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.

I created a task analysis and user flow to map user steps, identify pain points, and define key 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.

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

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.

The information architecture defines a streamlined structure that minimizes clicks and simplifies the user experience.

Mid Fidelity Prototype

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.

Using task analysis and user flows, I created a mid-fidelity prototype focused on interactions.

Moodboard

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.

For the UI, I focused on creating a cheerful, low-stress experience using illustrations and color to evoke a relaxed, neighborhood-like feel.

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

Primary

Primary

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

Menu

Search

Email

Password

User

Uncheck

Checkbox

Back

Forward

Close

Check

List

Map

Satellite

Unlike

Like

Buy

Sell

Rent

Feed

Agent

Mortgage

Help

Settings

Logout

Rating

Property

Saved

Parking

Calendar

HOA

SQ Price

AC

Share

Property

Menu

Search

Email

Password

User

Uncheck

Checkbox

Back

Forward

Close

Check

List

Map

Satellite

Unlike

Like

Buy

Sell

Rent

Feed

Agent

Mortgage

Help

Settings

Logout

Rating

Property

Saved

Parking

Calendar

HOA

SQ Price

AC

Share

Property

Styleguide

This visual style guide documents core UI components and defines a bright, engaging aesthetic with vibrant colors, clean shapes, readable typography, and subtle animations.

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

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

Menu

Search

Email

Password

User

Uncheck

Checkbox

Back

Forward

Close

Check

List

Map

Satellite

Unlike

Like

Buy

Sell

Rent

Feed

Agent

Mortgage

Help

Settings

Logout

Rating

Property

Saved

Parking

Calendar

HOA

SQ Price

AC

Share

Property

UI COMPONENTS

UI COMPONENTS

primary button

secondary button

Selector

search field

text field

date picker

label

switch

checkbox

card

chart

High Fidelity Prototype

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.

Using research insights, I designed high-fidelity prototypes that demonstrate intuitive flows, seamless navigation, and an approachable interface.

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.

The introduction uses a light, delightful animation and lets users quickly start by searching, 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.

Users can sign in or sign up with email or social accounts, supported by subtle animations that create a warm 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.

Users can browse search results in a list view, with cards showing key details at a glance to help them quickly choose listings to explore.

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.

Users can switch to a map view to explore properties by location, with markers revealing property cards and key details.

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.

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

Please click here for the clickable prototype

Click here for the clickable prototype

Responsive Breakpoints

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.

The app is fully responsive, with layouts optimized across breakpoints to ensure visual consistency on all devices.

tablet

desktop

Thank you for watching

Thank you for watching