Build functional prototype for R&S search filters research

[davidmpickett]

Quick links

• Prototype planning mural
• Prototype factory
• Clickable prototype

Tasks Broken up by component

General

• Mobile version
• Desktop version
  • Hover behavior for components
  • Filter drawer behavior
  • General layout & sizing changes

Landing page

• Search interface
  • Search prompts selectable after clicking search field
    • ❓ Determine prompts (depends on Research plan)
  • Search button navigates to results page
• Show filters button opens filters drawer
• Top task links go to corresponding article
• Benefit and Topic cards/links go to corresponding search results page(s)

Filter drawer

• Selectable/unselectable checkboxes within filter accordions
• Open / closable accordions
• Collapse all / Expand all works for accordion group
• X button to close Filter Drawer
  • [Current behavior] - clicking the X does nothing. If users want to close the filter drawer, they must click "Apply Filters". This is because all the logic for updating results is tied to the Apply Filters button.
• "Filter By" heading
• Clear All button
  • Unchecks all check boxes
  • Sets all filter chips to hidden
  • Reset heading counters
  • Needs to also reset filter related variables in "Showing results" message
• Apply filters button
  • Some type of logic that connects these selections to possible search results pages
  • This is the most important button in the whole prototype - it contains all the logic and needs to be updated repeatedly
• Should buttons remained fixed while accordions scroll?
  • Determined during Midpoint to not have buttons fixed in place
• Animation for Filter Drawer
  • Currently slides in from Right side of screen
  • No animation on mobile (desktop may differ)

Filter chips on search results

• Removable
  • Updates checkbox state and filter counts
  • Needs to update filter-related variables in "Showing results" message
  • Dismissing a Filter chips updates search results
