top of page
Image by Christina @ wocintechchat.com

East Bay Activist Alliance

Political Organization Website

Overview

The East Bay Activist Alliance (EBAA) is composed of volunteer activists and organizations in San Francisco's East Bay. They support strategic state legislative campaigns in key swing states and hand-picked nonprofit voting rights organizations. Using their large network of volunteers, they support selected campaigns by organizing and providing people power for phonebanks, textbanks, postcarding, and canvassing, and by raising funds. Their impact extends to important state campaigns as well, and can influence up-ballot federal election outcomes such as Congressional and Senate races and of course the Presidential election.

This organization was in dire need of a website. They had the passion, the leadership, and the people power but they needed a website to represent them to candidates and continue to connect and capture new volunteers as well. In this digital age their lack of a website was a huge hindrance to their growth and ability to achieve the organization’s goals. They needed a professional website to help legitimize the organization, support their communication and fundraising goals, and continue their impact.

Role

I was the sole designer who worked on this website design and development. My responsibilities included client meetings, presentation, communication, working on site map and information architecture, building wireframes (low to high fidelity), testing interactive prototypes, creating a style guide, developing the site on WIX, connecting existing CRM tool and domain, building out a blog, and training client on how to make content updates.

Objectives

  • Launch a modern, friendly and informative website with engaging brand storytelling

  • Increase organization’s overall trust and credibility with a reliable and professional website

  • Implement consistent brand aesthetic and user experience to make the site appealing

  • Work on overall site architecture and navigation for easy browsing and a frictionless experience.

  • Drive 'Get Involved' opportunities to fuel organization and volunteer growth through impactful storytelling.

  • Build a fully responsive mobile-first website on WIX.

Ideation & Prototyping

Site Map

After speaking to the client and understanding their needs for the site and working with them on the information and content that they wanted to include, I worked on structuring the site map. The site map helped to determine the structure of the site, the flow and the user interactions.

Site Map - EBAA.png

Prototyping

East Bay Activist Alliance came to me knowing that they desperately needed a website to represent them. They had a domain but didn't have the know how to put a site together, especially one that was engaging, transparent, dynamic, and attractive. I needed to build a strong website with Action Network CRM integration so they could continue to capture emails, build their database, and interact with users. 

My approach to this web design and development project focused on a clean information architecture and uncomplicated user experience. A top priority was to provide clear high-level overviews of the organization’s priorities and five ways to get involved.The site needed quick, clear paths to transparent information about candidates and easy methods to get involved or learn more. I also wanted to highlight their engaging brand story, as a group made up of volunteers from all backgrounds. The new website structure would need to showcase the essence and impact of the work they do to help drive recruitment.

Wireframe EBAA - Page.png
Wireframe EBAA - Donate.png
Wireframe EBAA - Home.png

Style Concepts

Style Guide

The concept for the color palette was predicated on this idea of politically flipping red to blue, as depicted in their logo, and in the mission of the organization. It was important to use blue in the site as well as red, but instead of using a traditional red I opted for a medium light shade of red which is less harsh and more friendly.

 

The choice of using rounded buttons was also in this same vein of conveying openness. This UI choice also makes the site feel more modern, which is another reason why I chose to keep with a single sans serif font, while using different weights and sizes to distinguish between headers and paragraphs. This maintained a simple and modern design throughout the website.

 

It was also important to use existing images and assets from the organization which feel organic and true to the grassroots work that they do, contributing to the organization's transparency and authenticity.

Style Guide - EBAA.png
EBAA - Mobile.png

Bringing it all Together

Final Product

The new East Bay Activist Alliance website is clean, modern and friendly. It reflects the high level of impact the organization has and the multitude of ways users can get involved. The design evokes their care for diversity and patriotism, while highlighting their mission through visuals and content. The site is optimized for mobile to engage with a younger user group while keeping navigation smooth for any type of user. Clear forms are just a click away at multiple points on the site to keep the barrier of entry low and capture users more easily. Sign-ups and email capture are the life line for an organization like this one in order to continue their mission and work. The new site has already seen great performance since its launch in April 2020.

EBAA Final Website Mock.png

Finished Website

Final Takeaways

Main Challenge & Lesson Learned

The biggest learning from this project was building a site from scratch; this was not a redesign, it was a brand new launch. It was also a great opportunity to be creative and build a site with the user in mind from concept to execution. I was able to work closely with the client presenting and receiving direct feedback that was implemented into the design. Focusing on interaction design was important, because having users "join" the organization was a key KPI. Users needed to be able to find and easily complete this flow from anywhere. I really enjoyed working on this project, and learning and growing my web design and development skills.

I think it is safe to say the client is ecstatic with the result.

Left Arrow.png

Before- Noon

Right Arrow.png

Seacology

bottom of page