Little Money, Big Change

Zack Cinquini, Tulsi Desai, and Drew Skrainka

Research

Article Search

We each gathered 5–6 articles independently on a range of subject matter related to political donations, using sources that we had drawn on previously as a starting point. This allowed us to amass a set of 16 diverse articles for our cardsort.

Card Sort & Sitemap

For the card sort, we used the following methodology:

1. Read Medium article | Present the Medium article with the Explorable Explainer embedded in it.
2. Create Question Cards | Have the user list out the questions they have (about the article and explainer) on individual cards.
3. Sort Article Cards | Sort article cards (each with a summary line representing an article from our research) to go under the question cards the user thinks they may be helpful in answering.
4. Categorize Article Card Stacks | Categorize each stack of cards (non-question format).

Figure 1: Sample resulting cardsort categorization

This methodology allowed us to go through a process that most closely represented the user’s thought process when reading our Medium post. The categories we uncovered from this approach were:

1. Details on dark money
2. How a candidate’s popularity impacts their fundraising
3. Donations for platform/policy, not the candidate
4. Timing of donations

Our takeaways from this were:

• The user’s questions focused on how the writing applied to them (i.e. what could they do about it), rather than purely informational (i.e. what are Super PACs, who are candidates getting their money from, etc).
• These categories seemed to depict a ‘story-like’ approach — starting with the big picture (what is dark money) and diving deeper into how to time donations.
• Users need to understand that their impact can make a difference before they get into the nitty gritty strategies (ie timing of donations).

Keeping these takeaways in mind, we created a sitemap with a linear storyline to draw the reader from a broad understanding that they can make a difference to the detailed strategies that they can act on. We felt that framing our findings as a narrative would also help drive engagement with some otherwise dense material.

Figure 2: Sitemap Version 1

Each category for the main articles came from our card sort results:

1. Main Article 1 | Don’t Sweat the Big Stuff: information on why the user should care to read on because their donations can make a difference even amidst a wealthy donor pool (straight from card sort category 1).
2. Main Article 2 | Keep it Local: strategic information on donating at the local and state level to boost candidate popularity for the less visible races, as well as advice on pursuing donations in favor of legislation over candidates (from card sort category 3 and advice from primary interviews not included in the cardsort).
3. Main Article 3 | Timing is Key: an explanation of why donating early can improve a small donor’s impact in races (a mix of card sort categories 2 and 4; donating early is helpful in a large part because of the benefits of an early popularity boost).

While our card sort categories defined the narrative structure of our site, we hypothesized that the best way to place the links to the articles (Supplement Articles) would be to embed them in the text itself so that the user could be free to explore topics as questions arose throughout the reading.

Feedback

After presenting our initial designs, we received a lot of useful feedback from the class. We realized the main problem we needed to address revolved around our use of embedded links in a three-part narrative. While a simple, clear story was appealing, some felt that users should have greater freedom to explore and satisfy their curiosity when it was made the most sense for them (not everyone would care to explore the articles throughout the narrative in the way that we had placed them).

An additional limitation of our design was that it obscured two critical and typical pathways for finding information. By caching our articles in links in the body text, we (1) made if difficult for users who visit our site looking for answers to specific questions or specific resources, and (2) failed to support users who enjoyed an article and wanted to find more related content.

Revisions

After discussing with Christina and reviewing the data from our card sort activity, we realized the solution to both problems could be found in a hybrid approach. We would keep the three-part narrative, but provide escapes from linearity at the end of each part. By creating a “Learn more” section at the end of each topic, we could allow people to explore that topic more deeply without losing their place in the narrative.

Figure 3: Sitemap Version 2

The next challenge was figuring out how to structure this new section. For that, we again turned to our card sort results. Since our users created categories of articles for us from questions they had, we used those as a starting point. We then refined the “Learn more” structure based on the message we wanted to communicate in the main body of the topic on that page.

Usability Testing

For usability testing of our site, we asked 2 users to read and interact with the site using a think-out-loud protocol so that we could understand what was confusing and what was interesting (what they wish they knew more about but couldn’t find on our site) for them.

In general, both users felt we could do more to help them understand things more quickly. One pointed out that there wasn’t much to indicate the site was focused on money, and she didn’t realize that was the focus until partway through the second page of the site. They both lamented having to read significant amounts of text, and mentioned it would be nice to make it more skimmable.

To address these concerns, we added images of money to the front page illustration, and made the phrase “little money” in the title slightly more prominent. We also broke up the text visually, where possible — and added a TL;DR section for each page — in order to promote quicker skimming.

Usability testing-driven change log:

• Too much text → Added TL;DR sections to each article
• Home page didn’t provide enough context to say we are going to talk about money in politics → made illustration more money-related and made “little money” in the title semibold to be more prominent.
• FAQ items are arbitrary/not indicative of content → FAQ items now framed as answers to the questions in subheaders
• Inconsistent alignment → Changed left-justified subheaders to be left-aligned
• Frustrating to repeatedly press “back” after navigating to a resource in the FAQ → made the resources open in a new tab

Our Style Tile Choices

Our style tile lays out guidelines for three areas of the design: Typography, Color, and Button Design.

Little Money, Big Change style tile

Typography

Considerations for typography started with the spirit of our content, which drove the font family choices. Size, leading, and tracking choices were made with more general concerns for legibility and aesthetics.

Our goal was to communicate a complex and intimidating subject in a friendly way. For example, our original explainer included fun characters to help the user feel more like they were playing a game than tackling a difficult subject. With that in mind, we chose Libre Franklin as our header font. It’s big and bold like politics, but more accessible than a geometric sans like Futura.

On the other hand, Libre Franklin is less readable as a font for large amounts of body text than a good serif font. Given that we knew our project would involve plenty of text to read, we decided to pair it with Source Serif Pro. The similar inner structures and x-heights of the two fonts, combined with their contrasting presence and absence of serifs make them good compliments.

In order to make each level of the visual hierarchy distinct, we chose to separate each level by a factor of at least 1.5, except H2 and H3, where we make the change from all caps to standard text with only a 12pt size difference. Leading and tracking for each level of the hierarchy were chosen for legibility based on the designer’s judgement.

Color

Since one of our goals was to provide useful information about politics in a nonpartisan way, we took the unusual approach of using three primary colors. The three colors, red, purple, and blue, represent the political spectrum. Since each hue is distinct and bold, we chose to lower the saturation and lightness of each color to avoid overwhelming the eye of the user.

Despite this softening, there remained a risk of disharmony between the three colors. To avoid this, we decided to use a system of threes: either all three colors would appear together on a given page, or only one color would appear if the page was in a three-page group.

For example, the “POLITOPIA” logo is evenly divided between the three colors. But each page in our three-part narrative is themed with one of the primary colors.

We also made heavy use of neutral greys to prevent the bold colors from becoming too distracting.

Button Design

Keeping with our theme of softness and approachability, the buttons were designed with gentle radii and good contrast.

Little Money, Big Change