top of page

User Research, Visual Design, UIUX, Prototype, Wireframe, Storyboard 

Role:
Team: 

Rio_jiang, Justin_chai, Qianshi zhen

Tools:  

Sketch, Figma, Illustrator,  Photoshop, After Effects

Time:

Six weeks (2020)

Introduction  

At California College of the Art, I've been working on many projects. Some projects are small, like redesigning some existing features: filters, search bars. And some projects are large, like the collaborative playlist that I will be sharing, which is a hands-on project with the Apple design team in our school's Valve Systems class. It covered multiple design phases and involved multiple stakeholders and cross-functional partners. It allowed me to better learn and practice product thinking and systems thinking

Cca_logo.png
1024px-Apple_Music_logo.svg@2x.png

PROBLEM 

PROBLEM 

I want to add and share my favorite songs to the party music playlist.

Collaboration  homepage
Invited friends  

WHAT PEOPLE PROBLEM ARE WE TRY TO SOLVE ?

Imagine being at a friend's party where you are 

not familiar with many people, however the

music you don't like either, would you be eager to 

run away?

Problem Statement

I want to add and share my favorite songs to the party music playlist. Also want to make friends at party

tumblr_o9ji52pVWI1vsjcxvo2_r1_540.gif
07_2x.png
searchpng.com-mockup-iphone-x.png
Rectangle 3163@2x.png

WHAT IS COLLABORATION PLAYLIST ?

2hands apple@2x.png

Apple Music User

 

  • 18 Years And Older [18-24 (17%),    25-34 (23%), 35-44 (22%), 45-54 (15%), 55+ (23%) ].  

  • Hosts or participants who like party and own Apple products

 

 

User Problem

 

  • User want to add and share favorite songs to the party music playlist.

  • User want to make friends at party.

 

 

Success metric

 

  • Increase Business KPIs

  • Solve User Problem

Final Design

1024px-Apple_Music_logo.svg@2x.png
edietMobile Body@2x.png


Turn regular into collaborative, helping users invite friends to joying

Categorized collaboration function on the playlist sub-page.This function enables users to turn regular playlists into collaborative playlists by inviting friends to join. Users can also use an existing playlist for this purpose.

People can add songs remotely according to their preferences and find others with similar tastes through music

Users will get a notification when they receive the collaboration invitation. User can add songs through the add music button Also, user can select the song to view who added it, as well as view the owner’s profile and following information.

edietMobile Body@2x.png
edietMobile Body@2x.png

Allow users to manage collaborative playlists 

Users will get a notification from Apple Music When friends join collaboration playlists. It ensures users know who’s joining. Users have the right to remove someone from the name list.

Rectangle 3163@2x.png

COLLABORATION PLAYLIST

Remotely "Collaborate" with friends and family on a same playlist
2hands apple@2x.png
addpeople imagenew_3x.png
Disclaimer:
The concept was proposed before the launch of IOS14, then we followed up with a new version on the IOS14
Research
8053789c81ba02dd3cc255b089572ee9.gif

HOW WILL WE SOLVE THIS PROBLEM ?

Process

Screen Shot 2021-07-14 at 3.11.58 PM.png

Competitors, User Journey, Previous Research

So the first thing I did was competitor research, and I looked at how different designers designed their collaboration features on the app. Directly and indirectly, to help me think about this. in order to help me think this problem out of the box. Then I start my finding with my team of members, to see their reactions and options about couple of specific directions.

01

01

03

02

03

04

Screen Shot 2021-07-14 at 3.50.33 PM.png

02

04

Understanding Our User

As a team, we first looked into our own experiences and found issues that we had encountered. By doing so, we were able to ask tailored questions to other users throughout each phase of product development and iteration to be sure that we were designing for voices other than our own.

Here are some questions:
​
  • What is the story of the experience that we want people to have?
  • What improves a party experience?
  • What are people feeling and thinking at a party?
  • What do users need from music at parties?
  • What change would make apple music valuable to the users?

What They Tell Us

Screen Shot 2021-07-14 at 4.19.02 PM.png

Analyze & Category

1@2x.png
4@2x.png
5@2x.png

Initially, we thought users would have little interest in managing the music at the party simply because it is commonly understood that the music choice was the responsibility of the host. However, we found that users were losing interest because they were unable to participate.

As a result, we learned that there was a lot of
interest in collaborating on public playlists, not only as an audience but also as a participant.

Rectangle 3163@2x.png

KEY LEARNINGS

  • Hosts control the playlist at party, Lack of musical consensus. 

  • Music (artist, name, style) helps people break the ice in conversation.

  • People like to share music with their small group of friends.

Analysis
tumblr_a7ec882fb47b0993d649aa88406d67be_52971ffe_500.gif
tumblr_a7ec882fb47b0993d649aa88406d67be_52971ffe_500.gif
tumblr_a7ec882fb47b0993d649aa88406d67be_52971ffe_500.gif

DESIGN PRINCIPLES

addpeople.png

Invited people to add music

The function to invite people to add music remotely 

utilize.png

Utilize the visual cues

User icons are key to helping users connect

sharing.png

Customized sharing actions

Customizable sharing options for users

Challenges & Constraints

Screen Shot 2021-07-14 at 8.52.55 PM.png
Screen Shot 2021-07-14 at 8.52.55 PM.png

