Discogs Redux

Context

Why do people use Discogs?

Many records—especially those released by major labels back in the day when hard copies were the only way of owning music—are pressed in multiple countries at once for different international audiences, re-pressed/reissued months or years later if they gain popularity after their initial run, or reissued on another medium.  
Discogs acts as a single source of truth for collectors concerned about the minutia of those variations of a single published work. It allows them to accurately keep track of both what they have, and what they are searching for through digital collection lists and wantlists, respectively. Each item links to a specific release version page.  
People also use it to discover new music using its search tool to filter with high granularity by parameters like country, year, medium, genre/style and other selectors. Though it supports documentation of digital releases, it has a special emphasis on physical media, and also serves as an online marketplace for those media.

Project Scope

Focus on Mobile

For the purposes of this project I decided to focus on the mobile app part of the eco-system, as it is less mature compared to the website. Even with that limitation, the wide range of features available in Discogs means there are many user flows worthy of attention and refinement. Three pathways stood out to me as particularly poorly developed in my own experience as a record collector, some-time record store worker, and high-frequency Discogs app user:

Comparing versions of a single release

Filtering and searching within a collection or wantlist

Exploring the discography of an artist

Working Within Design System Constraints

Though ultimately I believe a full-scale overhaul would be better in the long run, I recognize that this isn’t always feasible or useful for products with so many users depending on it as a platform.

In light of that fact, rather than revamping look and feel completely, I took the opportunity to meticulously recreate the existing relevant screens at the component level. This way I was able to modify and extrapolate those screens using components endemic to the design system for my solutions, simulating the limitations of the real world.

Research

Talking to Discogs Users

To gather more data, I conducted interviews with four different discogs users. For each interview subject I used the same basic question flow:

Do you use the Discogs mobile app for finding the right version of a release?

Yes

How do you approach finding the right version of a record?

Are there any features you would especially like to see added to the app?

What prevents you from using it?

Interviewees

Owen

Owen is a university student and budding vinyl DJ who uses discogs as a way of keeping track of his own collection, to look things up on the fly when out at record shops, and to discover new music.

Jeff

Jeff is a record store owner that uses the app primarily to avoid buying copies of he personally already has, but tends not use the mobile version for tasks more complex than that.

Steve

Steve is a record collector who tends to use the app more than the desktop version, and similarly to Jeff, relies on it most “in the wild” to help remember what he has.

Jesse

Jesse is a record store owner who mostly uses Discogs on his in-store tablet to check prices on the marketplace. He rarely uses the mobile app, and in fact prefers to go to the mobile site on his phone rather than the app if he wants to look something up.

Synthesis

User stories

Consolidating what I learned from my interviews and my own experience of the app, I constructed three scenarios that cover the breadth of my selected problem areas.

Scenario 1

Version Comparison

A record store owner is appraising a collection to see if they want to buy it. The pressing of certain records makes a big difference in their value, and being able to quickly and accurately find the version you have makes a big difference in the quote you give to a seller.

Many popular records have over 100 different release variations, and trying to compare them on a small format screen with no ability to open multiple release versions at once can be a massive headache.

Scenario 2

Filtering and Searching

For people who have large record collections it can be difficult to remember everything they have. Especially in the case of DJs, for whom having a large library of music is paramount, older purchases can get forgotten over time.

Digital DJs have the advantage of being able to sort tracks individually into multiple buckets for specific genres, tempos, or moods; vinyl DJs are bound to the limitations of physical location for sorting.

Being able to search their own Discogs collection on mobile and filter by detailed metadata written into each release they have cataloged (criteria like genre, style, year, medium) would bring transparency and flexibility to the experience of curating a selection of music.

Scenario 3

Artist Credits

A collector visits a record store and finds an intriguing but unfamiliar release. They look in the liner notes’ credits and see a name they recognize but aren’t completely sure from where. They search for the artist on Discogs only to find that their profile doesn’t show any of the albums they have played on.

Currently the app can only show a list of works where the artist is a named author of the whole release. This hides the true extent of contributions from musicians who never had albums of their own, and makes it harder for music fans to learn more about the background of records they encounter “in the wild” away from a desktop.

Problem statements

I summarized these scenarios into three problem statements:

Version Comparison

Discogs users often have difficulty determining the exact version of a record they have, due to redundant release information at the surface level, and relevant data that is ill-suited to text representation.

Filtering and Searching

Users have little ability to search, filter, and tag the records in their collections and wantlists.

Artist Credits

Users are not able to explore comprehensive musician credits for a given artist, and are instead limited to works in which the artist is one of the primary/named authors.

Intervention

Recreating Discogs' Design System

Close-up UI Study

Before diving in to develop solutions, I needed to build out the existing visual components found within my three user pathways. This meant grabbing extensive screenshots of the app in-use, and reverse engineering the UI as accurately as I was able to from those images.

For any given UI there are many ways of getting the same visual result in a still image, and for that reason I think this was a valuable process as it tested my intuition as a designer about the best way to construct these design elements with the minimal information I had.

