Musician Pages
Musician Pages

Lorem ipsum dolor amet, consect adipiscing elit, diam nonummy.

Follow Us


Musician Pages

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. 


A majority of all artist on Spotify are on Facebook, but the numbers decline the closer you get to top artist. Which is a huge missed opportunity since Bands and Musicians are the largest portion of fan groups among all creator fan groups on Facebook. 

The Team

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.

My Role

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)

Strategy Mix

Redesign +


Project Overview

3 Designers

1 Product Manager

1 Researcher

6 Engineers

Fan Insight

“It shouldn’t take me forever to find out what’s going on with an artist I like.”

Artist Insight

“I feel like there is no difference between my page and a pizza parlor.”


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.

Target Audience

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

Sound Design

Media Partnerships


Facebook Profiles

Facebook Stories

Facebook Pages

Facebook Events

Facebook Marketplace

Early Explorations

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.

Engineering Implementation

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

One thing that I discovered in our research of the use of color on the platform, was that we in fact already had a color sampling set of tools that had 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.

Components V1


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.

Media components

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.

Sustaining Artist

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

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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.

Competitive Analysis



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” >

Pitchfork circa 2009

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. What we ultimately discovered were 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.

Communicating the Idea

In order to present this idea I wanted to make sure both the design and my co-designers got proper visibility. 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 and cross functional partners.

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 dove into the science of color, how it relates to emotion and the phenomenon of synesthesia.

Part IV. We covered how the management experience would be for Musicians and their teams.

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 making this proof of concept come together.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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 how they would feel about the proof of concept.

Results to date

Key Stats

  • All artist and fans included in the beta preferred the updated experience
  • Top request from artist was a companion analytics platform
  • Of the beta musicians, there was a  2x increase in usage of platform tools ( Marketplace, Events, and Groups).
  • Similarly, fan engagement with platform components present on musician pages increased

What’s Next

  • Elements of the design have expanded to other parts of Facebook: Groups, Profiles, Instagram, Marketplace and Public Figures.
  • Fans request more promoted real-time events and experiences to connect with musicians
  • Integrate methods to share segments of the Musician page (this was disabled in beta due to limited test exposure)
  • An expansion that leverages immersive experiences
    • Partnering with artist at various stages of life cycle (emerging, known, established, legendary, etc.) 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.



Rafe Chisolm | 2019