top of page

Discogs

Redesign project of a C2C/B2C platform focused on physical music collection organization, buying, and selling.

Problem

Although the Discogs app is not a bad service, it seems to focus on features that are not very useful to the average user. Most people use this service to track their vinyl collections and are not interested in selling or viewing their friends' music collections. The UI could be updated to appear more modern and in line with current trends. Overall, the app could benefit from some improvements to better meet the needs and preferences of its users.

Solution

I noticed that the UI of the software is not modern enough and certain features that are not likely to be used by most users are prominently displayed. To make the software more user-friendly, the UI should be updated to be more attractive and intuitive, and the most important features should be easily accessible to users at all times.

A significant portion of my portfolio is not accessible to clients due to non-disclosure agreements. Hence, I decided to display more of my UX design work. For this purpose, I have taken some applications that I think could be enhanced and rebuilt from the ground up.
 

This time, I have redesigned Discogs, a well-known app for tracking one's physical music collection.

ui-ux-desgin-service.jpg

Tools Used

Figma
FigJam

Photoshop
Creative Flow AI

My Role

Project Duration

UX/UI Designer

1 Week

Sketches

Sketches

In order to tackle the project at hand, I started by creating sketches. I understood that User Experience (UX) Design is not a straightforward process, so I skipped certain steps that would have already been completed in previous iterations. Using my experience with the app, I was able to make informed decisions and inferences. Despite the lack of data, I was able to tailor the sketches to the app's main purpose - which is to track physical media collections, specifically vinyl collections.
 

The sketches allowed me to ensure that the app's core functions would remain intact while improving the overall user experience and appearance. Key features such as the collection and wantlist views, as well as the search function for adding items to the collection or wantlist, were considered in the sketches.
 

By creating sketches, I was able to move forward quickly and generate ideas efficiently without wasting time.

sketchdiscogs.png

My roughest most preliminary sketches

UI Design

During the project, I had limited time to complete it, so I decided to move from sketches to Hi-Fi UIs. I felt confident and comfortable with my sketches, and as a skilled Figma user, I knew that I could quickly iterate if I needed to make any changes.
 

However, during the redesign phase, I realized the enormity of the undertaking. While I had sketched out all the core functions, I discovered that I needed to create many "in-between" screens to ensure smooth functionality during the prototyping phase. Thus, I made a conscious decision to prioritize the main features over creating minor ones such as 15 toast notifications, for instance. The priority was to focus on the main functions to make them work smoothly.

Redesign Comparison

I want to display the new design, but first I need to highlight some of the improvements.

In the previous version, when you clicked on 'login' or 'sign up', the browser would open to complete the process. To improve this, we can keep the login/signup process internal, so that the browser doesn't need to be opened.

I have presented some screens that demonstrate how an elegant design could solve the issue of an older-looking appearance. This design provides easy access to all major features from the home screen (collection or wantlist), as well as from most other screens.

Prototyping

Prototyping

Animations are a crucial aspect of app design that should be considered from the beginning of the design process. They can convey information, add style and personality, and reduce confusion.

As a designer, I always start thinking about how motion design can improve the app from the sketching stage. For instance, in this project, I knew I wanted to incorporate a carousel to display album artwork from the beginning.

This not only showcases the beautiful artwork but also helps with quick navigation to the core features of the app such as purchasing albums from the wantlist. During the prototyping phase, I aimed to showcase as many features and interactions as possible to create a functional and user-friendly app.

Flow 2_512p-50fps.gif

(Press R to Restart the Prototype)

Next Steps

I had a lot of fun working on this project, and I might consider returning to it in the future. If I do, I would like to conduct user testing, improve the design, and add some non-core features. This project could be taken to the next level with more time and effort.

Final Thoughts

I have been quite occupied lately, but I am pleased with the outcome despite not spending much time on it. I managed to complete it within a week, which made me realize how much I can achieve when given a longer timeframe to work on something. Having more time allows me to double-check everything and ensure that it's perfect.

bottom of page