Teach you how to build a new SoundCloud website

It is worthy of the visual designers to intensive reading! Today, Medium, a foreign designer, shares the whole process of his revision of a music website, from the overall style to the search box, every detail has a very professional thinking. The revision is not a simple painting painting, to enhance the user experience is very critical, read through this article, after the revision will not have no clue to start, to learn slightly.

Why?

@ 10 Realities Why: SoundCloud is a cool place-listeners can focus on artists, get their latest music, and artists can post single or even complete albums to attract fans. But often users know that it's frustrating to interact with the platform.

SoundCloud feels heavy and outdated compared to the simplicity and aesthetic design of other music services. The Web site and mobile app experience are riddled with counterintuitive designs and awkward usage processes.

Nevertheless, I am still immersed in this community because I trust the services it offers. I want SoundCloud to be better.

As a user, my concern is:

A clean, intuitive functional interface

Learn more about the artists I'm listening to and discover new artists

Share and communicate with my friends

These basic features, the site is now doing a good job, but can do better. Look, I'll break it down ...

1. Navigation bar and player components

Problems that arise

I usually search for artist or song names, but the search bar is too wide. The widest state, the site has 1240 pixel width, the search bar input box has 668 pixels. Usually after entering a few words, automatic completion of the full function can be completed query.

The dark gray One is the player component, confusing mess.

The player component is at the bottom of the page.

Navigation bars are used to provide access to some links and features at any time you want. In a music streaming site, include pausing the current song, the next one, and the previous song. Although the player component is visible on every page, its position at the bottom does not visually convey its function.

Clicking on my username will appear in the Drop-down menu.

There is no visual instruction to tell me that the bottom (i.e. the down arrow) has a Pull-down menu, which is very strange to show. This site took me several years, and my intuition still tells me that it should point to my profile. I usually click here to go to my profile, likes and playlists.

Solution Concepts

Their current design (top) and my conceptual design (bottom)

The width of the search bar input box is reduced to 108 pixels, making room for the player component, plus the middle.

Important links are on the right side of the navigation and are no longer indented in the Drop-down menu. Avatar images point to the user's profile, and the icon on the right points to settings, favorites, playlists, messages, and notifications. The upload link is removed because it is not required to be used anytime. It is grouped in a profile page.

2. Information flow

The people you're paying attention to are releasing songs and playlists that show up here, the latest on top, like the Twitter timeline.

Current form of information flow

Problems that arise

It's hard to identify which song is playing. Except for the little Play/pause button, there is no style to highlight or highlight the current playing song with other differences. The music of the past still keeps the orange wave Shape progress bar, which is meaningless.

You can only see 3 to 5 songs at a time. A music streaming media site, one page should be able to show more.

The flow of information does not automatically scroll. I usually keep the flow of information in my browser, let it play songs, and do other things. When I go back to the page, I have to scroll down and browse the waveform to find the currently playing song. I usually rely on the player component to understand the name of the song and then execute the page search (CMD + F) to find my location. This process is inefficient and opportunistic.

The head image on the waveform is actually meaningless. They are too small to be visually distinguishable from the person leaving the message. Their only value is to let users know that there is a message on the music, and the number of messages has been displayed in the bottom of the image of the comment icon.

Do you know anyone who commented on this song?

What they expect when the user leaves the stream and returns.

The refresh of the information flow is slow and cumbersome. When I left the stream and returned, SoundCloud tried to show me the songs that were currently playing, which was great. But not every time is normal. Typically, it does this by rendering every song in front of the current song, which consumes a lot of memory, which is slower than normal page load (which looks bad). There must be a software solution to this.

Solution Concepts

Information flow concept map, I found some super songs on the SoundCloud to simulate the interface, the right column is fixed. The expanded dimensions, large illustrations, and visible waveform charts clearly mark the currently playing songs. In addition, more songs can be displayed in the same space.

There is an option to make the flow of information automatically scroll as it plays. Turning on this feature will allow a song to move to the top of the page as it plays, like the song in the Goldroom above.

