State Senator Campaign Website
North Carolina State Senate candidate and political newcomer DeAndrea Salvador
was running in a newly drawn district and needed a fresh, welcoming website to stand out and appeal to voters.
Tech for Campaigns,
an organization that pairs political candidates with tech workers who volunteer their digital skills and talent to campaigns, especially campaigns in state and other down-ballot races.
Design a friendly, intuitive campaign website for NC State Senate candidate DeAndrea Salvador that clearly outlines her plans and priorities.
Political newcomer DeAndrea Salvador was running for NC State Senate in a newly redrawn district and needed to help voters get to know her and her platform.
The final campaign website clearly communicates DeAndrea Salvador's plans and priorities, helps users get to know her, and clearly directs users to voting resources and information.
Easy-to-use interfaces with clear calls to action make website navigation simple and intuitive.
Easily Scannable Text
Breaking down Salvador's proposed initiatives into short bulleted lists enables easy skimming, so users can quickly scan a page to find the information they are looking for.
With a "How To Vote" page that included buttons directing users to voting information and resources, I ensured lack of knowledge about voting was not a barrier to users.
My design process began by meeting with DeAndrea Salvador and her team to understand their goals for the website.
As a political newcomer, Salvador had limited name recognition, which meant her constituents were not familiar with who she was or which issues she cared about. Thus, it was crucial that her campaign website told her story, communicated the issues she cared most about, and left an impression on potential voters.
After meeting with Salvador and her team, we determined the main goals for the website that would be used to guide the design.
The final site should:
1. Feel fresh and welcoming to voters.
2. Convey Salvador's experience, knowledge, platform, and plans.
3. Increase voter turnout by informing users how to vote (the district was newly redrawn and the election was occurring during the COVID-19 pandemic).
Using the design goals as guidance, I then worked on determining the site's layout and information architecture. I worked with the team to group similar chunks of information together and to determine the pages and subpages that would make up the site. We also looked at other political websites to see common design patterns that we should follow to ensure the site was easy to use and understand.
I focused on making the site easy to use and navigate to ensure that potential voters could find the information they were seeking. The home page served as a summary of each of the subpages, so users could navigate directly to those pages via the navigation menu or scroll down the home page to see what interests them.
I used simple 2 or 3 column layouts to show a variety of Salvador's plans and priorities to ensure users had a comprehensive view of each section's information.
Fresh, Welcoming Interfaces
Salvador and her team wanted the site to feel fresh and welcoming to voters. Since Salvador was young and had a non-political background, I was able to experiment with bold, bright colors rather than being confined to more traditional political colors like red and navy blue. Her logo already had bright blue in it, which I supplemented with a cheerful yellow secondary color. I used these colors, plus plenty of white space, large images, and easily readable text throughout the site to help emphasize important content and add visual interest to the interfaces.
These visual elements helped Salvador's site stand out while also feeling welcoming and friendly to website visitors.
Easily Accessible Buttons
I wanted to ensure it was as easy as possible for website visitors to donate to Salvador's campaign or get involved. I placed buttons for these two actions prominently on the home page, with the "Donate" button highlighted. No matter the screen size or type, the buttons were large enough to easily find and click or tap.
Clearly Defined Sections
When website visitors viewed Salvador's home page for the first time, it was essential to keep them engaged as they scrolled down the page.
To avoid overwhelming users with too much at once, I used color blocks and white space to help separate chunks of content. This allowed users to easily scan each section to find the information they were looking for.
More information-heavy sections were spaced apart and broken up with smaller, more bite-sized chunks of information, quotations and endorsements. This helped avoid showing too much content while still providing users with the information they needed to know.
Clearly Communicating Key Issues & Information
Since voters would be unfamiliar with Salvador, her website needed to clearly convey her experience, knowledge, platform, and plans. Additionally, it needed to feel like it represented Salvador's voice and was coming from her. To emphasize Salvador’s voice, I included quotes from her throughout the site, all formatted the same way with bold text on a bright blue background. These personal statements commanded the site’s visual hierarchy and ensured that viewers would read them.
Defining District Lines
To help clarify the new district lines, I included a “How to Vote” page with an interactive map of the district and text explicitly stating, "If you live within these boundaries, you are a Senate District 39 voter."
Voting in a Pandemic
Salvador was running for election in November 2020, in the midst of the COVID-19 pandemic. This meant voters were less likely to vote in person and needed to understand how to request a mail-in ballot in North Carolina. I included buttons on the "How to Vote" page which directly linked users to this information.
DeAndrea Salvador won her race with 62% of the vote and flipped the District 39 seat!