Filterable resource hub
The designers wanted to create a filterable database of resources for their clients' audience, where all the information was available directly on the cards themselves, while avoiding a cluttered look and page redirects.
Ideas & Challenges
client-friendly database
All the information of the resource hub had to be set up in a way that my client’s client could easily modify, add and remove resources as needed in the future, without touching code.
Special contact info area
Each card needed to have a highlighted section to be able to clearly display the contact information of each resource, without the final client needing to use code.
Filterable resources
All the cards loaded into the database needed to be filterable through the required category/tag information provided.
Logo display
Since the thumbnails of each card were meant to be the logos of the resources, it was important to ensure that these didn’t get cut off at any point.
01/03
Collapsible info section
To be able to provide additional details about each resource right away, while avoiding a busy design, the cards needed to include a dropdown “Read More” section under the main info area.
Branded style
Both the filter section and the cards needed to be designed to match the overall look and feel of the rest of the website.
Squarespace version 7.1
Implementation decisions
Using a Blog page and the Universal Filter plugin (affiliate) as the starting point, I customized the blog items in a way that would allow anyone updating the information to do so quickly – without having to touch code – while still getting the pre-defined look for the corresponding organization's main info, and providing the ability to include additional content inside a dropdown section.
I also set up a specific set of variables for the designers to change up colors and other styles for the cards quickly, in case their clients requested it.
