Apple, the company that once used the iPod ended the CD era, changed the entire music industry, and had a huge impact on the way people listen to music, is now facing a situation where
In light of this, my small team of six fellow Apple Music subscribers and I set out to redesign the mobile app, concentrating primarily on the search features.
🕓 4 weeks, 2022
📱 This is a student mobile redesign project, we have no employment relationship with Apple
🏷️ Consumer, Music Lover, Music apps
Apple Music is one of the top destination for users with lots of local files in library 💿, but not for Music Explorers.
I started the design with an exploration for our key users: Music Explorers.
I use search function millions times, especially when my favourite singer releases a new album.
Based on research, we summarized the key pain points from current interfaces.
🧐 Having trouble finding music
🔍 The music browse categories are unorganized with a confusing hierarchy
👀 Having trouble discovering the favorite and ideal playlist
So how might we create a more attractive music app where people can have better accessibility to find music 🔍, easier to explore music💡and get useful bites of playlist information?
Based on current pain points, I did some explorations and iterations on features, user flows, and interfaces.
As a team, after several meetings, we compiled a number of ideas based on the use cases for each pain point and worked with the cross-functional team to complete the MVP.
- Difficult defining the state of the switch button whether the user is in Apple Music or Your Library
- From our usability test result, one in third users are facing frequently mistakenly searching in Your Library rather than Apple Music
How might we create an integrated surface where users can have a better visibility of system status and clearly search for all the music in one place while still being notified that the music is also in their library?
I tried to incorporate a new flow where we removed the switch button and show results all in one place - from what's relevant to more exploratory insights.
Option 1
Search for songs when there is a cursor displayed under the song title and artist.
Pros
· Easy to understand
Cons
· More space needed
· Vision accessibility not as great, hard to read the text
Option 2
Search for songs when there is a cursor displayed in the middle blank space.
Pros
· Easy to understand
· No extra space needed
Cons
· Might be inconsistency when Artist’s name is taking more space
· Low scalability
· Weak localization
Option 3
Search for songs when there is a cursor displayed as Apple Music library icon with 5 display options
· Icon is positioned in the bottom right corner of the album image
· Icon is positioned in the top right corner of the album image
· Icon is positioned above the “more” meatball icon
· Icon is positioned to the right of the song's title
· Icon is positioned to the left of the “more” meatball icon
Pros
· High scalability
· High localization
· Design is consistency with Apple Music system
· No extra space needed
Cons
· Need some learning to understand the icon if user is not familiar with Apple Music library icon.
After discussion and voting on 🙋, we have the following
✅ Icon is positioned to the right of the song's title
Pros
· Icon display will not blend with the album image
· Wouldn’t be confused as an action button
· Easy to read
· Follow the same icon pattern that Apple Music has for explicit content right now
· High scalability
· High localization
· Design is consistency with Apple Music system
· No extra space needed
Cons
· Intermediate difficulty to understand, need to be familiar with Apple Music library icon.
With the user testing, we got some interesting feedback about users’ need, Therefore, I did several iterations and introduced some new features.
| How can I view my search history?
Therefore, I did several iterations and introduced some new features.
🔖 When click on search users will be able to access the search history
🈵 Swipe left to delete a single
search
🚮 Full search history can be cleared with a single tab
| How can I find a song with a particular line on my mind but not the tittle?
With this question in mind, I explored and designed lyrics search function within the search page.
Song titles and related lyrics will displayed when users type keywords into the search function.
⬅️ The relevant lyrics will be presented like this
How might we make it easier for users to enjoy browse music categories and discover content they interested more quickly?
☑️ I tried to add a sorting option for the music categories.
Display list of categories by two rolls.
Pop up selected item and change text colour.
Highlight selected item and change button’s colour.
Display list of categories in a scrollable single line.
Change button’s colour when selected.
· Flat design
· Consider scalability I have create the design to be slidable
Pop up selected button, bold text with colour change. Possible to sort with drop down menu.
Enlarge and bold selected text.
Pop up button and change text colour when selected.
Change button’s colour when selected. · Neumorphism design for unselected button
Change pills button’s colour when selected.
Utilize additional languages for localization.
🇪🇸 Two rolls in Spanish
🇪🇸 Scrollable single roll in Spanish
🇩🇪 Scrollable single roll in Germany
Floating search area on the top of the screen when scrolling up.
The category options vanish as you scroll up, but the search box stays visible and the "Search" title shrinks in size and moves animatedly to the top middle of the screen.
The search box vanishes as you scroll up, leaving only the category options, and the title's font size is diminished.
When scrolling up, both the search box and category options remain while the title's font size is diminished.
How might we make it easier for users to locate their favourite playlist among the massively long list?
We believe a sorting option based on the user's most recent actions in the app would be beneficial.
💗 Recently Loved -Sorting a playlist to the top that includes music you loved and music that is similar to music you recently enjoyed.
👂 Recently Played - Sorting a playlist containing music you've recently listened to to the top.
The sorting option is indicated in text and is identical to the sorting option on other pages.
The sorting option is indicated by an icon in the top left corner, and the interface displays the selected options. An icon added for grid view at the top right.
The playlist layer blurred after selecting the sort option, and the function page appeared at the bottom of the screen.
We've successfully improved the search success rate by 22% through our redesign efforts, bringing it up to 89% 📈.
Our next step is to conduct a usability test to gain insights into users' ability to find music and their average level of satisfaction with the app's overall user experience. This will help us further optimize the design and enhance user satisfaction.
