Elizabeth Grabe for Wisconsin homepage in an iPhone screen

Elizabeth Grabe for Wisconsin homepage in a laptop screen

Engaging Voters in Small Town Wisconsin

Website Design: Elizabeth Grabe for District 51

Challenge

Elizabeth Grabe is running for Wisconsin assembly representing District 51, a rural area in southwest Wisconsin. My challenge was to design an accessible and engaging website to encourage voters from the district to understand her positions, donate to her campaign, and attend her community events.

Process

Researched the communities Elizabeth is campaigning to represent
Created a website style guide in line with the campaign’s existing branding
Created high-fidelity website mockups in Figma to review with the campaign
Iterated on designs to align with the campaign’s needs
Passed off my designs to our team’s developer to be built in WordPress

Outcome

After launching the site, Elizabeth received 14 more official endorsements. Although the election results were not what we desired, the website had a significant positive impact on Elizabeth's campaign. She ended up winning 48% of the electorate- a strong performance for a first time candidate running against an incumbant.

Getting Started

I got involved with this project through Tech for Campaigns, a non-profit that matches technically-skilled individuals with democratic candidates to help them with their digital marketing strategy. I was placed as a Website Designer to work on Elizabeth Grabe’s campaign for Wisconsin’s 51st District Assembly. I worked with a Team Lead, Website Developer, and Copywriter to create the website over the course of seven weeks.

Research

I have not lived in or visited the 51st District of Wisconsin, so I began the project by researching the area to understand the primary users of the website. I looked into the district’s demographics, industries, attractions, and popular activities. From my research I determined my primary users:

Are mostly white (94%)
Tend to be older (20% over 65)
Enjoy outdoor activities such as hunting and fishing
Live in small towns and rural communities

Candidate Briefing

Our team had a zoom session with Elizabeth to better understand her needs and wants for the website. She explained her motivations for running as well as the recent redistricting of district 51- opening up an opportunity to flip the seat for democrats. She has web design experience and strong aesthetic preferences, which I took detailed notes of to ensure the design would meet her needs. Her description of the district lined up with the research I had done. From these initial research points, I had a clear vision to move forward with my design:

Ensure the website is fully accessible for older users
Highlight nature and the natural beauty of Wisconsin
Use the existing campaign color palette of blue, green, and white
Prioritize clean, simple design- no italics or artistic fonts

Design Process

Style Guide

The campaign already had printed marketing materials so it was important to maintain brand integrity. I imported the colors into my design space, found a suitable font alternative for web purposes, and curated an appropriate icon set. I outlined spacing guidelines to promote consistency throughout the design and used these to begin designing basic web components.

Accessibility

Each design choice was validated by accessibility checks to ensure WCAG compliance. I checked every color combination to ensure all text and graphics would have enough contrast. I also ensured buttons and links on the mobile design were large enough to comfortably press and all fonts were clear and readable.

Favicon Design

To highlight the campaign’s identity and individuality, I created a custom favicon design based on the campaign logo. I used the same colors and hill design that Elizabeth said she loved, and the number “51” to represent the district she is running in.

A call to action banner displaying Elizabeth's top priorities and links to learn more.

Sample website text against a photo background, showing off the beauty of Wisconsin.

An image highlight next to sample website text with a translucent blue banner running across the bottom of the image

An example of a slideshow component for Elizabeth's website, showing off local state parks

Component Design

Since this website had to be completed quickly and require few revisions, I designed modular components that could be easily implemented and repeated. Since the campaign wanted to emphasize the natural beauty of Wisconsin, I placed most text next to or over image highlights. I included a light blue overlay to tie the images into the site color palette and create consistency throughout the site.

Iteration

As the design was developed, our team met had regular check-ins with the campaign to make sure we were meeting expectations. I got consistent positive feedback on my designs and made changes as the full vision was realized. The changes increased design consistency, created easier page navigation, and pushed the design to look professional and polished.

Homepage Hero

Before

My original idea for the homepage hero was to utilize Elizabeth’s drone photography to highlight the natural beauty of her farm. I was hoping she would be able to provide some overhead drone video, but unfortunately that wasn’t possible due to time constraints. I received feedback from the campaign that the farm photography was not human enough to connect with voters, and that they did not want to immediately ask visitors to sign up upon visiting the homepage.

A photo of ELizabeth smiling with a constituent with a blue banner across the bottom reading 'Elizabeth Grabe for District 51 Assembly'

After

I changed the primary hero image to be a slideshow of photos of Elizabeth smiling with voters and volunteers. It projected a warmer, more inviting tone as the first impression of the site. I changed the “Sign up for updates” form to two buttons- “Donate” and “Get Involved”- for users to direct themselves to the appropriate forms if they wanted. I added a blue banner to the bottom of the images to improve the readability of the header text, and to match the styling of the other images on the site.

Priorities Cards

Four cards laid out in two rows, detailing Elizabeth's legislative priorities.

Before

I originally proposed a card style for the priorities page to create a clean, modular design. It was one of the first components I designed for the site, however, I didn’t end up using it anywhere else on the site. The campaign requested that I change one of the photos, as well as one of the icons.

Elizabeth's priorities laid out vertically, with photos matching each topic.

After

Instead of a single-use component, I decided to switch the priorities cards to image highlights. I used this component on nearly every other page of the site, so making this change increased design consistency. I changed the content as requested by the campaign and added text highlights to make the large blocks of text easier to navigate.

Conclusion

Screenshot of Grabe for District 51 website

Results

Our developer did an amazing job translating my designs to the web and the campaign reported positive engagement from the site. Notable accomplishments since launching the site include:

14 new official endorsements.
Increased volunteer sign-ups and campaign donations compared to the months prior.
48% electorate vote for a first-time candidate against a multi-term incumbant.

Final Thoughts

I felt intimidated working on this project because my team members all had significantly more tech industry experience than me. This website has the opportunity to make a big impact in an important election year, and I’m proud to have been part of the team that put it together. Overall, I am extremely happy with the results and the abilities I showed throughout this project. I felt I did a good job listening to the candidate’s needs and wants and implemented them on schedule. If I had time to continue refining the design, I would:

Perform user testing on users similar to Elizabeth’s target demographic to look for any pain points
Update photos with new images from recent campaign events
Optimize the design for tablet (currently optimized for desktop and mobile)

I was able to communicate effectively with my team to produce a cohesive, attractive, and most importantly, accessible website that the client is happy with. Despite the election results, I am proud of the work I did for the campaign and feel I made a significant positive contribution.

About

Work

Contact