Filter Listing Wireframe

Wireframe

Consolidation

We brought together all the ideas that received votes during the ideation and created a new workflow.

Initial Wireframe

Then, we proceeded to create initial wireframe to communicate our design with the Engineering and the Product team. Using this wireframe, we held Design & Dev Sync meeting to check the feasibility of our design.

Major feedback

  • Loading More option: this would not allow each page to have separate links, and it would be difficult to implement.
  • Filter display: Having all four options exposed with auto-complete would be expensive in terms of data loading. Having them as separate tabs within the dropdown is fine.
  • Show Columns option: Backlog.
  • Mobile View: It's fine as long as the code keeps the same markup.

Initial Wireframe for Content Listing Page and Filtering

Annotation

After the Design & Dev sync, we modified the wireframe incorporating the feedback we have received with annotations to describe the changes.

This is not the final wireframe, since there were still discussion around pagination and sorting options at the end of the sprint.

Post-sync Annotation for Content Listing Page