Deezer Revamp

The past branding

The previous product had maintained its brand for over five years. While the former brand and interface were clean and neutral, they lacked a strong identity. As users were familiar with the brand’s existing style, this project required a delicate approach to avoid creating any sense of alienation or confusion.

The new brand guideline

The company wanted to achieve three aspects through their new brand: Bold, Fresh, and Quirky. The new visual identity in the interface had to embody boldness, trendiness, and a touch of swiftness. The goal of this revamp was to attract the company’s new target, Gen Z, while accommodating the comfort of current users, Millennials.

Using data that proves what’s effective as inspiration for a new feature

Existing data on the product indicates a higher stream rate when the app selects the best choices for users rather than presenting numerous items in a flat hierarchy, a well-known paradox of overwhelming choices that can lead to delayed decision-making. This was reaffirmed through the success of one of the Deezer app’s features, a track mix. The track mix is a selection of a user’s current favorite tracks that initiates a mix of other tracks inspired by these favorites. Given that the previous version suggested a multitude of items in a flat manner, I aimed to propose another feature using this proven strategy.

Empowering a hidden feature

Despite the app offering unique and compelling features compared to competitors, these attributes were not adequately highlighted to gain recognition from our users. The challenge lay in the placement of the feature within the artist page, a section that struggled to capture user attention unless they were specifically seeking information about the artist. Due to its reliance on lean-forward actions, this page experienced low visits, leading to overlooked tools like the artist mix, an unlimited mix inspired by the artist, proposing similar tracks.

The issue was further compounded by the format: a banner that resembled an advertisement and failed to attract user attention. To address this problem, I opted to relocate this feature to the most-streamed page, presenting users’ favorite artists in the form of a playlist rather than a banner. This strategic move aimed to enhance visibility and engagement with the valuable tools that were previously underappreciated.

Creating a visually appealing brand identity through the interface

Previous user feedback highlighted that the interface of the previous product gave the impression of being indistinguishable from our competitors. The absence of a distinctive brand identity on the interface failed to convey the immersive experience synonymous with our brand. Leveraging the opportunity for a rebrand, I aimed to introduce elements such as colors and typography that express our unique brand identity.

Playing with the brand identity

The new brand direction features a bold, punchy text background. The impact conveyed by the typographic images has inspired me to experiment with the interface. For instance, instead of a classic tab with lines, the new tab could be designed with bold highlighted typography.

Enhancing accessibility of user’s library

In the previous product, the library was organised in a list, necessitating users to navigate through each item individually. It was observed that users frequently enter sub-containers, such as the lists of favourite tracks, albums, playlists, etc., to access and consume their latest saved items. Recognising this user behaviour, I opted to enhance the accessibility of their library by showcasing their latest items in a scrollable grid. This visual representation aims to facilitate quick access to content, adding a personal touch to the favourite page.

Providing the benefits of collections

When users gather items like songs or artists, their intention is often to enjoy these collected items in a more relaxed, lean-back mode. In addition to the preview display of the collected items, incorporating a play button for the collection allows for swift access to initiate the music, providing a compelling reason to collect and build their library.

Enhancing accessibility

In the previous product, main actions such as play, like, or share were widely placed. By relocating them closer to the right edge of the mobile screen, I aimed to facilitate easier finger touch access to these actions.

Clarifying the signifier

In the previous product, users had to tap on the title with the arrow to view more content. This somewhat obscure signifier can be enhanced by displaying the number of items next to the arrow icon to clearly indicate the availability of more content.

Immersiveness

The cover image in the previous player served its purpose, but it didn’t deliver an immersive experience to the users. To enhance the player’s immersiveness with the content, I chose to design a full-width background using the cover.

Essentials only

One major issue with the previous player was congestion. Numerous controls were displayed at the first level without considering the frequency of user use. Consequently, the overall interface appeared disorganised. Simplifying control options and cleaning up were deemed necessary, leaving only the essentials at the first level.

Reinforcing the entry point

One of the most used features in the player is viewing the lyrics. However, the entry point, resembling a label on the cover, was not visible enough. Additionally, once the lyrics screen is opened, users no longer had access to the controls from the player, which was inconvenient. To address this, the lyrics could be displayed directly below the player, utilising the space to incorporate other useful information later on.

Improving title legibility

In the first exploration, my goal was to emphasize keywords in the title by dividing it into two parts: the highlighted keyword and sub-keywords. However, I received feedback that the overall title was challenging to read. Consequently, I opted to enhance title legibility by maintaining a single-line block and incorporating a small description field below.

Adding more uniqueness

While the “scribble” look and feel I attempted in the first exploration were refreshing and novel, it didn’t sufficiently convey the bold, strong, yet playful brand identity that the company aimed to rebuild. Consequently, I decided to enhance this aspect by experimenting with container strokes while also refining the overall interface appearance.

Optimizing the tab

While the prominent typographic tab in the first exploration effectively conveyed the brand identity, it appeared more practical to optimize space by transforming it into a minimalistic tab, especially since the “favorite” tab is the most frequently visited and utilized page. Users naturally seek quick access to their contents.

Evaluating each functionality

In the first exploration, I suggested a direct play button to preview the container (songs, albums, or playlists). While the functionality was intriguing for specific cases, such as the container of favorite tracks, it didn’t make sense for other types of content like albums or playlists, as users typically consume each item by type. Instead, I chose to replace the play button with an arrow as a signifier to guide users to explore more content. Additionally, I optimized the space in the title zone by displaying only the number of items in the container.

Safe zone for actions

It seemed safer and more legible to position button actions below the masthead, as opposed to the overlapping effect in the first exploration.

Improving title legibility

I optimized the space in the title zone by displaying only the number of items in the container.