Mathesar Media Browser

Explore media assets right in DB

Overview

Mathesar is an open-source data management and exploration tool for non-technical users. It provides an accessible and extensible UI on top of a running PostgreSQL database.

As a contribution to the overall initiative, this design project focuses on the browsing experience of multimedia assets referenced in database tables.

The Mathesar project is maintained by the Center of Complex Intervention, a non-profit organization funded by Digital Garage, the Reid Hoffman Foundation, and the Sergey Brin Family Foundation.

Goals

  1. Understand the needs and behaviors of non-technical users who interact with media-related data in database UIs.

  2. Design an approachable media browsing interface tailored to the identified groups of non-technical users.

Deliverables

  1. Research Report - a compilation of findings summarizing the user personas and media-related workflows of non-technical users who interact with database UIs on a regular basis.

  2. Prototypes - wireframes and Figma prototypes that demonstrate the proposed design.

User Definition

The idea of giving non-technical users easy access to database seemed contradictory at first. But we found that similar products in the market like Airtable (shown below), Notion and Microsoft Lists in fact have a large group of users, for example, creators, managers, journalist, researchers, etc.

We hypothesized that a similar group of people would benefit from the media browsing feature of Mathesar.

User Interviews

To confirm our hypothesis, we interviewed a user in each the following professions.

  • Researchers
  • Art Curators
  • Designers
  • Investigative Journalists

Here are some key insights from the interviews we conducted.

  • Researchers and art curators already interact with database systems on a regular basis at their jobs

  • Designers and journalists do not use any database tool but are open to utilizing it in their workflows as long as it does not require technical knowledge.

  • They all saw the benefits of a better media browsing experience in their daily workflow.

  • A common painpoint is the difficulty in sorting, grouping, filtering and sharing media collections in database.

User Personas

Based on the interview, we also constructed the user personas for each profession to define their goals, motivations and constraints.

Storyboards and User Journeys

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

Ideation

We brainstormed numerous ways to address the challenge in sorting, grouping, filtering and sharing media collections in database. One idea that stood out is to break away from the traditional textual and tabular design and replace it with a more visual interface.

Wireframing

We drew various wireframes to illustrate different ways of browsing media assets and conducted lo-fi prototype testing.

Prototyping

Based on the feedback we received, these are the three most useful ways of organizing media assets in database.

  • Table View
  • Gallery View
  • Timeline View

As a result, we produced hi-fi prototypes based on this three concepts 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.

All three views support filtering, sorting and grouping of data. The result could be stored as a collection that is accessible by other users.

Result

With the new media browser, users can explore linked media assets directly in Mathesar UI without the need to switch back and forth between respective database and media management tools. In addition, it opens up new possibilities of browsing non-traditional data in database tools.

The Figma prototype is shown below and the fullscreen version can be accessed here.

The documentations and research reports are available publicly on this Mathesar Wiki page.