1)

User Story Title Search filter skeleton screen

User Story As a user, I would like to create a new search filter screen as per the figma, the
Description screen should have,
2) Search bar
3) Applied search bar
4) Left Panel
5) Right Panel
6) Buttons as per the figma

Buttons
● The saved search feature is going to be inside of the new Filter Menu. This
comes in the form of the Save and Saved Searches buttons at the top of the
menu. Once clicked, a drop down menu will appear letting the user select
from a previously saved Search. If a user selects one of their Saved
Searches, the name of the list will appear in place of the name of the button.

For example, if I have a Saved Search called “Simi Valley Houses without Liens”
and I select that from the Saved Searches drop down, then the name of the drop
down changes. If I then click on Clear Filters or select a different Saved Search, then
the name of the button will reflect the actions that I took. Clear Filters will return the
name “Saved Searches” and selecting a different Saved Search will update the
name to the name of the list.

The maximum character length to be allowed for the name of the button is 26. If a
Saved Search name is longer than 26, we are to truncate that and add “...”.
● The save button will have the same functionality as the Save Search button
that appears on the Search Page.
 ● The View [amount] Properties button will have the same functionality as the
Close button we currently have in production. This will close the filter menu
and allow the User to view the map and their Search Results.
The [amount] is a total count of all properties that come up in the Search Results.
This will behave in the same way as Search Button on the Search page. If there are
more than 99,999 properties in the Search Results, we are to truncate the number
and label it as 99,999+.

● Clear Filters, The Clear Filters button will have the exact same functionality
as the Reset does currently in production. It should only clear the filters,
Quick Lists, or Saved Searches, but not the location of the search.
 Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5wQyklh
UUngHV/PropStream-UI-Enhancement?node-id=1193%3A13349&mode=dev

Filter Menu dimensions can be found under the requirements document

https://docs.google.com/document/d/1QOxMUsrXUFpLqLcmAguRUXgSUfiK9GnN3
kBPlelwOng/edit#heading=h.oypd6q1zffj1
Acceptance Criteria ● New Search Filter screen
● Search Bar on the top
● Applied Search bar
● Left and right navigation panel
● Save button
● Saved Searches button
● Clear Filters
● View[count] properties
● Responsive screen to fit 1092 or greater
● Responsive screen to fit 1091 or smaller
● Filter Menu Dimensions as per the requirement document
Story Points 5

2)
User Story Title Left Panel Categories

User Story As a user, I would list all the categories and filters under the search filter
 Description screen, where all categories and the description of the categories listed in the
left side panel and on click of each category should display the respective
filters in the right side panel.
There will be some modifications to some of the names of the Filter
Categories.
● Quick List Choices -> Quick Lists
● Property Characteristics -> Property Details
● MLS Status -> MLS
● Pre-Foreclosure & Banked Owned (No Change)
● Ownership Info -> Owner Information & Occupancy
● Lien/Bankruptcy/Divorce Status -> Lien, Bankruptcy, & Divorce
● Valuation & Equity Info -> Value & Equity
● Mortgage Info -> Mortgage
● Right Panel to list all filters respective to the categories as per the
figma or current production categories.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● Left panel with all categories and respective description

Story Points 2

3)

User Story Title New Types of Filter Selectors

User Story As a user, I would like to create new component for the new filters
Description Combo Boxes
We are to introduce Combo Boxes into the filter menu. This will allow the user
to not only type in the value they want for the filters, but also provide a drop
down menu to select from predetermined values.
Drop Down Selectors for Date Ranges
All Date range filters will now come with an additional option to select from.

The From and To will behave the exact same way that it does in production.
However, there is a drop down menu that will allow a user to select from a
given set of ranges. Any range that is selected from the drop down menu will
have unique behavior.

The behavior is going to be similar to a Date Range filter where the From
value is set, and the To value is open.
Example: Recording Date: 1/1/2024 or later

The difference is that each day the filter updates the day value of the From
 value. In the above example, at midnight before List Automator runs, the date
of the filter will update to 1/2/2024 or later.

If a filter says 6 months, we are to subtract 6 from the month value of todays
date. For example if today is 1/5/2024 and “last 6 months” has been selected,
then the starting From value will be 7/5/2023.

Growth %
This is a unique situation. All three options will be selected.

The secondary box will let the user specify a length of time to check for their
specific Growth percentage filter.

Loom video for Combo Boxes and Drop Down Menu Loom
Video

Combo Boxes
Combo Boxes

Drop Down Menu

Drop Down selections for Date Ranges and Growth

Spreadsheet
Filter and Combo Box filter Spreadsheet

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● New component for combo box

● New component for the drop down

Story Points 5

4)
User Story Title Search bar to search tags at the top of the filter screen

User Story As a user, I would like to perform search on top of the screen to search the
Description tags under every category so that,
 ● The search bar at the top of the screen will let a User type in a tag and
