Brooklyn Raga Massive

Music Collective Website Redesign

A rebrand and redesign of a website for a maturing music collective based in Brooklyn, NY.

Expertise

Product Design and Logo Design

Platforms

Webflow

Deliverables

User Research Report, New Logo, Style and Branding Guide, UX Voice Chart, Fully Built Out Website on Webflow

Project overview

Overview

Brooklyn Raga Massive (BRM) is a prolific artist collective composed of 50+ collaborating musicians dedicated to creating cross-cultural understanding through the lens of South Asian classical music.

BRM began as a casual weekly music event in 2012 which grew and flourished into a mainstay of the New York City arts scene, cultivating a vibrant community of diverse musicians and music lovers. In 2015 BRM officially became a registered 501(c)(3) non-profit organization. Since then the collective has grown and produced over 70+ live performances a year, 5+ national and international tours, and recorded over 4 new albums.

Objective

In Spring 2020, the executive team of the collective approached me about working together to help rebrand the organization in concert with the launch of their first official fundraising campaign slated to start in October 2020.

My objective, as agreed upon with the executive team, was to design and launch an MVP (minimum viable product) of a new website for the collective by October 2020 in coordination with the launch of their first major fundraising campaign.

Users and Audience

Because the new site roll-out would coordinate with the launch of a fundraising campaign, the primary users for the website redesign were granting organizations and donors.

That said, I also developed additional personas including: artists, booking agents, and audience members (music appreciators) because they had additional needs and perspectives that needed to be considered for the MVP.

Roles & Responsibilities

I was the primary product designer for this project — I scoped the project, developed and executed the user research plan, created the new logo and color scheme, and designed and developed the new website in Webflow.

UX researcher Siena Tetali contributed to the research synthesis.  Content strategist and consultant Meera Dugal, collaborated with me on the logo redesign and the visual rebrand for collective.

Tools & Methods

  • Stakeholder Interviews
  • User Interviews
  • Competitive/Comparative Analysis
  • Sitemapping
  • Adobe Illustrator
  • InVision Freehand
  • Adobe Photoshop
  • Canva
  • Webflow

Scope & Constraints

There was a limited budget for this project, so in addition to reseaching and designing the site, I also built it in Webflow.

Another constraint for this project was the inflexible launch date, which influenced the number of features and pages that would be ready for the MVP launch. Anything not on the defined MVP features list would be pushed to be designed and developed in a later phase after the launch.  

Execution

Discover

For the discovery phase I engaged in the follow UX research methodologies: (1) Stakeholder Interviews, (2) User Interviews, and (3) Competitive/Comparative Feature Analysis of similar organizations.

Stakeholder Interviews

In order to scope the project and understand the needs and goals of the organization, I started by holding a round of stakeholder interviews where I spoke with a total of 6 members of the Brooklyn Raga Massive Executive Team and Board of Advisors.

A screenshot of one of the stakeholder interviews I held with Brooklyn Raga Massive leadership.

The top 3 insights I gained from the stakeholder interviews that drove this round of design were:

  1. We want the content of our site to be current and reflect what BRM is doing at this moment
  2. We want our site to reflect how expansive and inclusive BRM is
  3. We need to make info for Funders/Granting Institutions more visible


User Interviews

Now that I had a clear understanding of BRM’s goals, vision, and requirements for the new website, I did a round of user interviews in order to better understand the needs of the following users: donors, artists, booking agents, and audience members. As mentioned above, the primary persona that I would focus on for the relaunch was the donor, but there were still aspects of the other personas that were necessary to understand in order to build out the MVP.

Because my time was limited for holding user interviews, I also spoke with subject matter experts, including fundraising consultants who helped to flesh out the needs and expectations of a donors when it comes to information and what they want to see on the website.

A glimpse of some of the competitor and comparator feature analysis I performed during the discovery phase of this project.

Competitor/Comparator Analysis

