This project involved updating the Musician page on Facebook, with a focus on adding a sense of identity, interactivity, and connection with an artist or other fans.
Artist engagement on Facebook is relatively low, and the experience overall doesn’t capture a sense of identity particularly well. Despite this, there is a relatively high volume of conversation around music on the platform.
The initiative for Musician pages was actually born out of a collaboration between the Music & Rights team and the Events team. Initially my co-lead was Lisa, however she along with one of our designers left the project in the relatively early phases of the project. My direct supports were Tal and Eddie. Research was led by Eleanor. Development was led by Tony, while Product Management was lead by Xioayin.
I am lead designer on the project, working with two direct supporting designers. I created vision statements, led the design process, while participating in experiment reviews, dogfooding, and aligning with cross functional team mates.
(Lead Design, Visual Design, UX Design, Assist Research, Prototyping, Framing Project Communication)
1 Product Manager
“It shouldn’t take me forever to find out what’s going on with an artist I like.”
“I feel like there is no difference between my page and a pizza parlor…and worse I have to pay to reach my fans through all the noise”
Giving Musicians the tools to reach their fans, and build sustainable careers no matter what stage they are in their careers improves the social experience around music on Facebook for musicians and fans. This ultimately, allows Facebook to position itself as a key part of the social aspect of music.
On the Musician side the entire spectrum of emerging artist upwards to established artist. On the fan side, essentially any person who enjoys engaging with music in a social context.
A revamped Musician Page experience will differentiate Facebook as a unique place to form social connection and conversations around music. Beyond this, it will result in an improved usage of related products within Facebook: Stories, Marketplace, Events, Groups, etc.
Cross Functional Partners
Tal’s approach highlighted the use of color and a Premium Music Video / media player as a header.
My initial exploration focused on a large hero image, with similar standard content that felt like it blended into the rest of the experience.
Eddie’s approach focused on highlighting the content in a tabbed system depending on what the Artist wanted to highlight first and foremost.
Bringing the explorations together
One thing that was key to the project was identifying what elements formed a connective experience between our 3 distinct explorations. We all had some commonalities but there were some key highlights to each approach worth mentioning:
- Tal’s approach sought to inject a sense of emotion as part of the initial overlay using both color and media.
- My approach sought to inject a sense of identity by highlighting the musician’s photo, but also a sense of it blending into everything else.
- Eddie sought to provide musician’s with a sense of control over what their needs are
Identifying these high points of each exploration was key in reaching our unified design, and also strategically forming the larger story around this initiative.
One of the first things that became apparent in our exploration was that there would be a need for clarity in how this could be engineered. One of the first steps I took was to share with our engineering partners was the standard css gradient in this redesign – beyond that everything else was a component that already existed or represented an existing product.
Leveraging Color Sampling
During our research I discovered color sampling tools already existed in the internal developer tools. These were built for the express purpose of adding color to experiences that were otherwise text heavy. This became key in collaborating with our engineers and also during our color study phase.
Design System Audit
The biggest challenge to this project would be reconciling the very big departure from the standard experience on Facebook. While its true that Music is worthy of something that is evocative, expressive and unique – we would need something more reasoned to also make a case for this approach. With that in mind I began an analysis of the connection between the existing experience, the next scheduled update and the musician page redesign. While this didn’t magically resolve all concerns and conversations, it was a useful conversation starter when engaging with other teams that we’d have to collaborate with.
Stories Intro Teaser (Optional)
This element serves as an opportunity for musicians to highlight a specific piece of media or story. This concept evolved from Tal’s initial idea around premium videos, where she and I collaborated on focusing this content on the Stories platforms that already existed on both Facebook and Instagram. One of the post launch concepts we explored were musicians have distinct story headers depending on whether its a person’s first visit, whether they follow them, or if they have exclusive content for “super fans” (fans who are highly engaged and part of Facebook promoted “fan clubs”).
Hero image header
This portion of the page is the default header in case an artist doesn’t have an active story they’d like to highlight. During our collaboration Tal and I also shifted our thinking and fused the colored overlay from her concept, with the white gradient from my initial. The gradient however was defined as an optional feature, the important part was having a header image that allowed the artist to present their identity in an impactful way.
The media portion of a musician page is the area that is designed for a fan to get a closer look and connect with a musician, be it what they’ve shared lately or what music currently available. One key element to mention is that Facebook’s agreements with labels prohibited streaming music as a standalone service, however Facebook is free to use 3rd party integrations. In this case we designed “My Library” to be powered by 3rd party integrations with a fan’s streaming service of choice. This didn’t merely sidestep a legal constraint, it reinforced the focus that this should be a common meeting place where people can socialize about music they like, regardless of what service suits them best.
Last but not least, we wanted to provide musicians with tools that allow them to sustain and market themselves how they see fit financially. Whether musicians are independent or signed to major deals, merchandise and ticket sales tend to represent their bread and butter. Its important to note while in our designs we defaulted to displaying this section last, it could be featured within the carousel in the header, or be positioned to display above all other elements – or even as the only element on a musician’s page (below the standard header).
Unlocking Revenue for Musicians
For the Marketplace driven integration, we have the ability to support merch and music an artist wants to sell. While this represents a v1 state, future explorations could expand into “look books” which many artist that have a more robust brand presence (Frank Ocean, BOSCO, BROCKHAMPTON, etc.) could leverage.
Reviving the Music Video Premiere
During the brainstorm phase of this project we recounted some of the earliest memories we had with music, and aside from websites, there were also references to the bygone era of Music Video premieres. In a sense, these died with the advent of YouTube – however, there is little reason why with Facebook’s expansive social network and its own Watch product, that musician’s couldn’t launch their own Watch Parties or if in partnership on the established/legendary artist level Facebook could re-invent this cultural moment.
As the premiere experience for Artist on streaming services, we wanted to make sure this was at least a baseline for how we visually treated musician’s presence, and also what functionality and content existed on their pages. While we couldn’t position the same value propositions as a full-on streaming service, their integration of tickets, lyrics, analytics tools – not to mention their user base teeming with request for more social integrations all indicated worthwhile directions for current and future phases of the project. see “Spotify for Artist” >
One case study example I wanted to highlight for the team was this limited series of cover stories Pitchfork media ran with artist dating back to 2008/2009. A mixture of typography, cinemagraph styled loops, color and HTML5 scrolling elements that have all but become standard now, Pitchfork set an evocative example of how to capture artist that still stands out today. see Pitchfork’s Cover story of Janelle Monae’s sophmore effort >
Sometime after we landed on our color-gradient overlay, I was happy to see that the concept wasn’t crazy, but less enthused that the solution had already been applied elsewhere. Still, this didn’t necessarily mean this stylized approach wasn’t viable, but rather we’d want to dig deep for justification and also determining if there were other artifacts, layers, symbolic motifs we could add (see previous Pitchfork examples) we could add in future iterations. see The Verge’s write-up on Hulu’s redesign >
Color Study: Aesthetics & Legibility
Color Study: Accessibility
Beyond merely covering aesthetics, I wanted to take the opportunity to dive deeper into how uses of customizable color would impact users across the color perception spectrum. We partnered with our research to get some qualitative feedback from users of varying ranges of color perception. While we weren’t able to recruit people from every type, we learned that while they enjoyed the revised experience we’d need to leverage much more realistic font sizes (a minimum of 12pt) and that we may need to employ duotone color sampling to ensure WACG compliant contrast ratios were used instead of white text on sampled color backgrounds.
Communicating the Idea
In order to present this idea I wanted to make sure both the design and my co-designers got proper visibility. While I managed the production of these “snackable” project updates, team members contributed soundbites, voice overs, clips, and general research for each. So over the course of a 4 part series we shared an in-depth breakdown of the thought process behind the exploration. This included not only the two designers supporting me, but also insights from media partnerships, engineering, product, and cross functional teams.
Part I: We shared the overall design and rationale.
Part II. We covered the alignment with other design elements and overall roadmap.
Part III. We covered how the management experience would be for Musicians and their teams.
Part IV. We closed with the science of color, how it relates to emotion and the phenomenon of synesthesia.
Alignment with Broader Initiatives
Another consideration I wanted to share on the company/leadership level was other initiatives the musician page refresh could be paired with. Through conversations with our cross functional partners and a little research there were no fewer than 12 potential projects, and 8 directly relatable projects that this initiative could be aligned with.
(some information is redacted for product confidentiality)
Proof of Concept
Finding more cross functional partners
Once phase 1 of the project was over, it was time to dive in deeper and find more opportunities to pressure test and partner with other designers, engineers and teams throughout the company. Luckily, during a hackathon I was lucky to connect with some talented individuals who each made a contribution to advancing this proof of concept to the next phase.
Music & Rights
Within my internal team Tim, Kevin and a few more engineers wanted to support ongoing work on the project beyond our initial proof of concept phase. Working with their manager we determined a path of work for them and incoming interns to continue support.
Hackathon Team 1
James, Nick and Arjun along with a mix of engineers, formed an amazing hackathon team around collaborative playlist building. This solved one of the crucial challenges that was key to our 3rd party integration unit: How to match song titles in a suggestion, and then build a list for it in your streaming service of choice. The moment I saw their brief I joined their team to support from design perspective but also connecting them to my engineering team members on the Music & Rights team. Their work in the hackathon played a key role in illustrating how from an implementation standpoint this specific feature could work, along with its social value.
Hackathon Team 2
Cynthia, Ikezi, and Noah along with their team of engineers hacked a feature for sending music snippets within a messenger thread. I supported this team as well during the hackathon as a backup prototyper to Noah who was a product designer, and in producing animated SVGs for the “singing emojis” using our keyframe tool. This project was important because it showed we could extend social reach of artist by creating a format for artist or fans to share segments of music as a distinct form of communication.
Connecting with Musicians and Fans
For some of our research, we had the opportunity to sit down with some musicians, some of their managers and a few fans at Zoo Labs in Oakland California. I organized a day long collaborative session for my cross functional partners to get an idea of what strategic partnerships could exist along with gaining some insight from musician’s and their thoughts about prototypes of the proof of concept.
Results to date
- All artist and fans included in the beta preferred the updated experience
- Top request from artist was a companion analytics platform
- There was a 2x increase in usage of platform tools among musicians
- Similarly, fan engagement with platform components also increased
- Elements of the design have expanded to other parts of Facebook: Groups, Profiles, Instagram, Marketplace and Public Figures.
- Could integrate more visual effects, artifacts and motifs representing an artist or album
- Fans request more promoted real-time events and experiences to connect
- An expansion that leverages immersive experiences
- Partnering with artist at various stages of life cycle for exclusive content
- Utilizing AR/VR content in a way that redefines the listening experience
What could have been better
Projects of this scale, tend to require massive shifts in both the aesthetics and thinking around the nature of a product. Given this project was scoped for a year or more from point of conception, we knew it would take a lot of cross-functional effort to advocate for. I’m excited to have seen the broader adoption in other design teams of some of the elements, and we were extremely fortunate to have sponsors in the senior media partnership level. However, projects like this also require a clear company identity and direction to ensure their execution long term.