PledgeMusic Storefronts

UX and UI for custom campaign site builder.

PledgeMusic is an on-line direct-to-fan music platform. Artists create campaigns to promote and sell a variety of merchandise and experiences.

The problem

In today's crowded music market artists and fans are looking for unique ways to connect with one another. Listening to music has become a passive activity for many which promotes fans being less connected to artists they love. Connections outside the act of just listening such as attending a concert or buying an exclusive item signed by the artsit are where fans find a ton of value and connection.

The goal

The goal was to create a platform that would allow someone on the artist team to take an existing PledgeMusic campaign and easily generate a customized, standalone storefront for that artist.

My role

My role was to design the two sides of the experience, the storefront builder and the campaign site it generated.

  • User research
  • Sketching &apm; ideation
  • Wireframing
  • Prototyping
  • Visual design
  • Interaction design



Research

Most of our research was conducted through conversations with our campaign managers, sales team, and artists already using PledgeMusic. We found out that many expressed a desire for a more white label storefront option that didn't have the PledgeMusic brand on it. Overwhelmingly, they wanted more control over their brand's look and feel and the ability to highlight products and experiences through a customizable but simple platform.

Once I understood our user's pain points I moved on to researching what our competitors and non-competitors were offering mostly in terms of good and bad features. Companies included Bandzoogle, Music Glue, Bandcamp, Squarespce, Shopify, and Big Cartel.

Competitor logos

Ideation

I started sketching ideas for the builder interface. I explored a couple of options such as a standalone web app.

Ideation sketches

Sketching the storefront admin as sections multiple and single pages. Far right, sketching component structure for the store content blocks.

Wireframe Store builder

Store admin wireframe

Content add flow

Content block variations

Once I had established the architecture and features I created an InVision prototype and shared it with the team to test and give feedback.

Storefront admin

Storefront admin with content blocks and a sticky right nav that would allow you to easily save and preview.

Translating the backend to the frontend

I established that every piece of the site was a component which would allow for a limited amount of customization. This greatly helped keep our development scope in-check and allowed me to be creative within the constraints.

Content blocks

Wireframing site content blocks

Content blocks
Content blocks

Custom site delight

I then mocked up a few sites for desktop, tablet, and mobile based on the component rules I had established.

Deva Mahal Desktop
Depeche Mode mobile
The Flaming Lips
Live Here Now

As time allowed, I prototyped some interaction patterns via Sketch and Invision helping to make the experience feel complete.

Mobile nav interaction
Save button interaction

Results

The PledgeMusic Storefront became an important tool in the Sales team's arsenal. It gave the artists and their teams features they had been asking for and in turn were more prone to choose Pledge over the competition.

Further considerations

Upon revisitng this project I would have considered exploring the following:

  • Multi-artist architecture. Allow labels or mangement groups to roll up several artists or catalogues into one store.
  • Build as a standalone application. Open this tool to anyone.
  • Custom URLs. Allows users to connect any URL of their choice.