Chicago Blues Revival

Harmonizing tradition and tech — Revamping the digital presence of a blues music nonprofit

Overview

I worked with Chicago Blues Revival to redesign their website and tailor the user experience for blues fans, musicians, and collaborators while considering the needs of an older demographic. Through three rounds of wireframing, prototyping, and user feedback, I completed a comprehensive redesign and delivered a full set of responsive designs, which received overwhelmingly positive user reactions and client satisfaction.

Role

UX Designer &
Researcher

Timeline

Jan - June 2023
(5 months)

Team

Individual

Type

Client Project

The Problem

Chicago Blues Revival (CBR) is a blues music nonprofit that aims to revive the blues culture in historic Chicago neighborhoods by organizing events and sponsoring programs. However, users are not using the website because it is outdated and presents usability challenges, particularly for their predominantly older user base: navigation is confusing, text and images are not accessible, and the mobile site is not responsive.

How can we redesign the website to provide a tailored user experience for both new and returning blues fans, local musicians, and collaborators, while considering the needs of an older demographic?

The Solution

A comprehensive redesign of the website to be modern and accessible, all within a responsive framework that adapts to both mobile and desktop.

  • User-centric information architecture ensures seamless navigation, fostering a sense of ease and engagement.

  • Updated branding guidelines breathe fresh life into the organization's digital presence, reflecting its vibrant identity while following WCAG accessibility standards.

  • New features deepen interactions, creating a more immersive experience for existing supporters and establishing a compelling first impression for newcomers.

Hearing stories

While I was already familiar with the nonprofit from past volunteering, I initiated a meeting with the founder to better understand the goals for their online presence. I then conducted 7 interviews with CBR supporters to examine specific user frustrations. By organizing my data set through affinity mapping, I uncovered several key issues.

People are not using the site

Instead, they primarily get news through the CBR mailing list and social media. Issues with the original site include:

  • Does not clearly explain what the nonprofit does or what initiatives they have worked on

  • The visual design is outdated and not interesting

  • The logo/text is difficult to read on some pages due to poor contrast

  • The mobile version of the site is not usable

  • Confusing navigation, with users expecting certain info to be on specific pages but finding it elsewhere

The Chicago Blues Revival website before the redesign

Three user personas

Speaking with the founder and existing users also helped me identify three user groups. I created personas to represent each of them:

01 - Brad, an avid blues fan, who needs a reliable and convenient way to stay informed about upcoming blues events to support the community and connect with other fans and musicians.

02 - Marcus, an independent musician, who needs help with promoting himself and securing consistent, well-paying gigs to stand out among competition and support his career.

03 - Carla, a longtime collaborator, who needs an accessible site that effectively represents her organization and collaborative events to generate increased awareness and support.

A closer look at the primary user

As the target demographic for CBR's events and a potential donor, Brad was defined as the primary user. Mapping his journey revealed significant frustrations with the site navigation.

Analyzing competitor strengths & weaknesses

I compared three direct and two indirect competitors and found CBR’s unique factor: they provide resources for musicians, organize events, and link to other relevant blues information. No other organization offers all three, positioning CBR as a potential one-stop information hub for Chicago blues fans.

However, they lack mobile responsiveness, context about their board members and partners, and interesting visual variety.

Reorganizing the sitemap

Since navigation was a key issue that arose during initial user interviews, I conducted a virtual card-sorting with 15 users. I had users sort 30 cards of various topics related to blues music and nonprofits into groups. From here, I analyzed common groups, decided what content and features were crucial, and designed a sitemap based on these conclusions. The biggest changes involved:

  • Creating new pages for musician information, external links, and ways to support the organization

  • Condensing archived events with upcoming events

  • Expanding the About page

Sketching for intuitive navigation & flow

I started my design process with rapid paper sketches, generating ideas through HMW and Crazy 8’s exercises. Then, I created wireframes and mockups and finally ended with the high-fidelity prototype. Below, you can see the ideas I brainstormed for the events page on the left with the more finalized versions on the right.

From paper to digital

My paper sketches served as a foundation for the low-fidelity prototype, which I presented to users to get feedback about the structure and navigation. I then created the high-fidelity prototype with final visual assets and conducted a final round of usability testing.

Design iterations

1. Improved navigation

I redesigned the navigation bar to include drop-down menus to meet users’ expectations. While oftentimes, the drop-down options led to the same page, seeing these options allowed users to quickly preview the content available on each tab and also allow for auto-navigation to that particular section.

Furthermore, many of the older users did not find it intuitive to click on the main logo to navigate back to the home page. Therefore, I added an additional “HOME” tab.

2. Clear events categorization

During the low-fidelity usability session, users were confused as to where past events were located. I redesigned the navigation of the events page to make past and upcoming categorization more prominent and intuitive using a group button.

The filter icon was also not immediately recognizable to all users, so I changed the button to simply say “Filter”. After all, the best icon is a text label!

3. Adapting content to mobile

Users were overwhelmed by text-heavy areas when viewing the mobile prototype, especially since a smaller screen required more scrolling. I added a horizontally scrolling carousel to repeated text content like quotes, so users didn’t have to scroll through walls of text.

Final desktop prototype

Final mobile prototype

Design system

Client & user reactions

“I love the final product. This is really going to elevate the user experience and build a community around this music.”

“It’s such a huge step up from right now. I can’t wait to see it actually live. It was worth the effort to get everything right.”

"The colors work really well together. It feels rooted in today and also in the history of the blues."

“You did a phenomenal job! It’s way easier to use and the new look captures the essence of Chicago Blues Revival perfectly.”

Reflections

This project was an incredibly rewarding experience and my first time working with responsive design.

Engaging with an older user base underscored the importance of understanding diverse user needs and pain points. For example, their feedback on seemingly intuitive icons and gestures surprised me, reinforcing the value of direct user interaction. Conducting multiple usability studies allowed me to refine the website's structure, navigation, and visual elements, better aligning them with user expectations and preferences.

I also had the opportunity to apply new UX strategies like card sorting and site mapping, enhancing my skill set and creating a more intuitive website. Card sorting improved my understanding of user mental organization, enabling me to create a logical and coherent sitemap. Additionally, designing for both mobile and desktop interfaces taught me to prioritize seamless user experiences across different devices.

Overall, this project empowered me to become a more inclusive and impactful designer, and I will continue to be driven by user insights in future projects!