CivicLink

Overview

Role

Product Designer and Developer

Team

Solo

Organization

Independent project

Timeline

2025 to 2026

Live app

civic-link.app

Tools

React, TypeScript, Tailwind CSS, Supabase, Lovable

The Story Behind CivicLink

Democracy shouldn't be held back by outdated communication channels.

I learned this firsthand during my college internships with my senator and congressional representative. While others imagined the glamorous side of Capitol Hill, I discovered a different reality: manually tracking constituent communications, tallying phone calls, logging handwritten letters, sorting emails. Every voice mattered, but the system for hearing them was stuck in the past.

The irony struck me. Offices working to serve the public were drowning in the mechanics of just listening. Important concerns could get lost. Staff time that could be spent on policy was instead spent on data entry.

In 2017, during my UX bootcamp at General Assembly, I prototyped a better way. I designed CivicLink, an app that could save congressional offices significant time while improving accuracy. But it remained a vision.

This past year, I got back into coding and something clicked. Using AI as a learning partner, I could experiment, fill in knowledge gaps, and finally build what I'd only designed years before. What once seemed impossible suddenly felt within reach. So I built CivicLink.

Discovery gap

Most people don't know who represents them beyond the President. Finding your specific House member, Senators, and state legislators requires navigating multiple government websites.

Action friction

Even after finding a representative, users face a maze of official contact forms, each with different formats, character limits, and required fields.

No feedback loop

After contacting a representative, there's no easy way to track what you sent or follow up.

Discovery and Research

I conducted user research to validate these assumptions. The findings were striking. Even among highly engaged citizens who always vote, the number one barrier to contacting representatives was simple.

"It feels pointless."

— Top barrier cited by engaged voters in user research

First-time civic participants

People motivated by a specific issue who have never contacted a representative before.

Regular advocates

Engaged citizens who contact multiple representatives on recurring issues and need efficiency tools.

Design Approach

Three steps. Zero friction. Mobile-first.

Address-first lookup

Users enter their address and instantly see every representative. Federal senators, House members, and state legislators appear in one unified view. No need to know your district number or navigate complex government websites.

Representative cards

Each legislator is presented as a clear card with their photo, party, chamber, district, and multiple contact channels. The design prioritizes scannability so users can quickly find the right person.

Multiple contact channels

Phone, email, website, and social media links are surfaced directly on each card. One tap to call, one tap to email. The goal is to remove every barrier between intention and action.

Design Decisions

Address-first architecture

The core insight: your representatives are determined by where you live. The entire UX flows from a single address input. Enter address, geocode, identify district, show representatives, take action. The landing page centers on one call-to-action, an address autocomplete field. No sign-up required to understand the value proposition.

Progressive disclosure

The information architecture unfolds intentionally. Landing page with value prop and address lookup, no auth. Auth gate at the moment of highest intent. Dashboard with full representative cards. Compose with AI-assisted drafting. History to track what you've sent. Each layer earns the user's engagement before asking for more.

Conditional UI

Contact buttons are conditionally rendered. Only channels with real data appear. If a representative has no public email but has an official contact form, only the form button shows. This avoids dead-end clicks and signals that the app has verified, trustworthy data.

Technical Architecture

One of the biggest technical challenges: converting a street address into a congressional district. No single API does this well.

The solution is a two-API chain. Mapbox Geocoding API handles address autocomplete and coordinate extraction on the frontend with fast type-ahead suggestions. The U.S. Census Geocoding API runs on the backend via Edge Function, taking coordinates and returning the precise congressional district code. The Census API is free, authoritative, and maintained by the government.

This hybrid approach gives users a polished autocomplete experience while ensuring accurate district mapping on the backend.

Frontend

React 18, TypeScript, Tailwind CSS, Vite

Backend

Supabase (Auth, Postgres, Edge Functions, RLS)

Geocoding

Mapbox for frontend autocomplete, Census API for district lookup

Platform

Lovable (design and development environment)

Challenges and Tradeoffs

Scope management

The app grew to include state legislators, election calendars, an API gateway, campaign tracking, and admin dashboards. None were needed for launch. Ruthless scope reduction followed: 25+ routes down to 7, 16+ tables down to 8, 10+ Edge Functions down to 4. The guiding filter: does this help a user contact their representative today?

Auth vs accessibility

Requiring sign-up before showing any value creates friction. Guest sessions added complexity without conversion. The fix: show full value proposition and address lookup without auth, then prompt account creation at the moment of highest intent. Guest session logic was removed entirely to simplify the codebase.

Mobile-first contact actions

Desktop-oriented designs don't translate to mobile civic engagement. Users are often motivated by news they read on their phone. All contact buttons use native deep links. tel: for calls, mailto: for email, Twitter intent URLs for social. Each triggers native apps on mobile. Platform-aware design over custom forms.

The Vision

For now, CivicLink makes it simple for Washington State citizens to contact their representatives with just a few clicks. Starting with Washington gives the platform room to mature before expanding nationwide.

The original vision remains: partnering with congressional offices to transform how they track and manage constituent communications. My firsthand experience in those offices showed me the challenges staff face. Hours lost to manual tracking. The risk of missing important constituent concerns. The struggle to identify patterns and priorities.

CivicLink can streamline these processes, freeing up staff time for meaningful policy work while ensuring every constituent voice is heard and recorded accurately.

Key Takeaways

1. Start with the action, not the information. The single address input earns attention before asking for a login.
2. Scope ruthlessly for MVP. Cutting 25 routes to 7 and 16 tables to 8 made the product shippable without losing the core value.
3. Conditional UI builds trust. Hiding contact buttons without real data signals that the app only surfaces verified, reliable channels.