Stay tuned! This site will be mobile and tablet-friendly soon :) For now, you can access my site on your desktop.

CRAYON POLITICS

Legislation speaks louder, voting on actions over labels.

This is an ongoing project at the Wharton School of University of Pennsylvania. Find us on the news here.
OVERVIEW

Problem

Becoming an informed voter is a tiring process as one must navigate long trails of confusing information. This results in a disconnect between public opinion and congressional legislation, voter apathy, uninformed party loyalty, and thus an ineffective democracy.

Approach

We wanted to offer comprehensive but accessible political data that prioritizes candidates' legislative activities instead of identity markers, party affiliation, direct quotes, and other potentially misleading information.

Project

A responsive website serving as a user-friendly publication and national voter guide highlighting candidates’ legislative actions pertaining the major political issues of the time.

Target Demographic

Millennial and Gen Z voters

Team

1 Product designer (me)
2 Founders
1 Software engineer

Timeline

4 weeks (ongoing)
*User testing was not in the scope for MVP launch
SOLUTION
Sort through different types of elections (general, primary, etc.) in your state.
View legislative actions taken by each candidate on the same 3 political issues.
Learn more about specific legislation via an AI chatbot.
Sort through and read articles written by the Crayon Politics team.
Donate and subscribe to the Crayon community.
MARKET RESEARCH

Competitors

  • State voter guides
  • News publications
  • Non-profit organizations

Competitor Strengths

  • Non-partisan information initiatives
  • Comprehensive candidate biographies
  • Fact verification, reliable sources
  • Clear site navigation

Opportunities

  • Putting more emphasis on legislative actions than direct quotes, identity markers or other secondary details
  • Establishing trust with modern UI that caters to a younger, tech savvy demographic
  • Allowing users to explore topics in depth at their own pace to avoid information overload
  • Voter mobilization with registration support and election reminders
DEFINE
Drawing on market research and informal user outreach*, the team and I defined the key problems and determined our approach to a solution.  
*Formal user research was not in the scope of this project for MVP launch

Problems

A disconnect between public opinion and legislation

In the case of gun laws for instance, there is widespread public support of universal background checks yet we remain to see action from elected representatives.

The spread of misinformation

Political misinformation is widespread in today's mass media, leading many to doubt facts and form polarized opinions about candidates.

Excess information

Research shows the complexity and density of political material will negatively impact a reader’s ability to retain it, particularly when they are already storing conflicting information.

Goals

Communicate what candidates “have done”

A focus on providing basic information about candidates' legislative actions on major political issues.

Information depth without clutter

Creating a lexically accessible site that offers important, verified facts without overwhelming voters with excessive detail.    

Form a community

Building an engaged voter community that enjoys coming back to the site regularly to stay informed and participate in politics.  
PROTOTYPE

Wireframes

I iterated on a few directions for the app, focusing on the landing pages and home screen (we initially considered a mobile application).
Option 1 - Sort by issues and candidates
Option 2 - View candidate overviews
Option 3 - Personalized voter guide
We decided to go with option 2, allowing users to quickly navigate to candidate information after choosing a location and election type.

Organizing our content

Considered how the site's IA could shift depending on the range of the copy included, I came up with a several flows to progressively reveal candidate data.
We went with the last option (C2) because we planned to limit the candidate copy to essentials, making links to separate pages unnecessary.

Defining our feature list

After discussing with the team, I finalized a list of features ready for high-fidelity design.

View each candidate's legislative action history

  • Visual components showing key decisions taken by each candidate pertaining major political issues

Voter registration links and election reminders

  • Register to vote
  • Election countdowns and personal reminders via email/text
  • Find a polling place near you

Communicate with AI chatbot

  • Learn more about legislation  at your own pace
  • AI suggested questions
  • Confining AI data gathering to credible platforms

Blog and Newsletter

  • View articles written by Crayon Politics team
  • Like, share, comment and filter through posts
  • Newsletter access

Polls

  • Participate in anonymous polls
  • Create an account to view and participate in polls

Donation

  • Send one time or recurring donations to Crayon Politics
  • Potential subscription model in the future for blog content

Jumping into high-fidelity design

I iterated twice on high-fidelity designs, addressing team feedback and problem solving along the way.

Making candidate information easily scannable

Veering away from the “who to vote for” suggestions and “most/least” claims from initial wireframes, I kept things simple with reusable components for each candidate including at max three main actions describing their legislative activities plus one quote to summarize their stance.

De-emphasizing party affiliation

I included muted party colors around candidate profiles to subtly help inform the user’s context without diverting their focus from the site's core content.

Using AI as an active learning tool

We knew we wanted to use AI, but weren't sure how or where the entry points would be. Ultimately, I made potentially unfamiliar legislation into clickable components that open up a chatbot window to encourage users to explore topics further.

A need to not just inform but mobilize

I added an election countdown and voter registration CTA right onto the main navigation to drive voter action.

Forming friendly branding

I played with a few color palettes and, with feedback, landed on predominantly using white and neutrals to convey a sense of openness and simplicity.
DESIGN SYSTEM
Some icons used came from The Noun Project.