APPLE MUSIC
Integrating a social feature into an existing app
"Reimagining a live musical experience that brings the social experience of live music with Covid precautions.”
PROJECT PLAN
CHALLENGE
Design features that will delight Apple Music subscribers, using existing iOS:human interface guidelines.
BACKGROUND
Apple Music is looking to expand their channels of engagement by heightening the overall user experience and drive new user engagement.
GOALS
Discover what music streamers want from their music streaming experience, and how they discover and interact within their music streaming app. Using the insights that are discovered, design features that address the user’s pain points and frustrations.
See Project Brief See Research Plan
ROLE
UX Designer (Researcher, Visual Designer, Interaction Designer, and User Testing)
DURATION
4 Weeks
TOOLS
Sketch, InVision, Pen + Paper, Illustrator
TEAM
Mentored by Alan Hurt Jr. from Innospace Lab Design
PROCESS
01 EMPATHIZE
-Market Research
-Competitive Analysis
-Provisional Personas
-User Interviews
02 DEFINE
- Empathy Map - User Persona
03 IDEATE/DESIGN
- POV & HMW - Brainstorming
- Business & User Goals - Product Roadmap
- Task / User Flows
- App Map
- Wireframe Sketches
04 PROTOTYPE/TEST
- High-Fidelity Wireframes - High-Fidelity Prototype - Usability Testing - Mood Board
- Style Tile
- UI Kit - High-Fidelity Prototype
05 ITERATE
- Affinity Map - Revised Wireframes - High-Fidelity Wireframes
01 EMPATHIZE
SECONDARY RESEARCH
Market Research
To understand how Apple Music fit in the music streaming world, I conducted market research to understand the needs and motivations of the users, demographics of the user, and how to align the company’s goals with the needs and demands of the market. Some music streaming platforms appeal more to people with specific tastes, and companies are constantly introducing new features to enhance their customer’s experience. The top 10 streaming services in alphabetical order are, Amazon Music, Apple Music, Deezer, Idagio, LiveXLive, Pandora, Primephonic, SiriusXM, Spotify, Tidal, and YouTube Music.
When it comes to the interface of music streaming apps, ease of use is key to the users. “It's a close race between Spotify Premium and Apple Music, but Spotify wins as the best music streaming service overall thanks to a fun, easy-to-use interface, an extensive catalog and the best device compatibility.” The complaints about the Apple interface stem from the lack of intuitive design. The stark white background has also been noted as too bright and uncomfortable to the eyes after some time. Many Spotify users boast about the intuitive interface, and the ease to discover and search for artists and to maneuver around the app.
Below lists some important information that was uncovered during market research.
It estimates that at the end of March 2020, there were 400 million music subscribers globally.”
According to Statista, 17% of the users are ages 18-24, 23% of the users are ages of 25-34, 22% of the users are ages of 35-44, 15% of the users are ages 45-54, and 23% are ages 55 and older.
According to Statist, “the gap between the two streaming services has gradually widened from 20 million when Apple Music was launched to subscriber count since reaching 60 million in June 2019, estimates from MIDiA Research put Apple Music subscribers roughly 60 million by March 2020.
Apple hasn't publicly commented on its subscriber number of 72 million for Q1 2020. Meanwhile Spotify, which reports its subscriber number on a quarterly basis, reached 130 million paid subscribers by the end of March.” While the numbers of subscribers are increasing for Apple music users, Spotify’s subscriber base number is staggering.
Click here to read more about the Market Research I conducted.
Competitive Analysis
I conducted a competitive analysis to understand the strengths and weaknesses, and unearth opportunities to improve upon weaknesses and reinforce the strengths. The discrepancies between music streaming platform are the ways each company defines their sound quality, size of library, and content. I was already an Apple Music user, and signed up for Spotify, YouTube Music, and Amazon Music, and whom I highlighted as the direct competitors, to understand the features and interactions of the direct competitors. See the indirect competitors
Provisional Personas
To empathize with Apple Music’s target market , I created provisional personas that were based on my secondary research that personify the prospective user. These personas helped me determine the ideal interview candidates when I arrived at the interview process.
PRIMARY RESEARCH
User Interviews
To gain a better understanding of the needs and motivations of the user, I conducted a series of 7 user interviews. I sent out pre-screener questions to ensure that the candidate was an Apple Music user. I asked open ended questions regarding their own experience with Apple Music and their history of usage with music streaming platforms. See interview guide
02 DEFINE
Empathy Map
With the insights from the 7 user interviews, I created an empathy map to synthesize user interview findings.
Research Synthesis
Once I organized all the interviews, I moved onto research synthesis. In this step, I sorted my notes into groups, which helped me identify patterns in participant responses. From these patterns, I extracted insights which were then translated into user needs.
Insights
01 User’s mood does not align with Apple Music’s song suggestions
02 User’s habits are not accommodated with the current Apple Music’s filters
03 User enjoys live music, but can not during this time
Needs
01 To align song suggestions with user’s moods
02 To have search filters that accommodate the user’s habits
03 To enjoy live music like Pre- Covid days
User Persona
From secondary and primary research, and user interviews I created a user persona that embodies Apple Music’s target market. With this persona, I was able to determine exactly who I was designing for.
POV Statements & HMW Questions
Once I had my user persona, I created POV statements and HMW questions, which would be the basis for all brainstorming.
03 IDEATE
Individual Brainstorming
With the HMW, I began with the reverse brainstorming method and then used the identified solutions in a second brainstorming session using the mind mapping technique.
Group Brainstorming
I used the solutions extracted from my individual brainstorming sessions for the basis of the group brainstorming session. A day before the session, I sent out the questions that we would be brainstorming upon. I conducted and recorded the session over Zoom while sharing my screen using Miro. I timed each session for 10 min. There were so many ideas!
Business and User Goals
I then identified the business goals based on research, and user goals based on my personas. Where these diagrams overlap is where I focused on my project.
Product Roadmap
Based on the findings from the methodologies brainstorming and the business and user goals analysis, I created a product roadmap to prioritize which features I would build first.
Application Map
The next challenge was to seamlessly integrate the new features without disrupting the Apple iOS: Human guidelines design system. I created a sitemap to organize the existing information and the new features that I wanted to integrate into the Apple Music app.
Task Flow
In order to visualize how a user would interact with the site, I created a task flow. I created two tasks that would be typical of a user on our site.
Userflow
A user flow was integral in understanding the user interactions with the app.
DESIGN
Low-Fidelity Wireframe Sketches
Based on Apple Music’s existing design patterns, my task, and user flows, I started building out my first iterations of my low-fidelity wireframes.
Mood Board & Style Tile
I created a mood board to have a better understanding of Apple Music’s visual language. Using the mood board as reference, I created a Style Tile that would navigate the visual design for the high-level wireframes. I wanted to be sure that the new features adhered to Apple Music’s UI, brand colors, logo and typography.
High-Fidelity Wireframes
With the UI Kit and visual design system complete, I integrated the Apple design system into the sketches into high-fidelity wireframes from my sketches, which I would use for testing.
04 PROTOTYPE/TEST
Usability Testing
I tested my prototype with five participants, in a moderated think aloud usability test. All testing was conducted over Zoom with the participant sharing their screen, so I could see the user’s interactions and reactions to the prototype.
Test Objectives
Is the language familiar to the user
Test if users can complete their tasks successfully without the struggle
Test the efficiency of completing a task
Determine areas of the app that are confusing, difficult to navigate, or are inconsistent
Observe if the site provides enough information for the user to find information about Apple Music
Test if users can complete their tasks successfully without the struggle
Explore the new social feature
Explore how to find an artist within the social feature
Find out how to create an event with the social feature
High-Fidelity Prototype
Using InVision, I created a High-Fidelity Prototype to conduct usability testing.
UI KIT
This is a living document where I procured all the visual components.
05 ITERATE
Affinity Map
I synthesized my test findings in an affinity map to extract patterns and behaviors.
Summary
5/5 users clicked at the search bar to look for an artist
5/5 users found the Steve Aoki Neon Future IV in Ibiza, virtual concert
5/5 users found the invite friends active link
5/5 users selected the icons for the friends to invite
5/5 users arrived at the invite/add friends screen
5/5 users clicked on the Accounts link to go the Accounts
5/5 users on the For You screen, scrolled down to look for a category that would lead them into the virtual concerts
5/5 users found the Virtual Concerts active link, when prompted to confirm a Virtual Concert
5/5 users recognized the name of the concert when they arrived at the screen for confirmation
Insights
01 Existing search patterns were causing confusion
02 Users were searching for the Virtual Concert Concerts category.
03 Users were unaware of notification
04 Users were unsure about the completion of an action
Recommendations
01 Remove search patterns that caused confusion
02 Add ios: human guideline patterns by adding a category of Virtual Concerts
03 Add CTA’s to create breadcrumbs to notify user
04 Add CTA’s to create breadcrumbs to confirm the user’s interactions
High-Fidelity Updates
Usability testing findings showed the problematic areas of the design. I revised the wireframes with the recommendations extracted from the affinity map.
My Takeaways
01 Every project is different; a technique applied to one project might not work in this project. Try different techniques.
02 Although users found some of the existing language confusing, it was important that I adhered to the existing language that was used. I worked on using common design patterns that would clarify the confusion.
03 If existing patterns are causing confusion, implement other existing patterns that do work.
04 For the user interview recruitment process, my screener questions were too vague, so I discounted the user interviews that were not relevant. This delayed my timeline, and I was working under tight time constraints. Going forward, I will be more specific in the screener questions to recruit interviewees that are more relevant.
Next Steps
I would like to add a private virtual concert feature, where users could create a private room and view the concert in a private setting. This would be another way users can socialize in a more intimate environment.