Hard to change layout

Current layout has been proven effective, including:

​

  • Download & Three Dots on Top

  • Playlist Cover Detail Obviously

  • Play and Shuffle Feature

  • Music List & Play Now

​

Diverse Integration

Covering how to integrate new features of collaboration into Apple Music product systems.

Concepts Testing

Concept 01

edietMobile Body_2x_edited.png

Create a New Collaborative Playlist

Concept 02

edietMobile Body_2x_edited.png

Turn a Normal Playlist into a Collaborative Playlist

Rectangle 3163@2x.png

Idea Direction

Turn a Normal Playlist into a Collaborative Playlist

  • Large compatibility for different scenarios

  • More efficiency for user use

edietMobile Body_2x_edited.png

After chatting with team and made some refinements, we all felt this direction could be an ideal experience if we can implement correctly with great data support, even though it’s hard to achieve in a near future.

 

The whole team really felt excited about this design, we quickly prototype to present this concept.

User Flow

After constructing the user flow task analysis, we needed to find a way to implement a “collaborative” feature that does not disturb users, but also appears quickly when needed.

32@2x.png

Wireframes

User send an invitation to friends

002-1@2x.png

User collaboration on playlist

003@2x.png

Tracking 

004@2x.png
Ideation

Break Into A/B Testing

Screen Shot 2021-07-15 at 12.45.17 AM.png

Because the apple is very data driven company.  That evering has to be A / B tested before putting into the site. So next thing I did is I worked with our PM, and members , we did try to break the idea concept  into some testable hypothesis.

Rectangle 3163@2x.png

A/B Testing Designs

Highlighting Collaborative Action Buttons

001 test.png

Highlight Invitation Page by Visualization 

002 test.png

Suggested Sharing Options for Different Situations

003test.png

Group the Participants Profile Image 

004test.png

Prioritization

Screen Shot 2021-07-15 at 1.19.34 AM.png

We also did a prioritization meeting, with the purpose of mapping different testing ideas into the impact VS effort matrix.

giphy-downsized.gif

A/B TESTING 

Because Apple is data-driven for each feature, we invited 10 Apple Music users to do an AB testing. We divided them into two groups to see user feedback .

Goal

  • The user easy to know each page of features and guide user into next step.

  • It is not only in line with Apple systems, but also meets the behavior of Apple Music users.

Task

  • Invited friends collaborate a playlist.

  • Manage the collaboration playlist.

  • Following People who share the same taste in music.

Action Button Test

Highlighting Collaborative Action Buttons

Option 2 - Wining Direction

​

“collaborative” with the icon and integration into existing categories, not only does not disturb users but also appears in time when needed.

Add People Test

Highlight Invitation Page by Visualization 

Option 2 - Wining Direction

​

Most of user think the option 02 more clear to know the feature of this page.

Sharing Options Test

Suggested Sharing Options for Different Situations

Option 2 - Wining Direction

​

”Can Change and Invite Others" will confuse users, from the participants' point of view, they just receive the invitation message and join it, very small probability to share it twice.

Collaboration Homepage Test

Group the Participants Profile Image 

Option 1 - Wining Direction

​

Testers feel that option 01 presents a clearer way to let users know the features of the playlist, while also increasing socialization by making it easier to click on the participant's icon.

Prioritization

Screen Shot 2021-07-15 at 2.24.10 AM.png
45@2x.png

COLLABORATION PLAYLIST

Final Design

Personal

Justin - Host

Justin loves to socialize and share fun things. 

Tomorrow is his birthday, In order to give everyone a good music experience at his birthday party, he tried the new feature of apple music "collaboration".

bf57026ee75af2f414000cec322f7404.gif

Stella - Participant

Stella is Justin's best friend and the night before his birthday, she received a notification of a collaborative music playlist invitation from Justin. 

giphy (1).gif
2235.gif
searchpng.com-mockup-iphone-x.png
bf57026ee75af2f414000cec322f7404.gif

Scenario 01

Justin creates a collaborative playlist and invite friends to join party

20aef23d39a8dcb74bf663ed89ab08d6.gif
searchpng.com-mockup-iphone-x.png
bf57026ee75af2f414000cec322f7404.gif

Scenario 01

Justin get a notification from Apple Music when stella join

giphy (1).gif
25422.gif
searchpng.com-mockup-iphone-x.png

Scenario 02

Stella received an invitation and add music on playlist and explore others

Design

Reflection 

Keep Learning, Keep Iterating.

As a product builder, the journey is 1% finished, you know there are always new blind spots to learn, new people problems to discover, and new work to iterate on to make our products great. I think the best product work comes from always being in close contact with the people we're trying to develop for, understanding what they really care about and what problems they have.

​

​

Quick Wins + Big Picture

Break large design to small testable experiments

​

​

Collaboration

Bring stakeholders along the way

Next Steps

Prototype & User Testing:

Collect user feedback for further iterations. Analyze detailed performance data as a reference for the next version. 

​

​

Scalable on Any Screen:

Being able to make all the elements of our content fit on any screen;  Make it flexible. 

​

​

Feature  Enhancement:  

Real-time play action, Save to my favorites, line-item product connection, accessibility, etc;
 

bottom of page