Music Collective Website Redesign

Objective

My objective 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, with secondary users 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.

Scope & Constraints

The scope for this project was to build a responsive website that included the minimum required pages to meet the needs of the organization and the expectations of donors and granting institutions. The pages we agreed would be required for the launch were: home page, about pages, leadership and team pages, donation pages, ensemble pages.

The main constraints for this project were the budget and timeline. Because of the low budget, I built the responsive website on webflow, in addition to researching and designing it. 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.  

Discover

For the discovery phase I engaged in the follow UX research methodologies:

1. Stakeholder Interviews
2. User Interviews
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.

The top three 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.

The top three user insights I learned from the user interviews, that led my design choices were: 

1. Users want to know the impact of their donation
2. Users want to know where their money is going
3. Users evaluate the legitimacy of an organization before choosing to donate

These main insights from users and Subject Matter Experts were significant in many of the design decisions I made for the website, which I will explore further in the design section of this case study.

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

Affinity Mapping

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.

User Persona Creation

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 primarily focused on the needs, behaviors, pain points, and goals of donors. The main insights, as I mentioned above that are reflected in this user persona for donors, that drove decisions for the new website were the fact that Mila wanted to see the impact of her donation, she wanted to make informed decisions about her donation, and she wanted to be able to trust the legitimacy of Brooklyn Raga Massive.

Feature Prioritization

With Mila's needs in mind, 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. Some pages and information that were critical for the new website included: 

• The Mission and History page is necessary for the MVP because donors want to feel inspired by BRM's mission
• Creating a press coverage page to help further establish BRM's legitimacy as an organization; showing that they've received coverage from notable publications such as the Wall Street Journal, the New York Times, and the New Yorker, supports this
• Showing who the people in charge of the organization are and make it easy to contact them
• Highlighting the impact of donations with numbers and infographics
• Clearly stating that 85% of donations go directly to musicians
• Outlining all of the programs that donations contribute to helps donors to see where their money is going and what the impact of their donation would be
• Designing a short and easy donation form that met expectations that donors have for online payments from their experience either donating to other causes or making purchases on e-commerce sites

‍

Design

Remote Facilitated Design Workshop

Since the most important flow for this iteration was the experience of the donor, I facilitated a remote design workshop over zoom 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.

Deliver

To conclude, I'll share with you some of the key design insights that I learned from the user interviews and sketched out in the design workshop with the BRM Executive team that I implemented in the final design and MVP.

‍

BRM by the numbers

For example, I 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.

Short and easy donation form

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

Clear articulation of BRM's Mission Statement and History

I created a page that show's a bit of BRM's history and clearly articulates it's mission statement, which was something that all the donors I interviewed said was important to them when considering whether or not to donate to a nonprofit.

Press Coverage

To further showcase Brooklyn Raga Massive's legitimacy as an organization to donors, I built out a press page with significant quotes and links to articles by important publications such as the New York Times and the Wall Street Journal.

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.