Apple music

• Additional feature for Apple Music
• High Fidelity Prototype

• UX/UI Designer

• 4 weeks

• Sketch
• Concepts
• Optima Sort
• Whimsical
• InVision

OBJECTIVE

Music is a way people connect with others. Released in 2015, Apple Music is a music streaming service run by Apple. They have more competitors than ever with other major tech giants releasing their own streaming platforms. As of 2018, Apple Music had the largest subscriber base in the United States, and as a leader in streaming music, they want to make it easier for their users to discover new music on their platform.

This is a speculative project.

Empathize

Goal: Understand the user’s needs and frustrations when using Apple Music
Process: Market Research | Competitive Analysis | User Interviews

Market Research

This project started with trying to understand what the existing music streaming industry was like. I came up with research questions to help guide my process and focus the research. I researched the music industry, music streaming, and users of music streaming services. It was surprisingly difficult to find information on Apple Music users and their listening habits, while I was able to find that information for Spotify.

For the purposes of this project, I figured the users would have approximately similar listening patterns. It was really interesting to find out just how many users use streaming services and how big streaming music has become in the past several years.

music streaming

• Spotify has 207 million users, SoundCloud has 175 million users, Apple Music has 60 million users
• Between 1999 and 2009, music industry revenue fell from $14.6 billion to $6.3 billion, partially due to streaming and pirating
• 2018 streaming exceeded traditional revenue streams
• 2017 had a 41.1% increase in streaming revenue, 8.1% increase in overall revenue
• Streaming makes up 47% of all global revenue
• 32.5% increase in paid subscription streaming
• 255 million users of paid streaming services
• Growth in streaming offset declines in physical & download revenue

apple music

• Launched: June 30, 2015
• Currently in over 100 countries
• 60 million songs
• 60 million subscribers in June 2019
• Goal: to become a cultural platform “one stop shop for pop culture”

spotify

• Average listen to 41 unique artists/week
• Average listen to 25 hours of Spotify/month
• 44% listen to Spotify on a daily basis
• ⅓ of time listening on Spotify-generated playlists, ⅓ to user-generated playlists
• 25-35 is largest age bracket (29%) while 18-24 is second largest (26%)
• 56% men, 44% women

Competitive Analysis

To learn more about what users are interested in when using a service, I had to check out the competition. I wanted to know more about the existing offerings in that space--Spotify, Tidal, YouTube Music--and what they were bringing to the table. I created a competitive analysis to compare each service’s features and price points. It was hard to find some of the information for all services, like the number of songs, but I used estimates when they were necessary. Overall, it appeared that most music streaming services have many similar features.

provisional personas

Using my research as a base, I created provisional personas. These are roughly equivalent to the research questions in earlier stages of research--they are assumptions to be proven or disproven. They started me thinking about the kinds of people that might be using Apple Music and building empathy with them.

User interviews

Once the secondary research was completed, it was time to move on to primary research. This meant interviews with people to learn about their experiences with streaming music using Apple Music. I asked about their positive experiences and frustrations that they had, to learn about their pain points. Talking to real people helped me understand how people used Apple Music, and the problems they had.

Number of participants: 6
Gender Breakdown: 3 men, 3 women
Ages: 20-25

Define

Goal: To define the user’s needs, goals, motivations and frustrations based on research findings
Process: Empathy Map | Persona

Empathy map

The empathy map is a collection of all the data from user interviews, collected and sorted into categories based on connections between them. Grouping them together like this helped me draw insights, and create needs for my users, based on direct research from real people.

insights

• Similar playlists with too much repetition is frustrating when trying to find new music
• It can be hard to search for the music you want if you don’t know what to search for
• People are likely to enjoy music their friends also enjoy
• People have a variety of ways they use Apple Music to find new music

NEEDS

• Playlists with a wider variety of different songs
• A way to find specific music that doesn’t need search terms
• A way to see what friends are listening to
• Multiple avenues of discovering music

PERSONA

The persona is a key tool for building empathy. It acts as a real “person” for me to design for. Therefore, it’s paramount to have a consistent, realistic persona--pulled directly from the user research I had completed. I took the insights and needs from my empathy map, as well as key details about my persona’s occupation, desires, and affiliated brands.

Ideate

