Facebook Studio

Facebook Studio makes creating and sharing music online together a more fulfilling experience, and keeps the focus on beginner-friendly collaboration rather than churning out content.

Comment

Inspiration

Facebook missed out on a great opportunity during the early pandemic to recapture some existing users who have strayed away from the platform in favor of sharing their music via YouTube, TikToks, and Instagram Reels. The Facebook Collab app that was released in December of 2020 was a great idea, but its limited capabilities and already well-established competitors prevented it from really taking off. Likewise, Zoom established itself early on in the pandemic as the most tech-friendly way for many musical groups to meet. However, there are many musicians, old and young alike, who are tech-impaired and still can’t mute themselves 18 months into the pandemic. Trying to help the tech-impaired, suffering through unbearable Zoom music classes, and our desire for a platform to create collaboratively with friends across the world inspired us to design Facebook Studio!

What it Does

Facebook Studio is bigger and better than Collab because users can upload full length videos, collaborate with up to 100 other artists, view important song information (such as key, tempo, etc.), connect directly with their Facebook friends, and is a great creative tool for users of all music experience levels. This new feature stands out from collaborative music apps already on the market because it is inherently social, beginner-friendly, and desktop-accessible.

Integrating a collaborative music feature into Facebook, a platform that almost 3 billion people already use, is an obvious choice for reviving the online music industry. Through Facebook Studio, users are not only automatically connected with their Facebook friends, but can use filters to find new artists and start forming unique collaborative groups. In an industry dominated by white cishet men, it is nearly IMPOSSIBLE to connect with artists of color, LGBTQ+ creatives, and musicians that aren’t non-cis men. This is made possible through artist filters, where users can browse artists by age, location, gender identity, sexuality, race, instruments played, roles, musical genres, and experience level. Obviously, this might present a security or privacy issue; however, user's identities are ONLY made public with their permission during the onboarding process, and artists can also choose whether or not to cross-display their Studio profiles to their regular Facebook accounts.

Studio profiles display the genres, roles (lead guitar, sound engineer, etc.), and instruments that users can play, as well as the artist's location. When creating a new collab, users can add useful information for whoever collabs with them next, such as tempo, key, and lyrics. August has perfect pitch and can play anything he hears, but Reese couldn’t play by ear in a life or death situation. We all come from different experience levels and backgrounds, so we wanted to include this feature to make collaborating accessible for everyone.

Finally, Facebook Collab’s motto is “Make music together, while we’re apart.” We believe that Facebook Studio is a feature that will outlast the pandemic, and that it could be expanded to include multiple art forms, including dance, drama, and visual arts.

How We Built It

We did everything in tandem for the majority of the project, but split up on Sunday to work independently on this presentation and the prototype interactions. August created the video and wrote about the experience, while Reese worked on making the design clickable. This project was built entirely on Figma, and we used screenshots of Facebook as inspiration for the designs and as reference for the existing branding. Although we didn’t use components or variants for this project (a decision we made to save some time), it was very easy to work within a design system; many elements we used were reusable (or at least recyclable) across this project, and Facebook was kind enough to be extremely consistent and predictable in their spacing, color usage, drop shadows, and font sizing.

Challenges We Ran Into

We struggled with deciding what was most important and useful to include in this project, so we created a mind map on Miro to help us categorize and strategize the features. We eventually color-coded the different features to help us keep track of what had already been included (blue), what was going to be cut (green), and what would be nice if we still had time (purple). We also tried to design a small music game for the Challenges section, but despite watching countless tutorials and signing up for Figma’s Beta features, we just ran out of time to make it work!

Accomplishments That We're Proud Of

Reese officially finishes the DesignLab UX Academy next week, while August just started UX Academy Foundations last week! This was August’s first Hackathon, and our first team project as a couple. It was a lot of fun to get to work together in this context while attending the workshops and panels on the side, and we think that managing to create a project like this in such a short amount of time was an accomplishment itself!

What We Learned

We learned about time management, perseverance, and filtering through ideas to come up with the most meaningful solutions!

What's Next for Facebook Studio

We were really pushed by this project, and there are a few things we’d do differently next time!

  • We’d like to find a different way to engage with collabs on the feed, such as a “Collab” button next to the Like, Comment, and Share buttons underneath posts.
  • We’d also like to explore an in-app composition tool; users can already request feedback on their written scores using Studio, but a music writing software within Facebook might help users share scores on screen in tandem with their studio posts, as well as make it even easier for beginner musicians (or experts who aren’t great at playing by ear) to play along and collab with them.
  • This project is currently a desktop-only format, but we would have loved to have crafted the tablet and mobile versions if we had a bit more time!
  • Finally, we know that half of the enjoyment of going to a live show is experiencing the venue, and it just doesn’t feel the same to watch a show from your living room. For that reason, we’d like to encourage venues to be a part of Facebook Studio by sharing their audience capacity, COVID-19 safety measures, ticketing information, and venue type (house, theater, concert hall, etc.) with the artists that might perform there, either live or digitally.

Built With

  • figma
  • miro
Share this project:

Updates