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 buying, selling, and renting experience, making it as enjoyable as a stroll through your neighborhood.

Simplifies the buying, selling, and renting experience, making it as enjoyable as a stroll through your neighborhood.

Timeline

I Mar 2021 - May 2021

Role

I Lead UX designer

Timeline

I Mar 2021 - May 2021

Role

I Lead UX designer

Problem Statement

GoodNeighbors users need an easy way to buy, sell, or rent homes, efficiently browse properties filtered by their needs and goals, and discover and contact real estate agents for professional support.

We will know the app is effective when we see a 10% increase in users buying, selling or renting their homes within 6 months 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

I analyzed leading real estate apps to identify strengths, weaknesses, opportunities, and threats, focusing on UI improvements to create a differentiated 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 for easy access to key information.

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

Weaknesses

Zillow has outdated illustrations, an uninviting color palette, and a cluttered property detail page.

Redfin’s primary red feels alarming, making its clean interface feel cold.

Opportunities

Revise Trulia’s landing page by refining visual hierarchy and content clarity.

Refined Redfin’s visual tone and color palette to create a more friendly, engaging experience.

Threats

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

Realtor.com offers a well-structured property detail page, and Redfin provides an organized, user-friendly dashboard.

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

Prioritizes a safe neighborhood with good schools

Looking for a long-term home in the suburbs

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

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

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

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

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 an engaging aesthetic using 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

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

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.

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

Intro Screen

The intro features a delightful animation that sets a joyful tone, allowing users to quickly get started by searching, 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, supported by subtle animations that create a warm, inviting onboarding experience.

Users can sign in or sign up with email or social accounts, supported by subtle animations that create a warm first impression.

list view

Search results are presented as cards that surface key details at a glance, helping users quickly choose the right property.

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

Map view displays properties by location, with markers revealing property cards so users can view key details while maintaining spatial context.

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

Find agent

Agents can be filtered through the menu and searched by 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

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.