The Learning Library is a new feature that showcases educational videos for thedownballot, a civic tech organization that aims to keep constituents connected from local elections. I was assigned to produce some high-fidelity wireframes given lower-fidelity ones for the web. With the limitation of providing videos from thedownballot's platform, I designed two main methods of navigation to access the library:
1. Provide the user with the freedom to search keywords.
2. Display a pre-determined set of categories.
Initial Prototypes:
Initial high-fidelity wireframe for the Learning Library functionality.
Click for interactable.
Version: Search Bar
Initial high-fidelity wireframe for the Learning Library functionality.
Click for interactable.
Version: Catalog
Updated Prototype:
After discussion with the front-end developers, we opted for:
• a horizontal scroll to browse through the Learning Library. This design change would adhere to a single-page application for optimality purposes.
• drop-down menu for users to quickly access their desired topic to learn more about.
Updated wireframe. In collaboration with UX Lead.
Click for interactable.
Tool: Adobe XD