It is clear from the number of comments on the song that most users do not comment. Comments can be visually distracting, so I added an option to hide them.

Mouse hover status and release time of track

Downloading, liking, forwarding, commenting, adding to playlists and sharing buttons are replaced by icons. These icons have fully conveyed their functionality and do not need to be translated into other languages. To keep the interface simple, the icon appears only in the hover state (but the current song will always appear)

As I mentioned before, I want to know more about the artists I'm listening to and discover new artists. The sidebar in the conceptual design highlights the current song artists, links to their profile. This part is very useful, especially when you listen to a song from a singer you are unfamiliar with the forwarding. It gives you a glimpse of their files, but does not need to leave the flow of information. Also shows how many fans they have, and an option that lets you choose whether to focus on them.

　3. Share

Sharing is an important part of SoundCloud user culture and music exploration. For now, forwarding may be the most common and effective feature that allows you to share a song with your friends and fans.

I like forwarding, but I think SoundCloud will benefit a lot if you pay more attention to private sharing and DMS. More site sharing means more time spent on the site and more exposure to recommended content (Spotify is doing quite well). Also, users often go back to a platform where friends share the exchange.

　The problems that exist

Sharing views does not encourage sharing within the site. To send a message, you have to move to the third label, and it's not obvious.

The first pop-up is the sharing view (left), not the message view (right). The embedded view (not shown) is doing well at the moment.

SoundCloud's design can be beneficial if it encourages users to take priority in social networking.

　Solution Concepts

Two labels are preferred for design recommendation messages, also retained for outbound sharing. including both in the same view helps to bring in new users and lets old users come back to see them.

4. Message

The current message system is in complete function. However, it can be simplified to enhance mobility between the flow of information and other pages.

Concept

All messages (left) and a set of dialogs (right)

When you click on the message icon in the navigation bar, the message view slides from the right side of the page, similar to the OS X Yosemite Notification panel.

The dialog list appears in a familiar visual form without interfering with the flow of information or other pages on the left. Click on a conversation and slide into the conversation view, much like a smartphone SMS application.

5. Notice

SoundCloud has two types of notices. Notifications related to account dynamics are displayed in a Drop-down menu in the navigation bar. A pop-up notification is also available on the page to indicate the dynamic of the song.

account dynamic notification (left) and song dynamic Notification (right)

　　The problems that exist

Account dynamic notification is not easy to understand. Users receive these kinds of notices: attention, comments in the @ reminder, playlists like and forward, upload music like and forward. Given the similarity between Twitter and the SoundCloud content structure, I would also like to have forward notifications with a preference of two times.

The song dynamic notification exists for a long time. Causing them to block things in the top and down menus of the right sidebar. Sometimes they will be stuck there, and if I go into the profile, the notice can still be seen.

My avatar is obscured by the error in the flow of information.

The error tip does not disappear on its own. I don't know why, they happen so frequently, they can cover the entire right side of the page (up to the bottom), unless I turn them off manually, only one at a time.

　Solution Concepts

When you click on the notification button, slide a panel from the right side, as I did in the conceptual design of the message. This pane can be scrolled, and no additional pages are required to view the notification.

The notification now contains forwarding like and two times forwarded. This is useful because the notification makes a platform sticky and subtly lets people get used to coming back often. In addition, it is interesting to know that friends are listening and indulging in the same content.

The dynamic notification style of the page is unified with the rest of the design, and will fade away as I expected, without interfering with anything important.

Thinking at the end

This is definitely not a series of radical criticisms and concepts. I consider redesigning the discovery interface, personal Data interface, Setup Panel, and playlist editor. How cool would it be if you could drag the song to the playlist on the right sidebar?

As I write this article, SoundCloud serves more than 175 million listeners a month. Apparently, they did a lot of the right things. Their platform still plays an important role in the discovery and distribution of music, design services.

We know that SoundCloud is an indifferent place for artists and similar audiences. Hopefully they'll start making great changes on the web and mobile apps. I'm happy to see more people I know use SoundCloud.