LIVEN: Designing a Family-Focused Housing Search
LIVEN: Designing a Family-Focused Housing Search
LIVEN: Designing a Family-Focused Housing Search
Timeline:
5 weeks (Feb-Mar 2025)
Skills:
Information Architecture (IA); UX/UI Design; Product Design; User Research; Wireframes
Tools:
Figma, FigJam, Microsoft Excel, Visual Studio Code
Links:
Timeline:
5 weeks (Feb-Mar 2025)
Skills:
Information Architecture (IA); UX/UI Design; Product Design; User Research; Wireframes
Tools:
Figma, FigJam, Microsoft Excel, Visual Studio Code
Links:
Timeline:
5 weeks (Feb-Mar 2025)
Skills:
Information Architecture (IA); UX/UI Design; Product Design; User Research; Wireframes
Tools:
Figma, FigJam, Microsoft Excel, Visual Studio Code
Links:
Overview
Overview
Overview
Problem:
Problem:
Problem:
A fictional family relocating to New York needs to find housing that aligns with shared and individual priorities such as budget, space, transit access, and nearby amenities. Existing property listings and information architecture do not adequately support filtering and comparing homes based on these layered, real-life needs.
A fictional family relocating to New York needs to find housing that aligns with shared and individual priorities such as budget, space, transit access, and nearby amenities. Existing property listings and information architecture do not adequately support filtering and comparing homes based on these layered, real-life needs.
A fictional family relocating to New York needs to find housing that aligns with shared and individual priorities such as budget, space, transit access, and nearby amenities. Existing property listings and information architecture do not adequately support filtering and comparing homes based on these layered, real-life needs.
Approach:
Approach:
Approach:
A persona spectrum was created to identify and prioritize the family’s needs, which then guided the restructuring of the information architecture and search filters. Filter design followed UX best practices by emphasizing high-priority criteria first, reducing complexity, grouping related options, and clearly showing applied filters to support efficient decision-making.
A persona spectrum was created to identify and prioritize the family’s needs, which then guided the restructuring of the information architecture and search filters. Filter design followed UX best practices by emphasizing high-priority criteria first, reducing complexity, grouping related options, and clearly showing applied filters to support efficient decision-making.
A persona spectrum was created to identify and prioritize the family’s needs, which then guided the restructuring of the information architecture and search filters. Filter design followed UX best practices by emphasizing high-priority criteria first, reducing complexity, grouping related options, and clearly showing applied filters to support efficient decision-making.
Solution:
Solution:
Solution:
The result is LIVEN, a task-focused housing search experience that combines refined metadata, prioritized filters, and a clear Browse-Search-Ask flow. By aligning filter logic, sitemap structure, and wireframes with user needs, the website’s design enables the family to quickly narrow down relevant listings and confidently evaluate homes that meet both property and neighbourhood requirements.
The result is LIVEN, a task-focused housing search experience that combines refined metadata, prioritized filters, and a clear Browse-Search-Ask flow. By aligning filter logic, sitemap structure, and wireframes with user needs, the website’s design enables the family to quickly narrow down relevant listings and confidently evaluate homes that meet both property and neighbourhood requirements.
The result is LIVEN, a task-focused housing search experience that combines refined metadata, prioritized filters, and a clear Browse-Search-Ask flow. By aligning filter logic, sitemap structure, and wireframes with user needs, the website’s design enables the family to quickly narrow down relevant listings and confidently evaluate homes that meet both property and neighbourhood requirements.
Persona Spectrum
Persona Spectrum
Persona Spectrum
Metadata
Metadata
Metadata
Existing Parameters: Pulling data from the existing IA
The metadata in this spreadsheet I created are divided into 2 major groups: existing parameters (those that were already in the JSON file) and new/additional parameters (additional data the family needs but were not in the JSON file).
To make the process of editing the JSON file more efficient, I included the relevant JSON keys in this spreadsheet. The priority level of each family need was also included, with Priority #1 being the highest-level priority.
To pull relevant data from the JSON, I started by filtering the CSV file by borough/neighbourhood, as the family’s highest priority is to find a house in Staten Island. Of the 200 entries in the CSV, 26 listings met this criteria.
Afterwards, we apply another filter, which is any listing price below $820k, as this is the family’s budget limit and 2nd highest-level priority. The values in C28-C30 (in red text) did not meet this criteria, trimming the # of entries down to 23.
I did the same thing for Priority #3, which is 3 bedrooms. After additional filtering, 12 listing entries remained.
Existing Parameters: Pulling data from the existing IA
The metadata in this spreadsheet I created are divided into 2 major groups: existing parameters (those that were already in the JSON file) and new/additional parameters (additional data the family needs but were not in the JSON file).
To make the process of editing the JSON file more efficient, I included the relevant JSON keys in this spreadsheet. The priority level of each family need was also included, with Priority #1 being the highest-level priority.
To pull relevant data from the JSON, I started by filtering the CSV file by borough/neighbourhood, as the family’s highest priority is to find a house in Staten Island. Of the 200 entries in the CSV, 26 listings met this criteria.
Afterwards, we apply another filter, which is any listing price below $820k, as this is the family’s budget limit and 2nd highest-level priority. The values in C28-C30 (in red text) did not meet this criteria, trimming the # of entries down to 23.
I did the same thing for Priority #3, which is 3 bedrooms. After additional filtering, 12 listing entries remained.
Existing Parameters: Pulling data from the existing IA
The metadata in this spreadsheet I created are divided into 2 major groups: existing parameters (those that were already in the JSON file) and new/additional parameters (additional data the family needs but were not in the JSON file).
To make the process of editing the JSON file more efficient, I included the relevant JSON keys in this spreadsheet. The priority level of each family need was also included, with Priority #1 being the highest-level priority.
To pull relevant data from the JSON, I started by filtering the CSV file by borough/neighbourhood, as the family’s highest priority is to find a house in Staten Island. Of the 200 entries in the CSV, 26 listings met this criteria.
Afterwards, we apply another filter, which is any listing price below $820k, as this is the family’s budget limit and 2nd highest-level priority. The values in C28-C30 (in red text) did not meet this criteria, trimming the # of entries down to 23.
I did the same thing for Priority #3, which is 3 bedrooms. After additional filtering, 12 listing entries remained.
New/Additional Parameters: Pulling data from other sources
In this section are parameters that were not in the original JSON file, but were added in later.
Priority #4 for the family is the availability of a basement; of all the remaining entries, only 3 listings met this criteria, making these the 3 final candidates. These also happened to be full basements, which met the family’s needs.
Property features are the most important to the family, hence their rankings as Priority #1 to #5. Priority #6 and onwards are neighbourhood features and nearby amenities the family seeks.
The first one is nearby transit hubs. To populate the metadata, I pulled data from Realtor.com and Local Logic. To help the family in their decision-making, ratings/scores as well as available transit systems were included. The text were also colour-coded: green is for the entry with the highest ratings and the most ideal transit options, orange is for moderate ratings, and red is for the entry with the lowest score.
New/Additional Parameters: Pulling data from other sources
In this section are parameters that were not in the original JSON file, but were added in later.
Priority #4 for the family is the availability of a basement; of all the remaining entries, only 3 listings met this criteria, making these the 3 final candidates. These also happened to be full basements, which met the family’s needs.
Property features are the most important to the family, hence their rankings as Priority #1 to #5. Priority #6 and onwards are neighbourhood features and nearby amenities the family seeks.
The first one is nearby transit hubs. To populate the metadata, I pulled data from Realtor.com and Local Logic. To help the family in their decision-making, ratings/scores as well as available transit systems were included. The text were also colour-coded: green is for the entry with the highest ratings and the most ideal transit options, orange is for moderate ratings, and red is for the entry with the lowest score.
New/Additional Parameters: Pulling data from other sources
In this section are parameters that were not in the original JSON file, but were added in later.
Priority #4 for the family is the availability of a basement; of all the remaining entries, only 3 listings met this criteria, making these the 3 final candidates. These also happened to be full basements, which met the family’s needs.
Property features are the most important to the family, hence their rankings as Priority #1 to #5. Priority #6 and onwards are neighbourhood features and nearby amenities the family seeks.
The first one is nearby transit hubs. To populate the metadata, I pulled data from Realtor.com and Local Logic. To help the family in their decision-making, ratings/scores as well as available transit systems were included. The text were also colour-coded: green is for the entry with the highest ratings and the most ideal transit options, orange is for moderate ratings, and red is for the entry with the lowest score.
For Priorities #7 to #10, I included extra information such as business name, distance (in miles), and other additional features (e.g. amount of park space; by the water). Aside from Realtor.com and Local Logic, I also pulled data from Google Maps, NYC Parks, and Waterway Guide to populate the metadata.
With all the essential data gathered and compiled (with 3 final candidate property listings for the family), my next step was to edit the JSON file to include all relevant search data the family will need.
For Priorities #7 to #10, I included extra information such as business name, distance (in miles), and other additional features (e.g. amount of park space; by the water). Aside from Realtor.com and Local Logic, I also pulled data from Google Maps, NYC Parks, and Waterway Guide to populate the metadata.
With all the essential data gathered and compiled (with 3 final candidate property listings for the family), my next step was to edit the JSON file to include all relevant search data the family will need.
For Priorities #7 to #10, I included extra information such as business name, distance (in miles), and other additional features (e.g. amount of park space; by the water). Aside from Realtor.com and Local Logic, I also pulled data from Google Maps, NYC Parks, and Waterway Guide to populate the metadata.
With all the essential data gathered and compiled (with 3 final candidate property listings for the family), my next step was to edit the JSON file to include all relevant search data the family will need.
Search Parameters: Editing the supplied JSON file
Search Parameters: Editing the supplied JSON file
Search Parameters: Editing the supplied JSON file
Sitemap
Sitemap
Sitemap
View the full sitemap through this link:
View the full sitemap through this link:
View the full sitemap through this link:
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Search Page
Search Page
Search Page
Search Page (filters applied)
Search Page (filters applied)
Search Page (filters applied)
Listing Page
Listing Page
Listing Page
High-Fidelity Wireframes
High-Fidelity Wireframes
High-Fidelity Wireframes
Search Page (filters applied) + Listing Page
Search Page (filters applied) + Listing Page
Search Page (filters applied) + Listing Page
