Call: 347-559-3778

Copyright 2019 by Lu Chen

Re-Design the Amazon Prime Music App

Re-design the UX and UI of the Current Version of Amazon Prime Music App

Project Overview

In my Advanced Website Design course, one of the assignments is choosing one website or one app to re-design the UX/UI. I chose the app of Amazon Prime Music because I have complaints about it for a long time.  I was very excited about this assignment because I finally got the chance to "fix" the problems I perceived. I re-designed both the UX and UI of the app. In this project page, you will see my whole re-design process, and I also did the front-coding of the UI.

This is an individual project. 

  • UX & UI Critique

  • Wireframing 

  • UI Design

  • Prototype

Frame the Problem

In this re-design assignment, we are required to conduct the UX and UI critique to identify the re-design space. For the UX critique, I chose to review the design process of the current Amazon Prime Music App to understand the designer's decision-making and evaluate if the current design is addressing the problems the designers perceived. The design process can be found in the designer's portfolio (http://simonpan.com/work/amazon-prime-music/). For the UI design, I used Jakob Nielsen's 10 heuristics to evaluate the UI.

  • UX Critique 

Based on my understanding of the documented design process, "easy wayfinding", "personalization" and "leveraging the value of the whole Amazon Prime" are the key elements of the design solution.   

Easy Wayfinding 

In general, the users can quickly navigate the app based on their high level interest. In the home page, the menus at the top and the bottom provide users with clear information about what the users going to see.

 

However, the content of the main body of the screens are a little bit overwhelming for me. I think the design intention is to let the users know there are lots of fascinating music content to choose. While this is consistent with the vision that “unlimited content with best deals”, the music content are not well organized. The “Setting” page has the same issue. The features are structured in a confusing layout.

The two screenshots of the Browse page.  As you can see, the music are structured without obvious rationale. I think this is the main reason why I feel the content are overwhelmingly rich because the unorganized content breaks my train of thoughts and thus break my smooth browsing experience.

The screenshots of the Setting page. Why “Sleep timer” is located between the “Music Mode” and the “Music Purchase”? The introduction of the features are sometimes on the main screen and sometimes on the sub-screen, which may unnecessarily increase the user's cognitive load.

Personalization

“My Music” is the hub of the user's personal records. The music are archived by the playlists, artists, the albums the songs and the genres. While this is very nice to review my history, the intention of the layout is unclear for me and I don't see the personalized design here. 

The screenshots of the My Music page. If I go to the “My playlist”, I see “ Auto playlist”, “ My playlist”,  and “Followed playlist”. All the music listed on the left screen have been played recently, but I don't know how they are listed under different categorizations since I didn’t do this categorization by myself. I don't know what “Auto playlists” and the “Followed playlists” exactly mean here. The blue dots seems randomly sit there because I didn't label any music. Basically, I feel lost in My Music.

Connect to Prime

The music streaming service of the current app is satisfying. However, if one of the business goal driving the design is to promote the whole bundled service of the Amazon Prime, the current design doesn’t explicitly show this intention. 

The screenshots of the Sone page and the Playlist page. It is good for the user to know what other customers also listened to, but it would be great if the user can get other relevant multimedia recommendations. So far, there is no touch points for the user to get access to other prime services. 

  • UI Critique 

In general, the UI design of the current app is excellent. The only thing I want to do differently is the "Aesthetic and minimalist design" based on the Jakob Nielsen's 10 heuristics. 

Aesthetic and minimalist design

We always want to impress the user with tons of content. But rich content doesn’t have to be presented in a busy way, especially when it comes to the tiny screen of the mobile devices. 

The screenshots of the Browse page, the Playlist page and the Album page. The cover posters are clustered by the theme. It is eye-catching but distracting. I feel there are too many visual elements in the pages which may undermines the user's navigation.

 

From the UX and the UI critique, I think the main issues of the current design are:  

UX

  • The content structure hindered the wayfinding

  • The personalized features are not valued by the user due to the confusing design

  • The Prime's bundled services are not connected 

UI

  • The content layout is confusing

  • The too-much visual elements distract the navigation

Solution Exploration

Re-structure the Content

The content are categorized into three groups in the HOME page based on the three typical user needs:

  • New Releases:

  • Popular:

  • Recently Played: The user continues the activity.  

The user explores the new music;

The user knows what the music trend is;

Personalized My Music

The content are grouped to assist the navigation based on three typical personal needs:

  • My Favorite:

  • Recently Played: 

  • Create New Playlist:

The user directly goes to the music they like most; 

The user quickly recalls the activity;

The user immediately takes the action. 

Leverage Prime's Bundled Service 

The user can get access to other relevant music resources as well as the books about this topic:

  • People also listened to: ​​​​

The user gets the music recommendations through knowing what other people like;

  • Books relevant about this topic:

The user gets the access to Amazon's books service. 

 

Based on the wireframing above, my re-design solution focus on: 

UX

  • Re-structure the content

  • Emphasize the personalization of My Music  

  • Add the entrance to the bundled Prime service 

UI

  • Simplify the layout 

  • Simplify the visual elements

Solution Validation

  • High - fidelity UI Design Comparison

HOME

Before

After

NEW RELEASES

Before

After

MY MUSIC

Before

After

ACCESS TO BUNDLED SERVICE

Before

After

PLAY THE MUSIC

After

Before

 
  • Prototype Demo Video

Learning Design for Adult Learners
Dashboard Design for Policy Makers
Data Analysis & Machine Learning
Intelligent Tutor for Children
Robot Design for Elderly People
Re-design UX/UI of Amazon Music App
Conversational User Interface Design
Show More