Logo on white backgroundLogo on black background
Back arrow black
RETURN TO HOME

Contributors

UX Researcher - Elsa Amri
UI Designer - Elsa Amri
Visual Designer - Elsa Amri

Last.fm App Redesign

This project involved redesigning the Android mobile application for Last.fm using existing user feedback regarding its look and functionality. The objective was to improve the look and feel of the app by modernising it, whilst also incorporating more features that were previously exclusive to the website. An analysis of the existing app was conducted in order to better understand user expectations of the app.

WHAT IS LAST.FM?

Last.fm is a music app that tracks (scrobbles) your listening history from Soundcloud, Spotify, Deezer, and other music apps. The app also allows you to ‘love’ specific tracks, as well as view your personal artists, albums and listening charts. The website lets you view charts (most popular artists and songs), recent releases and most loved tracks within a certain time period. You can also socialise with other users and save your favourite tracks.

Research
Old last.fm app designOld last.fm app design

Heuristic Evaluation

In conducting a heuristic evaluation, these are the three most critical areas of opportunity that the app had in improving the user experience.

#1: VISIBILITY OF SYSTEM STATUS

Majority of the app functions redirect the user to their web browser. There is no clear indication of when this is about to occur (i.e. a warning popup), limiting communication with users.

#5: ERROR PREVENTION

Users have to rely on the 'Back' button on their device if they tap a link that opens their web browser. There are no measures in place to ask the user if they are sure about actions before performing them. Providing no clear indication of which links are external or internal places the burden on users to recall this on their own.

#7: FLEXIBILITY AND EFFICIENCY OF USE

Due to most of the app features being external (redirected to the web browser), there is little customization and flexibility provided to the user in how they use the app. There are very few opportunities to personalise the user experience because of the limited app functionality.

Last.fm and Playstore app icons

User Feedback

I reviewed user feedback of the existing app by analysing the reviews left by users on the Last.fm Play Store App page. By looking at the complaints and feedback provided, I was able to discern what the key issues were with the existing app.

APP REVIEW OVERVIEW

    

As of the 29th of September 2020, this average was derived from 77,683 ratings, the majority of which were 1 star. A few review quotes can be found below.

“The app should be more than just a scrobbler and some charts. Last.fm is a social network.”

“It opens all the links and all the interaction is with the browser, it isn’t an app its just a shortcut for all the pages.”

Affinity Mapping

I reviewed the feedback users had provided on the app and organised the most prominent concerns in an affinity map. Through this process, I was able to discern what the top-level or key insights were regarding how the app could be improved.

Affinity map
Affinity Map
INSIGHT 1: Incorporate more web features in the app to limit browser-reliability.

Users were most vocal about how most of the app functions redirected them to their mobile browser. It seemed that the app was only useful as a basic scrobbling platform, but all other features were inaccessible through the app itself. This was a point of frustration for users who would have preferred that the app incorporate more web features without redirecting users to the browser.

INSIGHT 2: Improve the visual interface of the app by adopting a modern feel.

Users also felt that the app interface was not appealing. They wanted a more modern or aesthetic way for their music library to be displayed. There was also frustration in there being only one way to view tracks (in tile mode), and users would have preferred multiple options (such a list mode) that they could then choose from according to their preferences.

INSIGHT 3: Enhance the social elements of the app to encourage building a network.

The lack of social features in the app was also a point of concern for users. They wanted more ways to interact with their friends and share music interests in the app. Despite the website including these features, users wished that the app would also provide them.

Ideate

Target Audience

MUSIC AFICIONADOS

This applies to users that fervently use the app to record what they listen to, and regularly check in to view their history. They want the app to accurately document their artist and song preferences, and be able to discover other artists and music. They may also want to use the social features of the website through the app.

ORDINARY LISTENERS

This applies to users that mainly want to use the app just to track their listening history. They may use the other features of the app from time to time, but ultimately their main objective is to build their personal library that they can review occasionally.

Personas & Task Flow

Based on my research and understanding of the target audiences, I was able to develop two personas. These different personas highlight the two types of users mentioned above, who would be most likely to use the Last.fm app. I was then able to create task flows according to what the persons would want the use the app for most.

UX Persona - VanessaUX Persona - David
CURRENT Task Flow: LIMITED FUNCTIONS
Current task flow for last.fm
NEW Task Flow 1: Playing A Top Charting Song
Task Flow 1
NEW Task Flow 2: Viewing Music Library
Task Flow 2

Wireflows & Wireframes

Before proceeding with high-fidelity prototypes, I designed wireframes of each screen that the final prototype would consist of. I also linked the wireframes together to create a wireflow that would show the overall architecture of the app.

Wireframes
Design

Colour Palette

The primary font used by Last.fm is the National font. I decided to not change their primary font, because I did not want the redesign to completely change the app UI. I did adopt a second font, Avenir, to use with numbers, because I felt that the numerical characters fit the design better.

Colour Palette

Typography & Colours

The primary font used by Last.fm is the National font. I decided to not change their primary font, because I did not want the redesign to completely change the app UI. I did adopt a second font, Avenir, to use with numbers, because I felt that the numerical characters fit the design better.

Typography

Buttons & Iconography

I redesigned the UI elements of the app to reflect a modern a feel. I made sure to incorporate the brand colours of Last.fm, whilst also adopting a new look.

UI Elements
Prototype
*FOR ANIMATED PROTOTYPES, VISIT:
BEHANCE.
**Click to images to view in full.

Onboarding

The onboarding experience takes users through a quick preview of what the app consists of. It highlights some of the key features that users might be interested in. Following this step, users will then need to sign up or login.

Onboarding 1Onboarding 2

Profile & Menu

Once logged in, users are taken to their personal profiles. Here they can view their current song favourites, recently listened to songs and their top artists, tracks and albums. The menu page provides users with the main sections of the app.

Your profileYour profile 2Menu

Obsessions & Loved Songs

As users add their favourite songs to specific lists, they can use the app to view these songs. They can add or remove songs from these special lists at any time.

ObsessionsLoved Songs

Reports, Home & Player

As users record their listening habits, reports are generated that can be viewed weekly, monthly, yearly or according to custom dates. The homepage allows users to discover new music and artists, and what their friends are listening to. The updated app also comes with its own music player that users can use to play tracks within Last.fm.

Listening reportHome screenPlayer screen
Light mode screens
Dark mode screens
Reflection

Summary

Overall, my Last.fm App case study was an extensive and insightful process that allowed me to better understand the nuances of user experience design. I was able to redesign the app experience so that it provided more functions for users, whilst also incorporating a more presentable visual outlook.

NEXT STEPS

I was able to use a variety of research methods, but I did not spend time speaking with users directly, either through interviews or alternative means. Having direct conversation with users might have allowed me to gain more authentic data on the user experience.

Zoom Case Study

Arrow symbol

Contact Details

EMAIL
elsa.amri@gmail.com
SOCIAL
Links available to the right
Logo on black background

Say hello!

Arrow symbol
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form. Try again.