Goal: Develop a logical information architecture and seamless user flows based on insights from research
Process: POV & HMW Questions | Individual Brainstorming | Group Brainstorming | Sitemap | Task Flow | User Flow

POV & HMW Questions

The POV and How Might We questions help frame the insights and needs to make more effective brainstorming. They focus the insights back onto the persona and build empathy. They helped create prompts that were used during the brainstorming phase

Brainstorming

Once I had a better idea of the user and what he needed, I needed to decide what potential solutions to his problems were. To do this, I did brainstorming exercises, first individually, then as a group with some friends.

For individual brainstorming. I did two sprints, the first for five minutes, the second for three, trying to generate as many ideas as I could. Essentially, I just listed a bunch of possible solutions to the problems, trying to answer the HMW questions I had generated.

The second phase of brainstorming I did with a group. We used Google Sheets and a voice call over Discord to collaborate on ideas. Each person had five minutes to come up with three ideas, then used the previous person’s ideas as their jumping off point for their next three ideas. This process was a little bit silly, but it let me feel more free to stretch my creative muscles when I was getting inspiration from other people’s ideas.

Site map

The idea I chose to develop for this project was a collaborative playlist. So many people I interviewed talked about sharing music with friends, and being more interested in music their friends liked too.  Being able to collaborate and create playlists for shared events seemed perfect.

The sitemap shows how the information in the app will be laid out. I did this in terms of major features, instead of deep-diving into the full information architecture of Apple Music, which would have been overwhelming.

Task flow

Creating a task flow lets me think about the task in smaller steps and let me come up with a logical flow for users to go through as they completed the tasks.

Because I was focusing on a collaborative playlist feature, I wanted to map out the flows for creating a collaborative playlist and adding music to the playlist.

I thought it would be the simplest to make creating a collaborative playlist part of playlist creation. I figured that people are already used to creating playlists, and being able to add friends from playlist collaboration would be an easy change. Adding people to then edit something is also a common design pattern in other aspects of iOS.

User flow

The user flow took one task and expanded it out into the numerous potential decision points a user could potentially make.

I went through the entire process of creating a collaborative playlist, from adding users to adding music—including making a standard playlist. I wanted to be sure the flow made sense and fit with the established flows for the app.

Click the image to view the full user flow.

Design

Goal: Implement solutions to user frustrations and pain points
Process: Product Road Map | Sketches | High Fidelity Wireframes

product road map

The product roadmap takes all of the potential features and ranks them based on priority. This helps prevent feature creep and focuses the product design phase onto the most important features first.

I mostly focused on the collaborative playlist feature; however, I also added additional features that I was interested in exploring based on my brainstorming exercises.

Sketches

The sketches were the first chance I had to really visualize how the implementation of my solutions would work in the app’s design itself. I used the existing layout and flow of Apple Music. I prefer sketching digitally, using an app called Concepts on my iPad. I used an iPhone XS template as the base, and sketched out how I would add the additional screens.

I based the majority of my designs on the existing Apple Music app. It was interesting to have so much of the major design decisions made, as opposed to making them all myself like in the previous projects.

I wanted to make the additional features as unobtrusive as possible in the existing design, so I modeled the adding users screen after adding music in the existing app. I put the button to add users right above adding music, too.

Again, I focused primarily on the collaborative playlist feature, but added additional screens for other features, like an updated user profile page and a following list.

You can click the image for more sketches.

High fidelity wireframes

The high fidelity wireframes were built using Sketch. Apple already has an existing style, so I moved directly into high fidelity wireframes, instead of building out mid fidelity wireframes first.

I used screenshots from my phone as reference material, and the Apple iOS UI Library. For icons I used the SF Symbols app, or created my own vectors to more closely match the icons in Apple Music. My goal was to integrate my feature as seamlessly into the Apple UI as possible, using their existing patterns for making playlists as my reference point.

I created the screens that I needed to test my task flow—adding users to a playlist. I also created screens that would allow for additional settings, that I based off of shared albums in the Photos app.

These high fidelity wireframes have been compiled into a final, revised prototype here.

Prototype & TEST

Goal: Bring the design into an interactive state and get feedback from users to improve the design.
Process: High Fidelity Prototype | User Testing | Affinity Map | Logo & Style Tile | UI Kit | Prototype Revisions

HIGH FIDELITY prototype

