Case Study
Hackathon, Cooperative Impact Lab
SPONSOR
Jeanine Abrams McLean, President of Fair Count
TEAM
Austin Weisgrau, Adam Miller, Ari Trujillo-John, Ned Howey, and Rob Eisenbach
ROLE
UX Designer, Front-end Web Dev
TIMELINE
5 Hour Hackathon
DELIVERABLE
Community Voice, a web-based mobile app for real-time canvassing sentiment analysis
TOOLS
Framer, Figma
Case Summary
On May 31, 2024, Cooperative Impact Lab (CIL) hosted a one-day "AI for Organizing & Campaigns Hackathon" in San Francisco to foster collaboration and innovation in AI for social impact.
Working with Jeanine Abrams McLean, president of Fair Count, and two back-end software engineers (Austin Weisgrau and Adam Miller), I created a web-based mobile app in Framer. The app used AI to analyze constituent sentiments in “real-time” to better understand and address motivations and challenges during canvassing efforts.
Prior to this hackathon, Fair Count had partnered with CIL to create a proof of concept (POC) in Mississippi to test using AI to perform voter sentiment analysis.
This hackathon took the POC one step further, creating an app that automated several of the manual tasks.
Amazingly, we were able to complete the app in under four hours, leaving us plenty of time to craft and practice our 5-min pitch. After the pitch competition, our team was selected as the grand prize winner. 🏆
Tools
Framer
Figma / Figjam
ChatPGT 4o
Google Slides
Fair Count is a non-partisan, 501(c )(3) organization founded by Stacy Abrams, focused on voter education and accurate census counts. They work with Historically Undercounted Populations to achieve a fair and accurate US census count of all people to strengthening the pathways to greater civic participation and legislative representation.
Proof of Concept (POC) Test
In the fall and winter of 2023/2024, Fair Count partnered with the Cooperative Impact Lab (CIL) to experiment with integrating AI tools into their voter education and organizing efforts.
Together, they tested a new process where canvassers would record short voice memos for each conversation in the field. Then Fair Count would transcribe these memos using Fireflies.ai and stored them as text files. Later, they fed these text strings into Claude AI (Anthropic) to extract insights around voter sentiments, motivations, and barriers to voting.
POC Results
The Claude AI was able to provide county-level breakdowns, sentiment analysis, and turnout predictions, demonstrating its capability to process and make sense of the qualitative data. This approach showed that AI could significantly enhance the understanding of voter behavior and inform organizing strategies, despite some challenges with canvasser adaptation to the new workflow.
(Source: Cooperative Impact Lab, AI Case Study: Analyzing Canvassing Conversations with Fair Count in Mississippi, 3/14/24)
"How might we leverage AI to analyze constituent sentiment in 'real time' to better understand and address, motivations and challenges during canvassing effort?"
Fair Count Hackathon Pitch
Each of the seven non-profit organizations had five minutes to present their individual hackathon challenges to the hackathon participants. After which, each participant chose one and formed teams around a desired solution approach. I chose to work on the Fair Count challenge.
Fair Count did a great job teeing up a clear problem to solve: automating the workflow used in the Mississippi proof of concept.
I created these problem and solution statements:
Problem Statement
Fair Count needs a better way to do sentiment analysis of precinct-level voter information because the current method of collecting recorded voice notes, converting them to text, and then processing them with Claude AI is too time consuming and does not give them "real time" insights.
Solution Statement
Automate the POC workflow through a combination of a mobile app that will allow volunteers to record voice notes easily while in the field and backend AI processing that allows Fair Count to run sentiment analysis of these voice notes in "real time."
Team Brainstorm
We brainstormed on how to create a functional prototype of a mobile app that would address the key challenges in the problem statement:
1) How to capture a voice recording, translate it to a text string, and save it for subsequent AI sentiment analysis
2) How to integrate AI into the backend to perform sentiment analysis of stored text-based data
3) How to build a simple mobile app to facilitate data capture
Process Map
Here's the rough process we created as a team for our users: canvasser volunteers with Fair Count.
User Flow
I then translated the process into a user flow and screens. This was revised during the design process.
Once the team aligned on the user flow and screens, we had five hours to complete our app, create a pitch, and present our solution.
Visual Aesthetic and Design System
As the UX designer on the team, I set about creating a quick visual design system. My first step was to to quickly build a mood board in Figma using Fair Count's existing visual aesthetic. These were just simple screens shots I grabbed from my iPhone 13.
Next, I pulled the colors from the Fair Count website into Figma. Purple hex #652887 appeared to be their brand color, so I chose it as the primary color for the app. I then created a desaturated version of #652887 to use as a secondary color (#E7DFEC).
Jumping into Framer
Normally, I would sketch some ideas or start "creating boxes" in Figma, but there wasn't time for that. Instead, I jumped right into Framer (no-code website building platform) and started creating the home screen for the Phone breakpoint using a 390px width (which is good for iPhone 13 and later).
Next, I took a navigation component I built for a different project and used it as a starting point to build a new navigation component for the Community Voice app. I then attempted to design the voice and geolocation permission interactions, but I had to cut bait on that because it was taking up too much time. This resulted in a major simplification of the home screen with just a header and two (and later three) buttons.
Below is an example of the Framer dev environment for the app home screen.
Getting Team Feedback
Once I had the simplified home screen and built the navigation header, I socialized it with the team to get feedback. The team was really excited how things were shaping up, and loved the fact that we would have a live website to show off for the pitch competition. The feedback I got was to simplify more and focus on only the most important screens for the app demo: the recording voice memo and generating a report screens. (I added a fourth screen called "conversation starter" before we stopped to work on the pitch deck).
Integrating the Backend
Earlier in the day, we decided to use iFrames to pull the necessary recording and report generating functions into the website/app. That simplified greatly the type of interactions I'd have to code directly in Framer. Framer makes this easy with a standard component just for iFrames.
Community Voice App
The screen below is the live website app. Click HERE to view on your own device. Best viewed on a smartphone.
Here's the deck we presented to a panel of social impact investors and political technology leaders.
While we demonstrated that most of the POC canvassing workflow can be automated to deliver real-time sentiment analysis, there are issues that need to be assessed before moving forward.
Key Project Results
We were able to automate the most important steps of the Mississippi POC workflow: a) converting voice files into text strings; b) storing these text strings in a database; and c) performing an AI sentiment analysis on these data
We proved that this type of sentiment analysis can be done in "real time"
All of the above is possible with existing technology
Key App Functionality Not Prototyped
Geotagging each voice memo so that geography-based sentiment analysis can be conducted
UI interactions for reviewing and approving voice-to-text conversions
Back-end data processing of geography-based data to update topics on the Conversation Starter screen using AI sentiment analysis
Moving from simple AI sentiment analysis to being able to query the data set using AI
Potential Development Barriers
While this proof of concept was successful, there are areas that need to be assessed before launching a fully-developed version of Community Voice, including:
All AI platforms have different terms and conditions around their usage in political campaigns. For example, according to the WSJ, OpenAI stipulates that "people aren’t allowed to use its tools for political campaigning and lobbying." The dev team for Community Voice needs to find an AI platform where usage of the AI for these purposes is unambiguously allowed.
The Data Privacy of users and canvassed voters needs to be addressed. The proposed app would collect voice and geolocation data of users. Those users would collect information the adults they talked to in their canvassing efforts. How this data is stored and used could raise privacy concerns.
My Personal Development
There's the long, thoughtful and systematic approach to building applications. And then there's what our small team did in a matter of hours.
I was uncomfortable with how fast we needed to move from idea to product demo. Nonetheless, it was great experience to move from simple sketches directly into creating a functioning website in Framer without spending design hours in Figma first. Using Figma to establish a very simple design system (if you can call it that) proved to be just enough for this effort.