Brassica Website Rebuild

Redesigning History

Website Rebuild

My Roles
  • Product Developer
  • UX/UI Designer
  • UX Reseacher
Project Date

2022

Brassica is a musical band of historical re-enactors in the San Francisco Bay Area. Their original website was created in 2010 with no professional assistance or user experience testing.

 

They’ve requested me to act as their UX Designer to redesign the site. The new site will have a modern layout and improved usability, while meeting the goals established by the band.

Challenge

Given that most bands communicate with their audience through social media and music sharing sites like Bandcamp, Brassica wants to evaluate what is the purpose of a modern band website.

 

Because the website will be maintained by the band, it must be easy to update while looking modern. This requires expressing the most amount of necessary information in simple, organized sections, preferably in only a few pages. In this way, the band are not only stakeholders; they are primary users.

Goals
  • Represent the band identity through images and story.
  • Communicate important news including tour dates and new merchandise.
  • Provide opportunities to sample music and purchase merchandise.
  • Link the user to the band’s social media outlets.

Results

Original Homepage
Updated Homepage

User Research

In order to determine the goals and stylistic preferences for the new website, I took a three-pronged approach to research:

1. Interview the band to evaluate their needs and expectations.

 

The band’s primary concern was the ability to update and maintain the site. They liked the previous aesthetic, fonts and color choices. For the update, it made sense to keep the look and feel, while simplifying the color palette and match it to current accessibility standards.

Brassica on ZOOM

2. Interview fans and potential fans from a variety of demographics.

 

The general public interviews ranged from people who had never heard of the band, or their particular musical genres to super fans. Across the spectrum, every interviewee agreed most information about a band can be found on their social media platforms. This has the advantage that a person does not have to exit their favorite app.

Typical Brassica Fan

Age

40+

Hobbies
History, Theater, Folk Music, Cosplay,
Tabletop RPGs, Top Hats

Music purchasing habits
More likely to buy CDs than download.

Preferred Social Media
Facebook

Potential Brassica Fan

Age

25-39

Hobbies
Historical dramas, Cosplay, Online RPGs,
heard “Wellerman” on TikTok, Snapback Caps

Music purchasing habits
Streaming music services like Spotify

Preferred Socia Media
TikTok, Instagram

3. Survey band sites with similar genres and fan bases.

 

Band websites focused on two main messages – Band Identity and Merchandising. Some bands used to site to introduce new fans by showing more imagery and descriptions. Other bands, generally ones with a more established fan base, put merchandise and ticket sales at the top of the page before explaining who they were and what they were about.

Band Website Primary Messaging

New Goals

After reviewing similar band and artist sites for content, the findings were similar. The primary goals of the sites were to either sell merchandise, or promote the band identity, particularly because these artist perform outside the most common musical genres. Most sites also had the goals of broadcasting tour dates, and direct asks for money via tip jars or Patreon. They all provided prominent CTAs to direct viewers to their social media platforms.

Attract new fans
Sell merchandise
Ask for patronage
Announce upcoming tour
Direct fans to social media

Architecture

Site Map

I evaluated task and user flows to match the site goals, then created a site map in Whimsical to establish the page flow and construction.

Design

Color and Style

I consulted with the band on their opinions of the current designs and what could be improved. The band liked the font and general color scheme. They agreed that the textured backgrounds looked dated, and some of the motifs were grainy. Keeping in mind this information, I designed a new style tile.

Wireframes

I built the wireframes in Figma to interpret the user flow into a visual design. Before building a hi-fi version of the pages, I asked band members and potential fans to walk through the wireframes to ensure logical usability.

Home

Gallery

Store Item

Hi-Fi Screens

Then I combined the wireframes and style tile to create the first iteration of the website.

Home

Gallery

Store Item

User Testing

User testing was conducted using a Figma prototype. I tested with three different audiences: the band, a group of potential fans, and a typical fan. Each was asked to evaluate the style, flow, ease of use.

 

Did the site meet the band’s goals?

User Testing Tasks

1. Navigate Pages

2. Review Gallery

3. Purchase Merchandise

Usability Results

After testing the prototype, fans were asked to rate how they liked the site. Because navigation was successful, the quantitative data focused on content. What did the fans want see on the site?

Fans Want More!

Gallery/Stories

Identity/Branding

Music/Videos

Fans Want Less!

Social Media Content

Iterations

Final Layout

Fans made specific layout requests to highlight the preferred areas:

  • GALLERY relabeled ABOUT US to capture biographical viewpoint.
  • STORY moved to top, followed by LATEST VIDEO and PHOTOS.
  • MUSIC and SHOP combined to make tracks easier to find and connect music to purchasing. Song samples added.
  • NEWS AND REVIEWS removed. Fans prefer to find up-to-date information directly on the social media sites.
  • Descriptive scrolling banner added to home page, describing the band’s varied and esoteric repertoire.

Header Scroll

Home

About Us

Store Item

“I think this looks really good, Tazz. Thanks for all the hard work!”

Mark D.
– Musical Director of Brassica

 

Summary

In the last decade, sales and marketing in the music industry has moved from individual websites to social media and streaming services. Maintaining a private site can be expensive and time consuming without a guarantee of enough traffic to validate the effort. It was interesting with this project to research the most fundamental question: Why? Why does a band still need a website?

 

A band certainly doesn’t need one, but it does help. The site works as a supplement to social media, and a repository for fans to find all the important information they need in one place. 

Next Steps

The ultimate goal is the take the site live, replacing Brassica with the real band. To accomplish this, I will work with the band to finalize the design, then work with the technical team to build a functioning site.