August 2018

SF Dems

Summary: A school design project in partnership with the San Francisco Democratic Party to redesign their website, specifically to improve community engagement.

Goals: Help the SF Democratic Party increase its engagement with the 250,000 registered Democrats in San Francisco.

Key Discovery: Finding the right balance of research to fuel key design decisions. With a strict deadline of 3 weeks, we had to move fast and plan ahead to ensure our research resulted in useful designs.

Outcome: A thorough design documentation and presentation to key members of the SF Democrats. They were thrilled and are planning to build the site.

Team: 4 Designers

My Role: UX Designer


Members of the San Francisco Democratic party and general public are frustrated with a lack of easily accessible information for local party and club events, meetings and opportunities to promote and engage on political issues. How can a website help solve these frustrations?

"I would love to get involved, but its hard to know how. We're fired up and ready to go."

SF Democratic Party Member


The goal was to understand why people use (or don't use) the website, how they get to the website, what they are looking for, and what they want to do. We also considered what is or is not useful on the current site, and what they want to see from the SF Democrat organization relating to events and engagement.

Contextual Inquiry

We partnered with SF Democrats (DCCC) to accesss existing survey data, background data on affiliate clubs, and attend relevant events.

Our team attended a monthly club meeting, a DCCC fundraising event, and a campaign office. I personally talked with DCC members, club members and leaders, and campaign volunteers.

We learned there are 3 main stakeholders: DCC members, club members and leaders, and members of the SF Democratic Party. All of these may or may not be involved as they want to be.

User Interviews

These conversations informed and focused our interviewing and survey efforts.

We sought to learn the main frustrations of Democratic Party members, club members, and club leaders.

Ultimately we interviewed 16 people and looked at hundreds of survey responses.

Why aren't people attending events?

Don't know how or where to get the information
Don't have enough time
Location isn't conventional
Disagree with the party

Affinity Mapping

Key Findings

No single place people can go to find out what is happening
Affiliate clubs want more cooperation with the SF Democrats (DCCC)
People don't know where to go to learn more about clubs or the SF Democrats
There's little to no communication between clubs, SF Dems, and others

"We don't know what the other clubs are doing."

SF Democrat Club Member


An online platform for the SF Democrats that provides current and accurate information regarding local party and club events, meetings, volunteering, and other actions. This provides one central online location to connect the varied San Francisco Democratic communities.


We developed numerous sketches and wireframes before sharing a high fidelity mockup ready for engineering. I led this phase of the project and built the interactive mockup using Sketch and Invision. We conducted dozens of usability tests through 4 phases of iterations.

The Existing Website

1. Label is not accurate to the content it contains

2. Tabs contain redundant info, Information Architecture needs assessment

3. Paragraph of text is unlikely to draw attention despite its importance

4. Users are unclear what this is for

5. Only shows one meeting although there are actually more

6. Large list is not easy to read


We sketched on paper and refined our various ideas. These are my sketches.

Here you can see the main pages we made for the project: A central "hub", events list and detail pages, club list and detail pages.

Home Page Evolution

Here you can see the central hub or community home page evolve through iterations.

We analyzed other similar tools from our research, and took inspiration from Facebook, Meetup, and Eventbrite

The Event Cards

Events are a key component of this entire website. As such, I designed a modular card which could display key information and be reusable throughout the site.

1. First iteration had lots of detail

2. After usability testing information was removed

3. Users expressed keen interest in dates so that was highlighted

4. Card was made taller to show information without covering image

5 & 6. Color changes

The Event Page

After clicking on an event card, there is a full screen detail page. This was optimized based on iterations and usability testing.

1, 3, 4, 6. Register button increases visibility through iterations

2, 5, 7. Host information, moved for clarity and to balance the page

Finding Events

Its easy to find and register for events right from the main community page.

Joining a Club

Clubs are found just at the edge of the fold, and have beautiful images to direct users to them.

There are multiple ways to filter and find your club from the list, and each one has their logo shown.

Volunteering Made Easy

The Take Action page is found from the main page and lists upcoming events to participate in.

These can be hosted by any club but are not club specific meetings, rather they are political volunteer events.


We finished the project on time and presented our results to several members of the San Francisco Democratic Party. They were thrilled with our work and are actively seeking money to build the site as we designed it.

We delivered to them a robust design brief highlighting and explaining our findings in more detail. We also gave them strategic recommendation and all the tools necessary to take these designs to engineers to get started building a new functional website.

The four of us enjoyed working together as at team and all graduated from our design school, this project was graded with the highest marks in each category.