it will populate filters on the right side of the screen that correspond to
the tag that was used.
● Each filter will have a set of tags that will populate the filter once
entered.
● If a tag is able to populate more than one filter, all relevant filters will
show on the right side of the filter menu.
● All filters that do not match the tags will be hidden from view.
Tag Behavior
● Multiple tags can be entered at one time.
● If multiple tags are set, they should be treated as inclusive, requiring
the filter to have all relevant tags associated with it.
● If a user enters “time” and “pre-foreclosure” then only filters that have
both tags will populate.

Filter Menu Behavior with Tags

Once at least 1 tag has been selected, then only filters that fit the tag will
populate. Any filter that does not match the tag will be removed from view.
Anything that is removed from view also removes the white space, bringing all
relevant filters close together.

If two filters belong in different categories, we will keep the Category header
and not remove it from view when tags are applied.

Once a user has entered 2 characters into the search bar, we will pull up the
list of tags they can choose from that matches the characters they entered.

Addendum
If an active filter would be removed by a tag, we are to keep it instead.

For example, if I have Bedrooms: 2-4 as an active filter, and I type in

Bathroom as a filter, the filter for Bedrooms will remain in view since I have
entered that as a filter that I actively want.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Tags Spreadsheet
Loom Video for Tags
 Acceptance Criteria ● Search bar at the top of the screen to search the tags and list all the
searched tag inputs to the right of the panel to let the user choose the
options from the searched tags.
● If same tags used across multiple filters, display all the filters that are
using the same tags

Story Points 5

5)

User Story Title Applied Filter Section

User Story As a user, I would like to choose the filters from the right panel, as soon as the
Description user chooses the filter, it gets added to the Applied Filter section.This bar will
show the User the most recent filters that have been selected. They will
appear in a descending order, with the most recently added filter on the left
hand side of the screen. The arrows will let the user click and scroll either to
the left or the right and view any filters that have been added.

The format will be:

● Filter Title: Applied Value
● Examples:
○ Quick List: Auctions
○ On Market: Yes
○ Recording Date: 1/2/2023 - 12/28/2024
○ Lien Types: Federal, HOA, Mechanics

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● Most recent filter applied by the user

● Applied filter in descending order
● Filter to display with its category like <Filter Title>: <Applied Value>
● Left and Right arrow to scroll through the filter left and right
respectively

Story Points 5

6)
User Story Title Quick Lists Category
User Story As a user, I would like to have quick filters that is exactly same as Quick lists
Description choices under filter,

AS IS:

TO BE:

This is a new group of filters that will take our existing drop down list of Quick
List choices and convert them into clickable buttons with the exact same
functionality. Only one Quick List can be selected at a time. These quick list
filters will have similar functionality as Quick list buttons on the Search page.
They will indicate the total number of properties that match each of the quick
lists when an area is searched.
Acceptance Criteria ● List all quick list as buttons
● Only one Quick List can be selected at a time.
● The Quick List buttons will be in alphabetical order
● Do not truncate the button value

Story Points 3

7)

User Story Title List all Property Details filters to the right panel

User Story As a user, I would like to list all the filters for the Property Details Category to
Description the right side panel as and when the user chooses the category. Property
Details Category
Inside of the Property Details Category there will be a new look for the
Property Classifications and Property Types. We will be combining the filters
together to make a seamless set of filters.

The top sliding bar will be the Property Classifications. We are also going to
be combining the following categories under the Other classification. These
categories are Office, Industrial, Agricultural, Recreational, Transportation,
and Exempt.

Residential
The Residential classification is the only one that will have two sections to
differentiate the filters. One will have all single family properties (Residential
Property Types) and the other will have Multi-Family Property Types.
 Acceptance Criteria ● List all filters to the right side panel for Property Details category
● All filters are accessible to user to choose
● Upon choosing the filter, the selected value must be added to the
Applied Search

Story Points 5

8)

User Story Title List all MLS filters to the right panel

User Story As a user, I would like to list all the filters for the MLS Category to the right
Description side panel as and when the user chooses the category.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● List all filters to the right side panel for MLS category
● All filters are accessible to user to choose
● Upon choosing the filter, the selected value must be added to the
Applied Search

Story Points 2
9)

User Story Title List all Pre-ForeClosure & Bank Owned filters to the right panel

User Story As a user, I would like to list all the filters for the Pre-ForeClosure & Bank
Description Owned Category to the right side panel as and when the user chooses the
category.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● List all filters to the right side panel for Pre-ForeClosure & Bank Owned
category
● All filters are accessible to the user to choose
● Upon choosing the filter, the selected value must be added to the
Applied Search

Story Points 2

10)
 User Story Title List all Owner Information & Occupancy filters to the right panel

User Story As a user, I would like to list all the filters for the Owner Information &
Description Occupancy Category to the right side panel as and when the user chooses
the category.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● List all filters to the right side panel for Owner Information &
Occupancy category
● All filters are accessible to the user to choose
● Upon choosing the filter, the selected value must be added to the
Applied Search

