Member list filtering and download

This is a prototype-in-code I built with the assistance of AI.

The complex interactions within the filter drawer and the logic of combining various filters together is a good example of something that would be very difficult to prototype realistically in Figma. It would involve a huge amount of variables and conditionals to try and keep track of which filters were on and which were off and all the various things that would need to show or hide as a result.

In addition, I wanted to try out some specific different behaviors with the downloading interaction to see what kind of feedback would help the user understand what was happening when they clicked the download button.

As a result, I decide an easier way to explore the interplay of the filters and the user feedback around downloading would be to mock up an actual page in code.

Member list filtering
Your file is being created and the download will start shortly. You may continue to navigate the site but if you leave the portal entirely the download will be canceled.
Your Members download is complete

Members

Name Benefits Benefit status Member status Policy Eligible employee group Bill location

Filter members

Member status

Policy

Benefits

Select benefits

Eligible employee group

Select group

Bill location

Select location

The switches are the bottom are not intended to be part of the user experience. Rather, they are to allow me to switch the prototype between a few different possible ideas I wanted to convey.

  • I’m allowing the user to filter on attributes that aren’t visible in the table. This is common on things like shopping sites, where one can filter on attributes that are only visible after clicking through to a detail page of a particular item. To ensure the filtering was working correctly though, I added in some hidden columns that I could toggle on or off to see these attributes.

  • I wanted to show what the experience would look like if no data was available, so I included a switch to turn on an empty state.

  • This particular environment has a back-end limitation on the number of records that could be downloaded in a single file, so I included a switch to simulate how we would communicate that to the user and provide a variation of the download experience.

The entire page is a single file with the HTML, JavaScript and CSS all in the same page. This was because I was using a web-based AI agent rather than an agent directly in my development environment. The web-based agent had no context of my project, so keeping all the code in a single page allowed me to easily provide it the entire project. The AI agent was used mostly for the JavaScript, to get the logic filtering correct for example. The page layout and styling were mostly done by hand.

It is also hosted on Vercel here:

View prototype