top of page
metro 1.png

Letras Lyrics Page

A strategic redesign for the most viewed lyrics page in Latin America

lyrics thumbnail.png

Overview

ABOUT LETRAS

Letras is the largest song lyrics website and mobile app in Latin America. With 20 years of existence and around 50k visits a month, the website is focused on content, simplicity, and efficiency of use. At this point, Letras’ interface is imprinted in Brazilians’ minds, making redesigns a challenge so big that it is probably not worth it.

CONTEXT

In 2023, the product team worked on a website facelift. Style libraries were updated, and patterns were created. By the last quarter, we started working on solutions for the main parts of the product.

SCOPE

I was tasked with the exciting redesign of the lyrics page, the most important page of the product, where the majority of traffic happens, with the rest of the website visited by only a small fraction of users.

 

This page is constantly updated in small pieces but hasn't been redesigned in several years. I broke down this big project into smaller issues, the first one being an update to the page's navigation, controls, and basic structure.

Identifying issues

MAIN ISSUES

Starting as usual, I organized a meeting with stakeholders to discuss the project's scope. The discussion highlighted several problems to address:​

  • Inconsistency between web and mobile solutions.

  • A need to increase the medium session duration across the product for enhanced revenue.

  • Identification of potential usability problems.

letra kickoff.png
CONSTRAINTS

We also took the opportunity to discuss what shouldn't be changed, and as is common for legacy projects, the list was a bit challenging:​

  • Not removing or moving any ads, as they are the source of revenue for the product, and all of their placements are carefully and constantly studied by the team.

  • Maintaining the interface clean and content-focused. Even with the substantial number of ads, our users should not feel overwhelmed.

  • Keeping the start of the song as high on the page as possible with the intention of being straightforward with the content while also improving SEO.

  • Keeping lyrics and song title together for better readability and allowing the entire song to be easily copy-pasted.

Collecting user feedback

I collected user feedback from customer support’s documentation and reading through our reviews in the Play Store. I was able to support some of my hypotheses and pinpoint other important issues to think about:

User annoyance with the volume of advertising, emphasizing the importance of a clean and concise design.

Too many ads
It's about collaboration

Users’ unawareness of the collaborative nature of the website, with requests for specific songs indicating a need for improved visibility of user-contributed features.

Responsive inconsistencies

Requests for features available on desktop but not visible or accessible on mobile.

Studying the UI

Among the identified issues, usability problems were the most straightforward to address. Analyzing Google Analytics events, heatmaps, and conducting a heuristics evaluation led to the identification of areas for improvement.

Letra 10.png
MAJOR ISSUES

1. Menu icons lacked familiarity, with labels appearing on hover, making it challenging to scan.

2. The translation button, the most clicked area on the page, had low visibility and inconsistency with the mobile version.

3. In the menu, less-used features shared the same hierarchy as more relevant ones. ​

4. The breadcrumb is barely touched by users, and is pushing important content down the page.

5. The number of views seemed like irrelevant information with a high visual hierarchy and cluttered the interface.​

6. Letras Academy’s promotional card affected content visibility and the perceived ease of copying the entire song.​

7. Collaboration information with low visibility, missing the opportunity to encourage collaboration and inform the user about the premise of the product.

8. Very low affordance on the mobile menu.

9. Block with albun information existed on mobile, but not on desktop.

Planning priorities

Addressing problems was not the sole focus; the project aimed to implement long-awaited features. Stakeholder discussions established priorities, resulting in plans to integrate a karaoke feature, stack original lyrics and translations side by side, and decrease marketing for Letras Academy to maintain a content-focused page.

1. Keep it content focused

Lower marketing for Letras Academy, as we wanted to keep the page content focused and avoid being invasive.

2. More view options

Staked original lyrics and translation, in addition to side by side.

3. Karaoke

Start planning to integrate the upcoming karaoke feature.

The first prototypes

Considering the identified priorities and problems, I began developing the first low-fidelity prototype and gathered feedback promptly.

CHANGES AND FEEDBACK

Most changes took place on the page's controls on both mobile and desktop, the most important being:

1. Visible translation button with label, making it more perceptible. But I received suggestions to change the placement so the title and lyrics would be closer.

2. Tabs to switch between the page's core content—lyrics, karaoke, and the Academy class—and its real content. Giving the Academy link a place to stay that is clear but not disruptive. Feedback showed me that this was actually too hidden for karaoke.

Letra 9.png

3. Most-used menu options were displayed on desktop, less relevant ones were placed in an overflow. To compensate for increased visibility, unlike the previous version, they are not fixed and disappear on scroll.

4. Options are now more visible on mobile, as is the translation button. This ended up being not a great idea because the control bars so close to the advertisement that could possibly make the options less apparent and also cause annoying miss clicks on the advertisement.

My final version

The initial prototypes in low fidelity faced various critiques and experienced multiple rounds of refinement, ultimately culminating in this final version.

Letra 3.png
MAIN CHANGES

Following the low fidelity prototypes propositions, the high fidelity one also focuses on apprimorating the page's controls. Different from the last prototype shown in this case, some structural changes are also applyed.

Letra 5.png

1. A toggle tab was introduced to switch between lyric and translation.

2. The Letras Academy tab has been added with a premium feature icon.

​3. Cleaner, more recognizable icons for the menu, remaining unfixed during scrolling to prioritize content.

4. Karaoke button so we can start planning for this future feature

Letra 6.png

5. A fixed options button on mobile was introduced with low contrast to maintain a clean page.

6. The Academy card was relocated lower on the page, pushing the content to the top of the page.

Letra 7.png

7. The collaborations section was emphasized with heading and a call to action.​

Impact

This project has been a journey of thoughtful analysis, strategic planning, and small, but very impactfull, iterative improvements. The process involved not only addressing identified issues but also embracing the chance to introduce valuable enhancements. Through user feedback, collaborative discussions, and a keen focus on priorities, when implemented, the new version will impact the product positively in several ways:

Less clutter with space for advertisement

Most users only want to see the lyrics and move on. This new approach gets rid of unimportant information and pushes content uppwards in the page, making it feel easier to access the lyrics. 

Those changes have the pottential of decreasing complaints about ad exessiveness and decreasing bounce rate, while guiving more space for experimentation on ad-placement. 

Highlights important features

Important buttons are more visible and accessible, solving one of the bigger user's complaints about the page. This may appear visually small, but has the pottential of reducing these complaints and access to usefull features can increase retention rates.

Strategic Academy's position

With the new sale's strategy for Academy, it's new call-to-actions are strategically placed, allowing them to be ignored by users who are not interested, but still visible and aproachable for subscribers and new interested users. Less agressive sales tactics have been proven to improve retention and brings Letras to the foreground again, which is the intent of the product.

Promotes the product as community built

Letras is one of those products that are only possible due to its userbase. So having such a low visibility on it's contribuition features and credits not only made lots of users believe the content was AI generated or internally created, it also made contributors not feel rewarded. A higher visibility on this aspect of the product can increase contribuitions and collaboration, making our database even richer.

flashcards thumbnail.png
VIEW NEXT PROJECT

Letras Academy's Flashcards

Optimizing language learning.

bottom of page