• CLEAR ALL icon button
  • Clicking it removes all filters
  • ☝🏻"Clear all" button must be styled to look like a button (can be finessed in Updates to R&S design (based on Midpoint feedback & prototype needs) #20002)
  • Clear all link only shows up when 1 or more filters applied
  • Needs to also reset filter related variables in "Showing results" message
  • Needs to reset results
  • Button needs to hide itself
• Wrapping of short chips for multiple on one line?

Search results page

• Search interface
  • needs to be finessed so that it only updates once search button is clicked
  • Complex logic
• 30+ search results
  • Heading is clickable and takes user to relevant Results page
    • 10/30 complete
  • Blurb text is unique and truncates at ~187 characters
  • Result shows or hides appropriately based on User selected filters
  • ❓ Result shows or hides appropriately based on Search prompt (depends on Research plan)
• Results count message
  • "Showing 1 - X of Y results" starts at a high number and gets lower when search term or filters applied
  • "for 'term'" updates with search term (and hides when null)
  • "with 3 filters applied" reflects total filters applied (and hides when 0 filters applied)
• Canned search logic
  • powered by links on landing page
    • Common Topics
    • Browse by benefit
    • powered by Category links on Detail pages

Detail pages

• 🛑 Blocked - Mobile layout in Updates to R&S design (based on Midpoint feedback & prototype needs) #20002
• Use variables to make content and tags populate based on search result
  • 10/30 complete
• top links from landing page

Category links on Detail pages

• Clickable on individual article pages - takes to canned search

Remaining tasks for Sprint 18

• Search results / detail pages - clicking search results dynamically populates details page
  • 10/30 complete
• Filter drawer - animation - on mobile - no animation
• Results page - Clear all link only shows up when 2 or more filters applied -> change to 1 again
• Results count message
  • "Showing 1 - X of Y results" starts at a high number and gets lower when search term or filters applied
  • "for 'term'" updates with search term (and hides when null)
  • "with 3 filters applied" reflects total filters applied (and hides when 0 filters applied)
• Category links on Detail pages
  • Same as Search chips but no x
  • Clickable on individual article pages - takes to canned search
  • Need to finesse search results links to clear out all filters so these link work as intended - Result 1 is model
• Undo hover shenanigans on mobile

Outta scope for Sprint 18

• Detail pages - mobile layout (blocked by design work)
• Desktop version
• Search interface - choose a prompt functionality (dependent on research plan)
• Results page - results update based on search prompt (dependent on research plan)
• Dismissing a Filter chip updates search results (big lift, confirm if vital later)

Confirmed outta scope for prototype

• Filter Drawer - X button - Have the X reset checkboxes to state they were in when drawer was opened (aka save original filter state and discard any changes)
• Search interface - Search button doesn't do anything unless search prompt selected - (confirm no error state behavior needed for prototype
• Results page - Pagination - when there are more than 10 results, break them up into chunks of 10 and have pagination

[davidmpickett]

I couldn't help myself and so I made a proof of concept of interactive checkboxes https://www.figma.com/proto/cg8VNnxFOxw7lb10FVHpi5/Resources-support?node-id=504-6762&node-type=frame&t=H3f92G4wis7WfCE9-1&scaling=min-zoom&content-scaling=fixed&page-id=504%3A6304

[davidmpickett]

End of Sprint Update
Pulled in and did quick proof of concept for interactive core. Still a lot of work left to do

[jilladams]

This will continue in Sprint 17, Dave is not here a full sprint, and this is likely to roll into Sprint 18.

[davidmpickett]

Got the core logic of the filter drawer working:

• Checkbox state is stored in variable
• Accordion header dynamically updates to reflect number of checkboxes selected
• Filter chips show or hide based on checkbox state
• Accordion is openable and closeable

filterprogress.mov

[davidmpickett]

Filter Drawer and linked Filter Chips are built out. Shared with @mmiddaugh and @FranECross in with two clarifying questions Slack

https://www.figma.com/proto/cg8VNnxFOxw7lb10FVHpi5/Resources-support?node-id=661-18[…]ing=fixed&page-id=504%3A6304&starting-point-node-id=504%3A6762

[davidmpickett]

Today's progress:

• Dismissing a filter chip now unchecks the corresponding checkbox
• Spacing between filter chips is now consistent no matter how many chips are shown/hidden
• Collapse and expand all functionality added to Accordion Group
• Filter chips reorganized to holistic alpha sort
• Clear all button unchecks all boxes and hides all filter chips

[davidmpickett]

End of Sprint Update:

• Filter Drawer is mostly complete
• Basic proof of concept to link Results visibility to Filters is in place with one result
• Reordered filters per product docs
• Made buttons in filter drawer stay in place while other content scrolls

[davidmpickett]

Daily update:

• Talked with @aklausmeier during 1 on 1 about some midpoint feedback, design decisions made, and overall path forward for having team make decisions about design
• Made buttons on filter drawer scroll with accordions rather than be fixed to screen
• Implemented logic for 15 different search results to have them display/hide based on specific tag combinations
• Logic is documented in Mural for reference

[davidmpickett]

@FranECross FYI - I am continuing to update the feature list in this ticket as I work on the prototype. Just added some emoji symbols to categorize different aspects.

• 🔭 Stretch goals: features that would require significant work and are likely not strictly necessary for usability testing. Once I have a full MVP of the prototype we can revisit these items and see if any of them seem worth the lift.
• ☝🏻 Midpoint feedback: components that have changed or might change based on Midpoint Feedback
• ❓Research plan: aspects of the prototype that may need to be revisited after the Research Plan and Conversation Guide are drafted.

My goal for the current sprint is to build out the basics of the prototype without addressing any of the three above categories. Might hit a couple of the Midpoint Feedback items if they are easy.

[FranECross]

@davidmpickett Thanks so much for categorizing and adding those emojis. Very helpful.

[davidmpickett]

Daily update:

• There are now 30 different search results each with their own logic to display/hide based on specific tag combinations
  • Logic is documented in Mural for reference
  • Every tag now has at least 1 result that shows when selected, most have at least 3
  • Going from 15 to 30 results introduced some noticeable lag when clicking "Apply filters" button. I think it's still in acceptable limits, but definitely want to cap the results in this vicinity
• All 30 Search Results now have unique text blurbs that truncate at 4 lines
  • 
• Started building Landing page
  • Canned search has been implemented for the Common Topics box
  • https://github.com/user-attachments/assets/ed71d76f-ceb4-4e13-8fb0-9ff53bb5ddd4
  • Breadcrumb on Results page now returns user to Landing page and resets all filters

[davidmpickett]

Daily update:

• Didn't have a lot of time for this today. But I got a basic proof of concept for dynamically updating a Detail Page based on which Search Result was clicked. This means we'll be able to fake having 30+ detail pages while only really having one screen

[davidmpickett]

Added fake search interface on the landing page

• Selecting the input field opens a dropdown menu with 5 options
• Selecting an option in the dropdown menu populates a term in the input field and closes dropdown menu
• Once an term is selected the input field also has an x icon. Selecting this icon clears the input field
• If the user clicks anywhere else in the input field, they can choose to change their search term
• If a term is selected and and the search button is selected, the app navigates to results screen
• The results page now has a "Showing X of X results" message that populates with relevant search term
• https://github.com/user-attachments/assets/a25fa7c9-0677-49f6-b34e-0fd06eebe464

Results page - total filter count

• The "Showing X of X results" message also populates with total number of filters the user has selected
• https://github.com/user-attachments/assets/e52846f1-9bbc-44b8-b6f0-fee38ebe6b0a
• The filter count and search term message can also both show up
• 

Other notes

• Need to update logic of previous buttons in order to account for these new variables so everything acts as expected
• Clear all filter chip updated to new design
• minor fixes

[davidmpickett]

Today felt like 1 step forward 2 steps back.

I spent some time documenting which component control which bits of logic with text boxes inside the Figma file.

I think this was worthwhile. Having put this down for the weekend and picking it back up, I had already forgotten exactly how it was set up from last week. Given I will be putting this down for at least sprint, I want to make it easy to come back to.

However, I also broke some of the logic while documenting it and then had to tediously recreate a bunch of items. This is a fragile system for sure.

[davidmpickett]

End of sprint update
@FranECross @jilladams @mmiddaugh - I suggest that we close this ticket to reflect that the prototype has been built to cover all the major features required. We can handle the final content changes in a separate follow-up ticket. #20075

We will definitely need to have some more conversations about what is necessary for the prototype vs what is not worth the extra time to build/fix. I think taking a new ticket through the normal refinement process will help facilitate those conversations.

[jilladams]

No objections from me. Will leave that to Fran to conclude, if she's aligned!

[davidmpickett]

Closing per Fran's slack comment