Once I had designed the screens, I needed to link them together to create a functioning prototype to test. I used InVision to create the prototype, and linked the screens together using hotspots. I created a working tab bar across the app, and enabled some scrolling features.

InVision added an iPhone frame, which really made the final design look polished, and like a real app.

The prototype is located here.

usability testing

When it came time to start User Testing, unfortunately the world had been thrown in crisis. COVID-19 meant that I was encouraged to stay inside and limit my contact with people--which meant going out and doing in person user testing was impossible.

I used maze.design to create an easily shareable prototype that would record information about the users clicks and behaviors, and did remote user testing with some friends from online communities. I had them share their screen with me over a voice call as I took notes and conducted a Think Aloud test. It was a little different, but let me still get user testing completed.

task 1

Create a new playlist.

• Completion Rate: 100%
• Error Rate: 0%

task 2

Add friends to the playlist.

• Completion Rate: 100%
• Error Rate: 33%

task 3

Change the notification settings for the playlist.

• Completion Rate: 100%
• Error Rate: 33%

AFFINITY MAP

The affinity map is pretty much the same as the empathy map, just with user testing. I followed the same procedure of transferring my notes to post-its and grouping them based on similarities. This allowed me to draw further insights and come up with design recommendations based on the errors users were making and the frustrations they had.

Overall, users found it easy to create a new playlist, and found it decently easy to add a friend to the playlist. The settings gave people the most trouble, so that's where my design recommendations focused.

insights

• Most people were unsure where the notification settings were
• Most users were unsure where to find the settings menu

design recommendations

• Make notifications more obvious by changing the language of the setting screen.
• Give another path to edit playlist settings, perhaps during playlist creation

Mood Board

The mood board starts to collect visual examples and build a language for the visual design of the product. Because Apple Music already has an existing brand and logo, it became my challenge to reverse engineer the existing one. I created a mood board that focused on imagery, typography, and color palette for the app. I used Pinterest to put together a board that collected these different ideas.

Apple is famous for its system font, San Francisco. It's a neo-grotesque sans serif, which are straightforward and versatile. Apple music has a neutral palette, with bright pops of pink as a highlight/brand color. They don't have a very consistent image style, though. Various playlists and banners have different art styles, which doesn't even go into the variety of album art on the platform.

style tile

Again, Apple Music has an existing brand. The style tile is usually the place in the process that lets the designer solidify their aesthetic choices. These choices were already made for me, so I again reverse engineered them.

Coming up with a style tile and mood board from an existing app helped me think about the decisions Apple's designers must have made, and how this information might have been laid out. Because they have such a strong brand and visual design, it was exciting to get this peak behind the curtain.

Click the image to see the full style tile.

UI KIT

The UI kit collects all of the assets used in the project, to have a single source of truth for the project. This is indispensable with a project that would have multiple designers and developers. Even though this is a project with one designer, it's still helpful to have a collection of the pieces that were put together to create the app.

I put together all of the elements that I had used in the design, to create a document that showcased them all.

Prototype revisions

For the revisions, I took my design suggestions I created with the affinity map and used them to make adjustments to the design. I added a Playlist Settings link when creating a playlist, under the Add Music button. This gave users another avenue of reaching playlist settings, and reminded them that settings exist for the playlist when it’s being created.

I also added a description to the notifications setting to make it more clear what toggling that switch would do for the user.

CONCLUSION

REFLECTION

Adding a feature to an existing application was a really interesting project. It was fascinating to learn about people’s actual experiences with a product, something I didn’t have when I was doing my previous capstone. There, I was trying to design a product to encourage people to use it in the first place. This time, I had a wealth of people who already had opinions about the service. It really allowed me to open up my research phase and try to bring a feature I thought would benefit the users.

It was also interesting working in an established design system. It showed me the benefits of a highly organized and layered library. I saved so much time and effort using the existing Apple iOS UI kit, but it was still confusing to navigate through all of the options to find what I needed at first. It was a really fun challenge to try to mimic an existing system, and I feel like I did a good job at sticking with the Apple conventions and idiosyncrasies.

NEXT STEPS

The next steps for this project would be to return to user testing, to test the changes that I made based on user testing. I want to see if increasing the visibility of the playlist settings link and adding the description for the notifications were effective changes. If not, then I would return to ideation to come up with solutions that would help the users.