SFGMC Case Study
Project Type
Website redesign
DURATION
2.5 weeks
TOOLS
Sketch, Illustrator, Invision
SKILLS
UX / UI + Visual Design
THE CHALLENGE
The San Francisco Gay Men's Chorus wanted a website redesign. They saw this design solution as the answer to increase their ticket sales, donations, and sponsorships. Additionally, they wanted to make their brand relevant and attract a younger audience.
THE SOLUTION
After user research, my partner and I came to the conclusion that a website redesign was the best way to target a new, younger audience and fulfill business goals. With such a short deadline, we ultimately focused on the home page, event detail page, and donation flow.
MY ROLE
My partner and I made a conscience effort to equally take part in all phases of the design process. This included user interviews, heuristic analysis, market research, content strategy, and visual design.
WHO IS SFGMC?
SFGMC is a non-profit choral group with a history deeply rooted in San Francisco. They began rehearsing in October 1978, and gave their first impromptu concert less than a month later on the steps of SF's city hall during a candlelight vigil for Harvey Milk. They are recognized as the first gay choral group in the world and are often credited with starting the LGBT choral movement which has grown to over 300 groups worldwide.
OUR PROCESS
SFGMC is an incredible organization and we felt honored to work with them. We knew that SFGMC wanted a website redesign, so we began our research by conducting a comprehensive audit to see what their current website was doing well and what needed work.
Homepage
Give Page
CURRENT SITE
After taking inventory of the current site, we came to the conclusion that there were three main areas where we could focus our redesign and vastly improve the site:
The structure and organization
Strategic content
Prioritization of core tasks (buy tickets, donate, sign up for their newsletter)
ANALYTICS
We also had access to SFGMC's Google analytics which illustrated some concerning behavior when users came to the current site:
70%
Site traffic drops almost 70% from the homepage
70%
70% of sessions were for only one visit
63%
63% OF ALL SITE SESSIONS ARE 0-10 SECONDS
24 - 35
MOST VISITORS ARE IN THE TARGETED AGE RANGE
What we learned from the analytics was that our target audience group was aware of SFGMC. Now, if only we could get them past the homepage.
DEFINING THE USER
One of our major challenges throughout this process was accurately defining our primary and secondary users. SFGMC is a fine art performance group in addition to a non-profit. We finally narrowed down our scope to two main user groups: those interested in attending fine arts performances and those who give to non-profits.
Based on this, we conducted several user interviews. During these interviews we focused on what a user wants to see on a non-profit / performing arts website, motivations behind why a user would attend a show or give to a non-profit, and how users find out about new shows / non-profits. This feedback allowed us to further define our user needs and create personas.
SEE ON WEBSITE
...get a sense of who they are, what they do, and what they (the user) can actively do on the website - clear identity.
why GIVE / ATTEND
...have confidence and trust in the organization's direction and identity - credibility.
HOW HEAR ABOUT
...have had a "word of mouth" interaction with a friend or acquaintance - connection.
personas
We developed a main and secondary persona to address SFGMC as both a performing arts group and non-profit. Jill is our main persona, representing the new audience that SFGMC wants to attract. Dave is representative of their current audience members who would like to get more involved with SFGMC.
DESIGN SOLUTIONs
At this point, we were able to synthesize all of our data, research, and feedback and develop our design solution approach. Given the short duration of the project, we decided to focus on four main design solutions.
These design solution approaches eventually informed the features we developed.
achieve clear site infrastructure
establish identity
leverage social media - modern day 'word of mouth'
support credibility
1. Reorganize site structure
The challenge associated with reorganizing the site structure was framing it under the lens of a non-profit or performance art group, the client helped us decide. SFGMC is very much a fine arts performance group that also happens to be a non-profit.
Because of this, we focused on promoting their performances to captivate visitors on the site. We introduced secondary drop down navigation, which was missing in the existing site. We also added 'quick nav' buttons at the top to make actionable items (buying tickets, signing up for their newsletter, and donating) incredibly easy.
2. more considered Homepage
Based on our user interviews, visitors to the site really wanted to get a sense of who SFGMC is from the homepage.
We redesigned the homepage layout to include the featured event, upcoming events, video, and a chance to listen to them. At one glance, a visitor can truly understand the energy of their shows and make an informed decision on attending an event.
Homepage iteration
Homepage iteration
3. social media integration - specifically sharing
From our user interviews and surveys we also learned that the majority of people learn about new shows and non-profits by 'word of mouth'.
Today, 'word of mouth' has become the social media platform. Because of this, we wanted to emphasize the ability to share any event that SFGMC through social media. We incorporated share buttons with every event, including the donation page. Users will have the capability to share that they donated to this great organization (sharing how much one donated is not a part of it).
4. More efficient and credible donation flow
One of the main questions a user has before donating to a non-profit is, where is this money going?
SFGMC recognized this and was completely on board with making their donation system much more transparent. Not only can a user see where the money is and where it's going to, they're also aware of how much money SFGMC is still hoping to raise, and have access to all of their financial information. Informed donators are happy donators.
SFGMC was already planning on going forward using a third party donation system. We incorporated this system seamlessly into our redesign.
Donation page iteration
Give page iteration
WEBSITE REDESIGN
Click below to see our website redesign prototype.
