Community Library Module Redesign

The Community Library Redesign was a project with a strong focus on user experience, aiming to enhance the usability and visual appeal of the Library module. Libraries play a central role in providing community members with a wide range of resources, including files, videos, webinars, PDFs, and more. Users can interact within the Library by commenting, sharing, and liking different entries. Additionally, we have incorporated a sophisticated administrative interface to efficiently organize and moderate Library content.

The Old UI

A dated folder view

The initial user interface we began with was built on an outdated folder structure for organizing library entries. While this approach may have been familiar to users, it generated several complaints around its clunkiness. Some of the issues included the need for a double-click to open folders, multiple clicks required to move an item, and a visual style reminiscent of Windows 95.

The feed view

Although slightly more modern in appearance than its folder-based counterpart, the feed view of the library demanded a significant amount of scrolling, and offered users limited information about the library entry on the feed page. To access the full details of an entry, users had to navigate to the entry page.

The Library Entry view

The Library's entry view offers a ton of information leading to a cluttered and overwhelming interface. It could benefit from improved hierarchy and organization. The image previews are small, requiring users to download them in order to view the details more clearly.

Wireframes

In creating these wireframes, my aim was to enhance the user experience by keeping them on a single screen whenever possible. I focused on improving the preview experience by providing larger image previews, displaying the first pages of PDFs, and delivering an overall more visually engaging experience.

Redesigned grid of library entries with a featured entry card-row and entry preview

A folder tree slides out from the left allowing users to easily switch between folders

An administrative view is easily toggled to in the same view revealing additional controls

High-fi mockups

Library entry grid with togglable card view

Library entry grid with preview panel open

Drag and drop administrative view