Story Points 2

11)

User Story Title List all Liens, Bankruptcy & Divorce filters to the right panel

User Story As a user, I would like to list all the filters for the Liens, Bankruptcy & Divorce
Description Category to the right side panel as and when the user chooses the category.
 Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● List all filters to the right side panel for Liens, Bankruptcy & Divorce
category
● All filters are accessible to the user to choose
● Upon choosing the filter, the selected value must be added to the
Applied Search

Story Points 2
12)

User Story Title List all Value & Equity filters to the right panel

User Story As a user, I would like to list all the filters for the Value & Equity Category to
Description the right side panel as and when the user chooses the category.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● List all filters to the right side panel for Value & Equity category
● All filters are accessible to the user to choose
● Upon choosing the filter, the selected value must be added to the
Applied Search

Story Points 2

13)

User Story Title List all Mortgage Info filters to the right panel
User Story As a user, I would like to list all the filters for the Mortgage Info Category to the
Description right side panel as and when the user chooses the category.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● List all filters to the right side panel for Mortgage Info category
● All filters are accessible to the user to choose
● Upon choosing the filter, the selected value must be added to the
 Applied Search

Story Points 2

14)

User Story Title Quick Lists - Show All Link Functionality

User Story As a user, I would like to have the Show All button that will pop out a menu
Description and act in a similar way to the My Search area in Production.

There are some distinct differences between prod and the update.
1. We will not be using the location of the search on this menu.
2. Each filter will appear under the Group name for the filter.
a. Property Types, Lot Size, Bedrooms, Bathrooms, etc will
appear under Property Details.
b. The same is true for Quick Lists, MLS, Pre-Foreclosure & Bank
Owned, Owner Information and & Occupancy, Lien,
Bankruptcy, & Divorce, Value & Equity, and Mortgage
 3. The Saved tag will be added to the bottom right of any filter that comes
from a Saved Search.This tag will appear on any filter on the Show All
menu that was applied by a Saved Search.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● Show All Link to the top right of the filter screen
● A Quick List popup window to list all filters under their respective
category
● From Saved button to the bottom right any filter
 Story Points 5

15)

User Story Title Quick Lists Edit and Close Button

User Story As a user, I would like to have the Edit and Close button for every saved
Description search filter,
Edit
The Edit button, once clicked, will take the user to the exact filter on the main
filter menu. This will allow the user to make any modifications necessary.

The exact behavior is that once clicked, the filter menu will scroll down until
the filter is at the top of the window.

Close Button
The X on the right of the selected filter will have the same behavior that the X
in production has. It will clear that particular filter from the Search. In
production, this X is only visible when you mouse over the filter. In the update,
the X will always be visible.
 Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

In the below Loom video example, I will cover the expected behavior if on the
Show All Menu I click on Edit for the On Market Filter.
Show All Menu - Edit Button

Acceptance Criteria ● Edit Button for every saved filter

● Close Button for every saved filter
● Edit Button to take the user to the main screen to edit their filter in right
side panel
● Close Button to clear the saved filter search

Story Points 3

16)

User Story Title Left Panel Behaviour & Selected count

 User Story As a user, I would like to have the behavior of the left side panel contain a list
Description of all of the categories that the filters are contained in. A user can click on any
of the categories and be directly taken to the category on the right hand side.
See Loom video for more information
Left-hand side of the Filter Menu Behavior

Selected Filter Count

On the right hand side of the Categories menu, there will be numbers that
appear once a user has selected a filter from that category. These numbers
represent the number of filters per category that are currently selected. If a
user unselects a filter for a specific category, the number will go down by one.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● Left Panel clicked to show to the filter on the right panel
● Increment the selected count if the user adds more filters
● Decrement the selected count if the user removes the filter from the
selection

Story Points 3

17)

User Story Title Right Panel Behaviour

User Story As a user, I would like to have the behavior of the right side of the screen
 Description contain all of the filters in a single scrollable list. It will be broken down into
categories as shown on the Right Side Panel.

Filter and Button Resizing

The width of all filters and buttons on the Right Side panel will not be fixed.
Instead, the padding surrounding nearly everything will be a fixed unit. The
new “radio buttons” are the one exception. This will allow for resizing of the
browser window without distortion.

Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● Right panel as a single scrollable list

● Right panel is not fixed
● Screen to be responsive

Story Points 3

18)

User Story Title Responsive search filter page for small and wider screens

User Story As a user, I would like to have the search filter popup to be responsive to fit
Description for larger and smaller screens.
 Figma Link:
https://www.figma.com/file/sUp2upg55wG0cGB5I6AaEk/branch/0V6AKT6It5w
QyklhUUngHV/PropStream-UI-Enhancement?node-
id=1193%3A13349&mode=dev

Acceptance Criteria ● Search filter screen to fit for small and wide screens without any
breaking components and align properly
Story Points 2