In order to orient myself in the space that Brooklyn Raga Massive was operating, I evaluated other competitor and comparator organizations to see what they did in terms of site organization and content structuring with regard to donations. I wanted to understand what design patters potential donors are used to seeing on other sites, so that I could make more informed design decisions to make the ease of donating straightforward for donors.

Define

In order to synthesize and make sense of all the information gathered in the discovery phase of the project, I used the help of fellow UX research Siena Tetali to help me affinity map all the data points I collected and develop personas that would then drive the designs for the new website.

My teammate Siena and I affinity mapping the data gathered from our user interviews.

As mentioned earlier, I identified 4 primary personas who engage regularly with the Brooklyn Raga Massive website, but for the purposes of this website launch I focused on the needs, behaviors, pain points, and goals of the donors.

An image of the donor persona Siena and I developed based off of our user research synthesis

Once I had a clear picture of our donor persona Mila, I set out to work on the feature prioritization for the MVP for the website launch using the MoSCoW method where I mapped out what pages and features I would design and build for the October website relaunch.

A snapshot of the feature prioritization I did in collaboration with the BRM executive team.

Design

Rebranding process

This project required that I create a new logo and branding guide for Brooklyn Raga Massive that would also inform their email newsletters and social media campaigns. I worked with creative consultant Meera Dugal to define a new color palette, font selection, and logo that would better communicate Brooklyn Raga Massive’s evolving identity.

We set out to do this by creating a mood board where we shared ideas for inspiration for the color palette, fonts, and logo designs. From there we narrowed in on two designs and color pallets we felt conveys Brooklyn Raga Massive’s identity of being a South Asia Music Collective that was diverse, inclusive, inventive, raga-inspired, and artist centric.

A glimpse at the design process I went through with Meera using InVision Freehand to develop the logo and color palette

After several iterations and presentations of the logo design to the Executive Committee, our logo organically evolved into the logo below which Meera called a “collective” of logos to match the collective spirit and diversity of Brooklyn Raga Massive.

The old BRM logo is on the left and the newly designed logo is on the right

With a new logo developed, color palette selected, and font choices in place, Meera and I developed a branding guide that I used for the look and feel of the new website that I was about to design and build.

User Flows

At the same time that I was developing a new look for BRM, I got to work developing potential user flows and sketching out what some of the pages would look like.

Because the user we were focused on for the launch was a donor, the flow I designed for was the experience of a user coming to the website to make a donation to Brooklyn Raga Massive.

A potential user flow for a donor vising the Brooklyn Raga Massive Website

Design Studio

Since the most important flow for this iteration was the experience of the donor, I led a design studio with the BRM executive team where we sketched out possible solutions for the BRM donor flow and donation pages.

As we sketched we kept in mind the fact that donors expressed the following needs:

  • I want to be inspired by Brooklyn Raga Massive's Cause
  • I want to see all their different buckets of programming
  • I want to know where my money is going
  • I want a secure and easy payment process

These points drove some of the design decisions we made for the support us and donate pages.

For example, we made sure that "BRM by the Numbers" was near the top of the support us page so that donors could clearly see where their money was going.

On the support us page, we clearly showcase where the money is going and have a donate CTA clearly visible on the screen.

We also embedded an easy to use donation form that allows donors to choose 3 different secure payment methods for quick and easy payment.

A screenshot of the donation form available on the BRM website.

Deliver

Over the course of 4 weeks, I built out the new website using Webflow so that it was ready to launch in concert with the kick off of the new fundraising campaign in October 2020. To view the full website, click here.

Over the course of building out the site in Webflow, I had to solve additional problems with regard to what was the best service to integrate with Webflow for making donations on the BRM website. I also had to integrate the donation form with the CRM system they were using for donor tracking and communication, so I had to use Zapier to make these connections.

Results

In the first few days since the launch of the new website,

BRM raised nearly $2000 and attracted 22 new recurring donors.

Because of the tight timeline for the launch, I am currently working on next steps to do some usability testing of the new website and to scope out the second phase of the project where I would add in new features to address the needs of the artists and booking agents.