An online social music streaming website with +3 milion users
visual design / ux
Plug.dj, an interactive music streaming platform, had the objective to go one step beyond in its position and improve facing its users. For that, was necessary an analysis of needs, a creation of new flows and a redesigned ux and ui. The objective was create a more ease of use platform, along a more attractive product, as well more complete, but keeping the soul and spirit of the Plug.dj, both in the way of using the platform and the current visual design.
My work with Plug.dj was mainly in two areas: the analysis of the old UX & UI and the creation of the new UX & UI and, related visual elements, the optimization and the creation of them.
Other work done was from the analysis and creation of the old and new customer journeys, to the prototyping of the new UX and designs, the competitors and customers analysis, or the creation of the use cases.
The work done with Plug.dj had main objectives: give to the user a less cluttered platform and environment, redesign the UX and the flows to give user more ease when navigate and use the platform, and give to the platform a more appealing, sophystcated and better feeling quality look, but keeping the soul and the essence of the current Plug.dj, as in our surveys it reflected by the users.
The previous work comprises the Company Analysis (including among others the customer journey or the objectives), the Opportunity Mapping (with the metric status, the UX analysis, or the user voice) and the New Strategy (i.e. the value proposition or the opportunities priorization). After that the new flows, news storyboard, new ux and the new designs were ready to the development, and eventually Plug.dj is rebuilt focused in the main objectives previously commented.
Going into detail and specifying, we can make a quick tour of the platform and comment on the most significant details:
Related to the "core" page in the platform, the “room” page, almost all the elements were restated in terms of usability and also in visual design. Keeping the same the video screen and the avatars, a left menu with shorcuts were added, as well the bottom bar were redesigned, adding a more conventional music platform UX, and changing specific flows (i.e "user as DJ"). The right sidebar now is only for the chat. With all of this, along the more evident visual changes (new icons, typography weight and type, spaces, etc.) along the more secondary (chat sidebar has now also the room background, but blurred, in order of homogeneity) makes the platform gain in terms of ease of use, clarity, perceived quality and appealingness.
With all of this, the elements are more focused and grouped by nature. All of this, along the more evident visual changes (new icons, typography weight and type, spaces, etc) along the more secondary (chat sidebar has now also the room background, but blurred, in order of homogeneity) makes the platform more easy to use, more clear and more appealing.
Some new color behavior was introduced, on order to make an experience more transversal and created a nested elements by nature. Thus, the elements related to DJ experience (buttons to start to play as DJ, the playlist selected, the record icon to communicate the an active playlist, the estimated time, etc) now are in a exciting pink color, making more easy for user to identificate the areas and elements related between.
In the same way, given the amount of elements shown in the screen, the rest of the colors were redefined, cleaning any color not necessary for hierarchy or functionality. The outcome was a very more clear and understandable and easy platform.
As well, some improvement were made like the Estimated Time when DJ enter in the cue, or the visual representation of the DJ's ahead.
Another topics: the fullscreen more, now more adapted to this kind of functionality, or the navigation via left menu allows user to have a quickly and easy way to make the desired action, because this menu works not as a web map but a real and useful navigation tool.
The "Room info", the page where user can find the info related the community, was totally redesigned. The focus was create a very visual place where, where user find the description of the room, the rules, share activities and also the best of the week related dj's and songs, as well related rooms.
Finding a community was a little bit uncomfortable before due, among other things, to the the lack of information about rooms. This particular topic was fixed with the behavior of the hover. In the new version, when user hover over a community in the "Communities" page, a description of the room, tags with music genres and the host is given to the user, making more easy understand if this room fits to his preferences.
Another topic worked on was the user onboarding. Due the big importance to understand the platform for newbies, a redesigned process was done, making sure that user is able to understand what is Plug.dj and what he can do on in the very first moment, and then adopting a kind of "doing-focused" onboarding style, accompany the user through the very basic actions, with the proper explanations about it.
The idea to redo the old website was a possibility in the project. Although finally this redesign was not undertaken, an initial design was done as we can see next.
At the very first moment, the idea was capture the user that arrives to the website for first time and generate the enough expectation to want to know more about the platform. After that, deliver a very clear understanding about what is Plug.dj (an "interactive online social music streaming platform") not just with words, but showing the platform itself. In the original website, the understanding and the benefits were a little bit confusing, and the visual focus were too much into the avatars but without the proper explanation, making difficult a quickly understanding.
The idea about the style was to make it more elegant and sophisticated, like the new style developed on the new platform. Of course, the mobile versions and the responsiveness were taken in account.