It also meant I became intimately familiar with inconsistencies and craft issues throughout the application as I tried to observe and replicate the minutia of the design system. In some cases, when it would have taken significantly more work to recreate a careless moment, I made edits. But for the most part I wanted the focus to be on fixing or developing processes in the problem spaces I defined, rather than letting the scope creep into full-scale UI overhaul.

Solution Guidelines

Overarching Goals

To better focus my efforts I reviewed Jakob Nielsen’s 10 usability heuristics. I found that a majority of the problems in my selected user paths could broadly belong to three of those 10, namely the principles of “Recognition, Not Recall,” “User Control,” and “System Status Visibility.”

To avoid too much cognitive load on the user, it is important to make relevant information available in the contexts where it is needed, rather than making the user rely on memory to make decisions while completing the task.

Project Example

Discogs users are forced to compare release versions by trial and error, with no feedback for release profiles that have already been evaluated. When the cover images are all substantially similar to one another, this can put a lot of strain on the memory of user.

While providing users with too many options can backfire and make the experience less positive, planning for multiple audiences—including power-users who want to take advantage of all the features of a product—is key to making a robust product experience.

Project Example

One area where user control is severely curtailed is in viewing their own collection list. Filters are limited to only 5 different physical formats, keyword search, and a number of “sort” settings. With all the additional metadata available for each release like genre, style, and label, among others, it seems like wasted potential for a more powerful product.

Complementary with “Recognition, Not Recall”, prioritizing System Status Visibility ensures that the results of a user’s action in the product environment are clear. Especially in the task of manipulating different views of data, a crucial concern of Discogs, ambiguity can lead to inefficiency and tedium.

Project Example

Here in the list of works by a particular artist, it isn’t clear to begin with what organizing principle the releases are sorted by. Only after going into the settings in the top right can a user determine that the master releases are ordered by “relevance,” an ill-defined metric that is somehow mutually exclusive with “most-collected” and “trending” as a quantifiable criterion.

Benchmarks

Abstracted Tasks

Discogs has wide market dominance in the specific niche of music database/market, so there aren’t really any notable competitors to compare approaches directly. Instead I looked for successful solutions to more generalized versions of the tasks I was trying to improve.

Comparison

Amazon App, Zillow

For this task I was looking for examples of products that showcased many different list items with multiple discrete properties. Marketplaces are a classic example of this flow and I found that Amazon’s mobile app as well as Zillow were managing that process of comparison explicitly in a relatively elegant way.

Both applications had specific tools made expressly for users to compare multiple items along matching criteria axes. I also took note of the varying ways users were invited to start that comparison process and create a selection from a larger list.

Managing Variables

Amazon App, Zillow

I knew that I wanted to give users more capability to build complex filter and search constructions. I was drawn to the “kids coding” tool Scratch as a model because I like the way that it makes the function of code more easily understood.

It uses a combination of visual organization and color coding, a drag and drop use-pattern, and plain language with connective words to improve “scanability” and streamline the creation process in the first place.

Sorting and Categories

eBay

The eBay mobile app does a good job of highlighting which “buckets” of results you are looking through and succeeds in making clear how to change your search parameters.

Process + Iteration

Solution 1

Easing Cognitive Load with Intentional Version Comparison

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

To make comparing versions of the same release easier I created a unique tool explicitly for evaluating multiple editions at once. To avoid relying on a separate tool for all comparison activities, I also made a point to reduce redundant information and make salient differences more visible after filters have been selected.

This gives users the best of both worlds: on-sight recognition of relevant release differences, and the ability to more granularly compare particular criteria among selected version candidates.

Walkthrough

Master Release Page

Pressing Superlatives

Created pressing superlatives that are easily accessible from the release splash page.

Version Explorer

Took “sort-by” out of filters and made it more easily accessible. Introduced a “tag” language to highlight the discrete properties each version possesses.

Filters Panel

Format Filters Panel

Format FIlters Panel

Filtered Version List

Brought tags in-use to the fore and eliminated redundancy in version descriptions so users focus on the salient differences between them. AI can detect when images of the cover are substantially similar to the point that it replaces them with the next most salient image once other things are removed from consideration.

Comparison Selection

If, when label images replace the covers, it still isn’t clear what version the user has, entering comparison selection mode by clicking the Venn diagram icon allows them to choose a set of promising candidates to evaluate.

Comparison Selection

Comparison Mode

Comparison mode makes explicit a process that is nominally possible but puts a lot of cognitive load on users by needing to remember items that they have and have not clicked on.

Comparison Mode

Tapping left and right sides of the screen navigates between the versions selected for comparison, allowing users to quickly compare images where slight deviations in text formatting make all the difference.

Comparison Mode

Collapsing the image viewer makes more room for other metadata.

Release Version Page

When a user has determined the version they want, “view release” takes them to the actual release profile where they can interact with it by putting it in their collection or wantlist.

Solution 2

Expanding User Control with Advanced Search Parameters

