Discogs Redesign
Discogs is a music database and marketplace that hosts the world’s most active exchange of vinyl records. Users can create a catalogue of their collection and buy secondhand records from sellers. I’ve long been interested in the user experience on the website. Do members find the website engaging and visually appealing, and what frustrates them about the Discogs experience? I explored these questions and more to identify problems I can solve with a website redesign.
You can view the Figma prototype of my redesign here.
Tools Used:
Figma, Adobe Illustrator, SurveyMonkey
User Research:
To understand their needs, I sent out two surveys and conducted a full UX audit. This formed the basis of my research for problems to fix in the user experience.
The first survey I created focused on the database, including rating releases, the collection feature, and the Release page. The second survey centered on buying and selling records in the Marketplace. I wanted to know what buyers consider essential information: is the country of the seller a deciding factor? Do they care about seeing actual pictures of the records they are buying? I received 65 responses on the first survey and 109 responses on the second, giving me a wealth of data to explore.
Here are some of the observations I made that steered the direction of my redesign. I asked Discogs users what they consider the most important information on the Release page:
The release info, cover art/images and marketplace were highly selected. However, the average rating, reviews and recommendations were each chosen by less than 20% of respondents. Why are these sections neglected? One possible reason is the visual interface and how information is presented. Take the “Statistics” section on the Release page:
Stats are presented as just numbers, bare-bones and lacking in appeal. Infographics could present that information in a more visually engaging manner.
The survey on the Marketplace gave me an understanding of the buying and selling experience, including common issues that users face. There was one result that surprised me, and went against my initial assumptions. I assumed that I should add images of the records to the Marketplace page. However, this was the result when I asked the survey takers this question:
Most users deemed this not so important or not important at all (about half the respondents). On the current website, the vinyl listings on the Marketplace do not include images of the actual records. Based on this survey result, it appears that most users don’t have an issue with that, instead relying on the seller’s comments and grading for the record to determine the product quality.
Insights such as these from the surveys helped me narrow down which pages to target for the redesign, as well as what changes to make. I also completed a full UX audit to identify strengths, weaknesses and pain points in the user experience. I considered aspects such as navigation, visual design, content responsiveness and usability.
I decided to target four webpages on Discogs: the Release page, Marketplace page, Wantlist page and Collection page. Below is a quick roundup of the improvements I aimed for with the redesign.
- Release page: revamp the visual interface by making it less text-heavy. Present stats in a visually appealing manner. Add an image carousel for cover art / inner packaging.
- Marketplace page: Position key filters for seller country and media condition above the product listings. Match the new layout of the Release page.
- Wantlist/Collection page: add a filter option for seller country, a long requested feature for the Wantlist. For the Collection page, match the new layout of the Wantlist page.
Release Page:
With the previous goals in mind, I started by sketching out possible layouts on paper. Below are two layouts for the Release page:
Layout A sticks close to the original interface, while Layout B has a main header section and then the remaining sections below. I created a wireframe on Figma for Layout A and tested it with the target audience (vinyl collectors and Discogs users). A screenshot of the wireframe is shown below:
While I initially considered the above layout, I decided against it based on on user feedback and reviews by design peers. The information isn’t well organized and the visual hierarchy isn’t clear. I switched to Layout B for the prototype, which turned out to be a more successful interface:
This interface has better organization since the hero section contains the most important elements for the Release page. A dividing line and change in background color clearly separates it from the rest of the page. I decided to keep a white background for the hero section to standardize it for any artwork displayed.
I tested the Release page with the target audience and they successfully accomplished the tasks I set for reaching the Marketplace, Wantlist and Collection pages. Feedback on the visual layout was positive, and users felt a sense of familiarity with how the page relates to the Discogs website.
I made a few changes to the Recommendations section as well. The screenshot below is how it currently looks on the site:
I honestly didn’t understand what the eye icon meant when I first visited Discogs. I assumed that if I clicked I could view the cover art in a larger size. Turns out it’s the website’s Wantlist icon! While I appreciate this as a ‘quirk’ of the website (the records you are keeping an eye on), it’s confusing for the user. I decided to replace it with a more standard Favorites icon: either a heart or a star. I went with a star, since the heart would create its own confusion: your ‘loved’ records are the ones you already own. Below is my adjustment for the Recommendations section:
Marketplace Page:
Each release on Discogs has its own Marketplace page, where buyers can view listings that have been posted by sellers. The main problem I aimed to address is the inconvenient display for the filters. Below is the interface for the current page on Discogs:
The filters are in a column on the left side, and there are more filters than necessary. Most buyers want to check for two things: the media condition and the seller country. Why not place these at the top for convenience? I sketched out a layout for this solution on paper:
I then created a clickable wireframe on Figma and prepared it for user testing. In my testing sessions, I asked the users to imagine that they are only interested in a perfect record. How would they filter the listings for a mint media condition? All the participants completed the task successfully and found it easy to accomplish. Below is my redesign for the Marketplace page with two filters. I also adjusted the layout to match the Release page.
Wantlist/Collection Page:
The main problem on the Wantlist page is that there is no filter for seller country. Users have complained over the years that they want an option to filter their Wantlist by the country of the seller. This is the current Wantlist page on Discogs:
I started by sketching layouts for the redesigned Wantlist and Collection pages. These are displayed below:
I then created wireframes for the Wantlist and Collection pages with placeholder content and information. I carried out multiple user tests with the target audience that involved tasks such as filtering for a specific country and adding a record to the Collection. The wireframe for the Wantlist page is displayed below:
The prototype of the redesigned Wantlist is displayed below. The prototype demonstrates the interactivity, as the user can filter for records from the United States and then view the listings that match. In the user testing sessions, I asked the users to imagine that they only want to buy records from the United States. How would they navigate to the Wantlist from the Release page and accomplish that? All the users completed the task successfully, indicating that the user flow is easy to grasp.
I included a Collection page in the prototype to ensure that it matches the layout of the redesigned Wantlist. I also wanted key actions from the Release page (such as adding and removing from Collection) to be testable in the prototype. While I did not make any major changes to the Collection page, it was essential for verifying the user flow and key actions during the user testing.
Takeaways and Next Steps:
One of the main challenges in this project was creating page designs that can be standardized across millions of releases. I had to consider how the Release page could work for any cover art as well as missing/incomplete information. I also kept in mind that the redesign should feel familiar to Discogs users, solving the problems while maintaining the ‘feel’ of the website. The database quality is likely part of the charm for users, who visit the site to find specific information about their records. I was pleased that the Discogs members who viewed the prototype said that it keeps the ‘feel’ of the website.
As for next steps, there are many cases that need to be considered. Discogs also sells CDs, so the redesign needs to include changes that accommodate that format. The Marketplace page also needs to be viable for multiple releases and formats. Further rounds of testing are necessary for those alternate layouts. Within the scope of this project, I am confident that the solutions in the redesign address the identified problems and improve the user experience on Discogs.
