SFJazz
UI Redesign Case Study
.png)
Project Overview
​Objective: Conduct a website redesign for a non-profit organization
Context: Group project as part of UX/UI Bootcamp at UC Berkeley
My Role: UX/UI Designer - User Research, Interaction Design, Prototyping, Usability Testing
Duration: 2-week sprint - August 2021
Team Members: Isha Dubey, Harry Morgan, Raquel Rivera, Patrick Keegan
Tools Used: Figma, Miro, Trello, UX Metrics, Google Survey, Zoom, Slack
Problem
Jazz enthusiasts with disposable income are willing to donate to charitable causes but view SFJazz primarily as a ticketing site and overlook its charitable work.
Goals
-
Increase conversion rates on the website for ticket-buying, membership, sign-up, and donation.
​
-
Improve usability and accessibility of the homepage to make the website more inclusive for less tech-savvy audiences (the core-ticket buying demographic is aged 55-75).
Design Process
Research
Introducing SFJazz
SFJAZZ is a recognized international leader in jazz creation, presentation, and education. SFJAZZ explores the full spectrum of jazz—from the music’s origins in the African American community to its diverse present-day expressions around the world.
​
As a 501c3 non-profit organization, SFJAZZ works to develop the audience for jazz in the San Francisco Bay Area and beyond. SFJAZZ celebrates jazz as a living art form, built on a constantly evolving tradition.
Client Needs
Ross Eustis
Digital Projects Manager
Nate Landry
Web Producer
TJ Gordon
Director of Marketing
-
Redesign the current sfjazz.org website, focusing on the homepage, membership, donation, and education.
-
Incorporate insights from 2016 website redesign and 2021 UX consultant's report.
-
Prioritize accessibility and bold design (the main-ticket buying audience is aged 55-75).
Key User Insights
.png)
Survey Data
We did a Google Survey for our potential users about their habits and expectations about donating to nonprofits. Some of our key takeaways:
50%
of respondents earned an annual income between $50,000 and $99,000.
$100 - $500
was most commonly contributed annually to non-profits.
80%
donated to two or more charitable organizations in the last 12 months.
Discovery
Based on our competitor analysis, we were able to borrow elements that were particularly effective or eliminate others that were not, such as:
A Look At Our Competitors
-
Emphasize the information architecture hierarchy by using clear language
​
-
Increase content visibility with well-organized cards
​
-
Strengthen the banner carousel by displaying more balanced imagery with more visible indicators
Alternative Pathways
This was a critical step in making impactful changes to the current information architecture. After completing an in-depth content audit of the existing site, we conducted an unmoderated open card sorting exercise with a total of 10 participants on uxmetrics.com. Our key findings were:
-
67 unique categories created suggest that the varied content on the site is hard to coherently organize.
-
"Events", "Membership", "Tickets", "About" were the most common categories (3+ responses).
-
Participants faced the most difficulty categorizing the charitable and educational outreach pages.
Define
Information Architecture
The open card sorting results supported the structure of our new site map. Some of the changes we made and the reasons why were:
-
To remove ambiguity within the primary navigation, we changed "Education" to "Learn" and "Support" to "Support Us".
-
We elevated "Learn" and "Support Us" in the navigation hierarchy for greater emphasis and visibility.
-
To remove educational opportunity confusion, we differentiated between adult and teenage learners.
Ideate
Paper Sketches
We each sketched paper wireframes and discussed the layout options that would best address the target audience's needs. We then digitized our layouts into a low-fidelity prototype and began collecting feedback from user testing.
.png)
Low-Fidelity Wireframes
Prototype & Test
Usability Testing
We conducted five usability tests on our low-fidelity prototype, and asked users to complete three tasks:
Task 1
-
Make an online donation to SFJazz
Task 2
-
Enroll in a Discover Jazz class
Task 3
-
Sign up for the cheapest membership tier
Hi-Fidelity Wireframes
Current Homepage Design
Redesigned Homepage
Eliminated sticky left-side scrolling
Organized cards to increase content-visibility
Brought visual balance to the footer
.png)
Current Support Page
Redesigned Support Page
Clarified donation pathway options
.png)
Redesigned Checkout Page
.png)
Banner Carousel
Redesigned Membership Page
Cards
Hi-Fidelity Prototype
Go ahead, try it for yourself!
Goals Revisited
I don't have access to the metrics measuring how our redesign impacted conversion rates. Still, we can say that we improved the overall accessibility of the site for the less tech-savvy target audience by:
-
Increasing content visibility with well-organized cards
-
Eliminating the disorienting sticky left-side scrolling of the homepage, and
-
Including more clear and concise languaging
On this project, I collaborated with two fantastic UX/UI Designers. It was an educational experience as I took on the role of interaction designer. SFJazz was very pleased with our designs with plans on implementing our website suggestions in 2022. Here is what SFJazz had to say about our work:
Patrick and his team did incredibly thorough work testing out the UX of SFJazz's website. We were impressed by the recommendations they came back with, and we plan on implementing a number of them! Cheers!
.png)