Missing on both mobile and desktop versions of Discogs is the ability to filter and search within a given user’s collection (as well as “wantlist”) with more than basic categories or raw keywords. Given the wealth of data fields for any given release (not least of which includes genre and style) this is a puzzlingly absent feature.

To solve this, I created an advanced search tool that uses an intuitive drag and drop ux pattern to arrange discrete criteria into compound filters. Connection and syntax words automatically populate, and tags intelligently reorder based on type, all to make the effects of the filter understandable to the user at the level of prose.

Walkthrough 1: Building Filters

User Collection Page

On the user collection and wantlist pages, clicking the newly-added spyglass icon in the upper right opens the advanced search tool.

Advanced Search Tool | Format

Expanding on the tag model I developed for version comparison, the advanced search tool treats release criteria such as country, format, date, and beyond as building blocks that can be flexibly combined to give highly specific results

Advanced Search Tool | Country

Advanced Search Tool | Date

Advanced Search Tool | Keyword

Filter Construction

When a tag is dragged into the creation panel, the “View Releases” tally auto-updates to reflect how many items meet the criteria.

Filter Construction

Certain qualifiers, like Country, will automatically introduce “or” between like elements that are mutually exclusive. Others, like genre or style, can accommodate both “and” and “or” operands. This is useful for distinguishing between items that meet any of the criteria and those that meet all of them.

Filter Construction

Other variables, like date, add immaterial connection words (in this case: “from”) to make interpreting the filter easier for the user.

Multiple Filters

Multiple compound filters can be used at once to show any releases that meet the conditions of one filter or the other.

Multiple Filters

To better view long constructions, the creation panel can be expanded using a sliding handle.

Advanced Search in Action

This user has created a relatively simple filter, the next screen shows how it is applied to the collection screen.

Advanced Search in Action

The filter displaces the search bar with an option to be hidden from view. The blue “twinkle” on the search icon indicates that the advanced search is active.

Advanced Search in Action

Hiding the filter bar leaves the same selection in place while expanding the viewport.

Walkthrough 2: User-Created Tags

User Wantlist Page

User-created tags are a natural extension of the tag model. In this example a tag is added to a record produced in Hawaii.

Release Page

The addition of the “My Tags” section to the release page makes for easy access to the feature.

Adding a Tag

Users are presented with a modal to help them add existing tags or create new ones.

Adding a Tag

Tag Applied

Solution 3

Facilitating Discovery Through Comprehensive Artist Credits

One of the most powerful aspects of Discogs is the ability to see all a musician’s work and contributions in one place. The mobile version limits the scope of visible discography to works released under the artists name.

To restore exploratory potential on the app, I introduced a “role” parameter that expands the visible discography to include credits for instrument performance, writing, and production, among several others. Structurally, this builds off the tag model established in the previous two solutions.

Walkthrough

Release Page

Users can access affiliated artist profiles through the “Credits” tab on any given release

Album Credits

Artist Page

Each credit links to a profile splash page where artist affiliations, name variations, and pseudonyms are displayed.

Discography Explorer

In addition to moving the “Sort by” selector to the surface level, “Role” automatically populates as a drop-down-style filter for users to choose what lens of contribution they want to view the artist’s discography through. By default, the latter is set to “Primary Artist”

Discography Explorer

A swipable carousel of options reveals the available categories for “Role”

Discography Explorer

Results

Design System

Reverse Engineering

The final design system was a mixture of original Discogs UI, modified original elements, and new additions meant to complement the existing library of components. Below is a diagrammatic example of the hybrid nature of the final results.

New Additions

Scroll through to see select components I introduced to the design system.

Version Explorer Header

Version explorer release card

Filter Tag [Applied]

Applied Tag Carousel

Comparison Mode Icon

Selection Icon

Advanced Search Icon

Edit Icon

Delete Icon

Confirmation Button

Action Icon

Action Span

Results Span

Advanced Search Tags

Advanced Search Tag Gallery

Compound Tag Creation Gallery

User-created Tags Module

Sort and Filter Visibility

Artist Role Selector

Validation

A/B Testing

Though the latter two solutions of this project ultimately had no direct parallel in the app—focusing on introducing features that didn’t exist rather than improving an existing, but poorly executed, user flow—the task of version comparison naturally lent itself to a side-by-side trial evaluating overall speed and efficiency.

Test Structure

To conduct the tests I created an interactive prototype of my design centered around the version comparison task. I then had two participants try to complete the task independently of one another in timed trials.

To make the results more meaningful, I biased the test to give the “control” Discogs UI a better chance by having an experienced user operating it, while a non-user was asked to complete the task using my version. Due to limited test subject availability I was only able to conduct this test twice.

The task: find this version of Lee Morgan's self-titled album

Country: U.S.
Year: 1972
Label:

Original UI

My version

Test Results

In both cases my improved version saw its user beat the control by at least 15 seconds. Though it is admittedly a small amount of data, it encourages me to believe the changes I made were decisively for the better.

Reimagining three key flows in the Discogs mobile app