Mathesar Media Browser

Explore media assets right in DB

This project is a contribution to the open-source Mathesar project by the Center of Complex Intervention, a non-profit organization funded by Digital Garage, the Reid Hoffman Foundation, and the Sergey Brin Family Foundation.

Mathesar is a data management, exploration, and interaction tool for non-technical users. It is designed to be extensible and accessible. And media browsing is one of its features to achieve such vision. In short, it allows users to explore media assets referenced by database tables directly inside the tool, removing the need to manage and view the assets separately in the file system or dedicated software.

UX Research

To better understand the potential users of the media browsing feature of Mathesar, we identified four professions and interviewed a user in each field - researchers, art curators, designers, and investigative journalists. As they all saw the benefits of the media browsing feature in their daily workflow, we created a persona for each of them.

We also drew out the storyboards and user journeys to help ourselves visualize the use cases and develop empathy.

Ideation and Prototyping

We also decided to focus on images as it is our potential users' most popular media assets. Tools like AirTable, Notion, and Microsoft Lists offer great inspirations for image presentation in relational database settings despite serving different purposes. We identified three useful views for browsing media assets in our lo-fi prototype testing - table view, gallery view, and timeline view. They were made into the hi-fi prototypes on Figma.

Table View

The table view provides users a familiar interface for viewing tabular data together with the ability to view media assets in place, making it suitable for researchers who care about both images and non-visual data.

Gallery View

The gallery view provides an image-first approach to browse a database table, which targets the art curator and designer personas.

Timeline View

The timeline view visualizes the temporal ordering of images, which is especially useful for the investigative journalist persona and photographers.

On top of the three views, there are features for filtering, sorting and grouping the data. All of them could be tried out in the Figma prototype.

The Figma prototype can be accessed here, and the documentation of the project is available on this official Mathesar Wiki page.