CASE STUDY

Reimagining Open Source Music Metadata

A story of designing for a massive open source community, design systems, and Google Summer of Code

CONTEXT

Top 3 things to know about this project

MusicBrainz is the biggest open source music meta-data database, with a community of million plus developers and editors. Its database is used by companies like Google, Spotify, etc.

Over a year, with the community I redesigned the core entity pages.

We then realized we need a design system. I learned to code and built out the initial components for the UI library as part of Google Summer of Code.

My journey

CHALLENGE

A significant decrease in traffic was observed when users navigated away from the artist detail page.

The artist detail page is one of the core pages on the website. It is a gateway to explore the artist's releases, recordings, events, etc. Ideally, users should consume this information and dig deeper for the other details pages. A dropout at this stage is not expected.

DISCOVERY

User research

MusicBrainz was built over 17 years by developers and editors collaborating remotely. The community strong-knit and is very active on their forum, JIRA and IRC chats. To gather insights, I talked with the founder of the project, their 3 lead developers, and 10+ editors personally. I then started several discussion threads on forums and studied the user survey form circulated within the community.

DISCOVERY

Insights

CRITICAL INSIGHT

The website lacks proper navigation and action prompts for new users to adapt to, but the existing community fo editors are quite comfortable.

There is a steep learning curve for new users to start exploring and editing the data on MusicBrainz. Meanwhile, the existing editing community is adept at using the old interface build over years and is resistant to have major changes in the interface.

DISCOVERY

Personas

DEFINE

UX goals

DEFINE

Redefining the challenge

"How can we improve the overall navigation and information display on the website to suit both the needs of a power editor as well as that of a new user?"

DESIGN

Initial wireframes

Some of the feedback I recieved

Things which did not work out

Things which did work though..

The founder and few active members of community realised the value and potential of better user experience. It also bought me some credibility to use in future.

DESIGN

Current iteration

THE OOPS! MOMENT

Wait a minute, how will we build all this?

🙋 Have the mockups ready. Then someone, with some knowledge of how code works, will slice it up into tickets.

💁 Design-person coordinates on making sure every ticket owner has what he/she/zhe needs. Hey, where do I get this font? Is this the latest icon set?

🙅 Someone finds we used a different button somewhere. We have a ticket. Which then needs to be taken up by someone.

🙆 And before we know it, we have huge piles of UX-debt.

I figured we need a component-driven UI design system in place. Design systems were the “it” thing in the market. And we needed someone to start building it to show it’s value.

NEW CHALLENGE

Google Summer of Code

I was new to programming and there are tons of things you need to learn to get started, especially to get started to contributing to an open source community. My technical background and voracious reading habits on Medium helped me. As part of GSoC,

Key takeaways

Collaboration and Team Work: Open source is all about effective communication. Being the only designer in the developer community, helped me learn skills to present my work, educate about design thinking and work with contradicting views.

Learned to Learn: Music metadata? Programming? Git rebase? There were and still are so many things I didn’t know. But I learned how to keep up, ask for help when needed and work hard to deliver!

Thinking about a product as a whole: I started out with a screen, but realized how we would need a system in place to scale across our projects over time. I helped came up with project roadmap and reach out to people with required skills to help out.

Some nice words by the community

I want all pages to be chhavi-fied. -Founder of the project, Robert Kaye

I really like what you did with the overview page. -An active editor

Thank you for your continuous work on this! I'm very happy that you addressed most of my concerns. -Community Manager

I like the new look, and the process you started is going somewhere, keep up the good job! -A loyal MusicBrainz fan