Overview

Brandywine Workshop and Archives is a non-profit art and cultural institution in North Philadelphia with a strong focus on promoting and supporting diversity in the fine art space. To further this mission, they built the first version of Artura.org, a digital archive that showcases contemporary artworks from diverse artists.

Our challenge was to redesign Artura.org to make it easier for users to discover these diverse artworks and save them for future reference.

My Role

As the primary product designer and lead frontend engineer on the project, I was in charge of designing and building a new frontend interface for both desktop and mobile devices.

The Problem

Problem Statement: Our goal was to design a new workflow and interface for Artura.org that allowed users to do the following:

• Keyword search

• Advanced search with filtering

• Browse artworks, artists, exhibitions, collections by heritage

• Login and save favorite items

• Create custom lists of favorite items

Target Audience:

• Educators: Academics and scholars, students and grad students, curators and institutional employees

• Commercial curators and collectors

• High school students and lay people

  
  

Design Process

After first drafting a web architecture diagram to ensure that all new features were incorporated in a cohesive manner, we then turned our attention to the details of the user experience.

From there, we moved to medium-fidelity and later high-fidelity prototypes.

Throughout this process, we drew inspiration from similar apps, such as Apple Music, Spotify, and IMDB, which are known for their high-quality browsing and search experiences.

We also noticed that the relationships between Artura.org’s data objects (Artworks, Artists, Exhibitions, etc.) were mirrored in the relationships between the data objects on Spotify. For example, an art exhibition on Artura.org contains multiple artworks (often from different artists). This is similar to a music playlist on Spotify, which contains multiple songs from different artists.

However, despite the similarity in structure between Artura.org and these other apps, we encountered some design challenges that required unique solutions.

Search and Filter

As one of the key features of Artura.org, the search and filter functionality posed an interesting challenge. We realized that there were a few different reasons why someone might be using the search function on Artura.org.

Use Case #1: To find a specific artwork

The user knows exactly what they are looking for — they have a clear idea of a specific artwork, artist, exhibition, or collection that they want to find and remember the name of that object.

“I want to learn more about the artwork called "In the Water."”

Keyword search is most helpful for this use case. Similar to Spotify’s search result page, relevant search results containing the keyword would be returned and displayed by category (Artworks, Artists, Exhibitions, Collections). This narrows down the results list enough so that the user can easily find the specific art object that they have in mind.

Use Case #2: To browse

The user is just browsing and doesn’t have a specific art object in mind. They want to discover new artworks or artists, typically within some larger category.

“I want to explore more African art.”

Creating a “browse by category” page is most relevant for this use case. Similar to how Spotify and Apple Music have an “Explore” page where the user can browse music by genre, we created a browse page for users to explore artwork and artists by geographic region and heritage.

Use Case #3: To browse and filter

The user is looking for specific artworks and artists that fit a certain criteria. They may not have a specific artwork in mind, but they would like to look at a smaller subset of art.

“I want to look more into African-American woodcuts that were made during the 1980's.”

An “advanced search” and filtering function is most relevant for this use case. For this functionality, we referenced IMDB’s Advanced Search page. We also decided to create an advanced search page that was completely separate from the keyword search results page in order to reduce user confusion between the two types of search results.

To determine which filters to show on the advanced search page, we consulted artists and other art professionals to get their input.

The other design question to answer was exactly which design mechanism to use for filtering the results: interactive filtering or batch filtering.

• Interactive filtering: The system updates the list of search results dynamically after each new filter selection made by the user.

  • i.e. The system starts by displaying a large list of results to the user -> the user makes one filter selection -> the system updates the results -> the user looks through the new results before selecting another filter -> the system updates the results again, and so on.

• Batch filtering: The system waits for the user to finish making multiple selections and pressing “Submit” before displaying results.

  • i.e. The user makes multiple filter selections and presses “Submit” -> the system returns a filtered list of results based on the selected criteria.

After consulting some research from the Nielsen-Norman Group, we found that users who already have multiple filter criteria in mind benefit the most from batch filtering, and users who do not have a clear search goal benefit the most from interactive filtering.

Given that our users who fall under this use case typically have some criteria in mind already, we chose to pursue a batch filtering approach for the Advanced Search page.

As usage of Artura.org increases, we will continue to monitor users’ search behavior to ensure that batch filtering is most beneficial to their needs and adjust accordingly if those needs change.

The Product

The Website

The Mobile App

Impact & Outcomes

The newly redesigned Artura.org site officially launched as a desktop application in December 2024, and the iOS & Android mobile applications are launching in early 2025.

Reflection & Moving Forward

This project taught me the benefit of designing using a mobile-first approach rather than a desktop-first approach. Working with more limited screen space provides helpful design constraints and makes it easier to modify the design later on. This is also helpful in the development process of making the app mobile-responsive.

In hindsight, I wish we had the opportunity to talk to more target users to get their feedback on the design. Though we were able to connect with educators and academics through our relationship with Brandywine Workshop and Archives, we did not have much access to commercial curators or collectors.