It takes privilege to be politically active…
For the second project of CS247, we created a resource site that showcases our work so far on exploring the concept of political apathy. You can view this site using the link below (better viewed on desktop):
This site features user stories and quotes that surfaced from our user interviews, a new explorable explainer that we built, as well as some reading resources for our readers to learn more about the topic. With this Medium article, we want to walk you though the design process that went into creating this content.
Message Architecture and Content Strategy
As a refresher, our main audience for this information site is people who consider themselves politically informed & active and might commit the mistake of labeling others as simply politically apathetic. The goal for our information site is to dispel the myth of voter apathy for our readers and highlight that it takes a lot of privilege to be politically active. With this scope in mind, we wanted our content strategy to revolve around 4 themes: “a call for empathy”, “unnoticed complexity”, “analytical” and “approachable”.
“A call for empathy”: We believe that the first step in understanding a problem is being willing to empathize with others. If we are trying to change people’s perspective on how they regard others who are not as politically engaged, we have to invite them to empathize first. We encourage our readers to understand the reasons for another person they may dismiss as seeming politically apathetic.
“Unnoticed complexity”: From our research we realized that our audience was quick to create reductionist personas to categorize others as apathetic based on one simple action (such as forgetting to vote because too busy), and our main goal for this project is to show the diversity of reasons that result in political apathy, especially disparities in privilege.
“Analytical”: Since our audience consists of politically educated and engaged citizens, we would have to engage them in a structured, informational discussion to be able to convince them of our goal.
“Approachable”: Political apathy can be a divisive issue. A lot of people feel very passionate and opinionated about outcomes of elections, activism, etc, which might make it hard for an average person to engage in a conversation in this space. Since there is such a barrier to talking about this issue, we wanted our site to feel inviting and approachable for our users to take intellectual and emotional risks to understand others on a deeper level.
Our main methodology for achieving these themes was build a very people-centric narrative for our content. We feature profiles of people who are “apathetic”, the emotions they struggle with, so that others may relate. We discuss how statistically common these experiences are and bring a macro-view to engage our analytical users. Finally, we suggest the alternative that empathy can help encourage “apathetic” people and inspire them to be more politically engaged.
Brand Choices and Style Tiles
Now, let’s discuss how we created a style tile that would match our content strategy. We arrived at our style tile after several iterations. In our earlier iterations, we used more a polarizing, politically themed color palette that consisted of red and blue variations, which you can see below.
Since many people are passionate and opinionated on this issue already, we thought that using more appeasing colors that would invite the users to empathize would be a better choice. The dark red and blue color combination was perhaps too polarizing and alienating. We ended up setting on colors thar are white for backgrounds, a color that is reminiscent of lavender, a soft and inviting pink for headers, a comfortingly cool purple for main body elements and an approachable cyan as a highlight color. You can see our final style tile below.
In choosing the patterns and images that would help accentuate the feeling of our site, we wanted to emphasize that there is an “unnoticed complexity” to the topic of political apathy. The bottom left image that shows a graffiti portrait conveyed this sense of how complex human beings can be, and we thought it would serve as a great tool to demonstrate the political apathy is much more complex than it seems. The top image we picked, we felt, was very appropriate too, since it put a large emphasis on the humans in the image and the softer curves/corners on the objects depicted here made it a very approachable depiction of political involvement. The two images we picked on the bottom right accentuate our emphasis that our platform should have an analytical and objective tone to it.
With all of this complexity we are trying to convey in our color scheme and patterns/assets, we wanted to keep the font rather simple to not distract the user. Therefore, we picked a sans serif font with a small character width and a large x-height which made the writing seem very uniform throughout a body text. We established hierarchy between headers and body texts mainly using font and our color scheme. We decided that our cyan would be a good color for clickable elements such as links and buttons too.
After we finalized all of these details for our style tile, we created some mockups for the resource site, which you can view below.
Card-Sorting Insights
After we finished P1, we knew that there were a lot of directions that we could take in moving forward with P2. However, it almost felt like there was too much ambiguity in our space, especially since we were attempting to prove the fact that political apathy is often a mask for many things — including guilt, exhaustion, a lack of a personal connection, and more. But to move forward, we asked ourselves, would it be wise to narrow our focus and goal?
Given this question, our group was particularly excited to conduct a card sorting in order to understand how others make sense of the information that we had been looking at. Furthermore, we were excited to see which pieces of information, if any, resonated most with people.
Therefore, the approach to the card sorting activity was very simple: show users the information we had been looking at and ask them to organize it in their own categories using an open card sort. For our card sorting activity, we created cards with a diverse set of information that we had been looking at, which largely fell into one of three categories: behaviors, statistics, and high-level ideas of categorizations for factors that contribute to political disinvolvement. An example of a behavior was “regularly attending lobbying meetings to support a cause,” an example of a statistics was “Americans making more than $150k per year were 2x more likely to vote in 2016 than those making $10k or less, ” and some examples of the high-level ideas are social isolation, frustration, apathy, and lack of interest in politics.
We conducted a total of three card sorts with three different individuals, and we provided them with sticky notes to categorize the information as they saw fit , and we were very surprised by the findings.
Card Sorting Results
Card Sorting Takeaways:
From the categorizations on the above table, we were able to draw two big takeaways: our problem space makes sense and privilege is a factor that can have a tremendous influence in political involvement.
Regarding the first point, we were able to notice that many of the participants categorized people based on simple, 1-dimension behaviors, which is exactly the problem that we are attempting to address. Individuals were quick to label people as “apathetic” or “lazy” during the testing environment, and such categorizations were reflected in the category names, with words like “apathetic”, “excuses,” and “doesn’t care” showing up in the category names.
This validation of our problem space gave us a lot more confidence going into Project 2. We knew that the oversimplification of people’s political behaviors (or lack thereof) was something that was prevalent and that we could address.
Furthermore, largely from the results of Participant (1), we were able to realize that privilege plays a big role in political involvement. This person created categories that reflected unfairness in the American political system and the privilege required to participate in it. This resonated deeply with the participant and with our entire group; we realized that our storyline from P1 had a lot of examples of privilege required to participate in politics (for example, Karen’s upbringing with immigrants who never participated in the political system) yet it was a factor that we had never explicitly mentioned.
Therefore, we decided to move forward with a focus on the privilege required to participate in politics. This further resonated with us because a lot of privileged people do not understand the factors that get in the way of underprivileged individuals not being politically active.
Website User Testing Results
Soon after getting our website set up, we decided to get some eyes on the content to begin catching mistakes and errors. The following describes what each round of usability testing revealed from the website, and the changes that followed as a result.
Round 1
In this round, the site tester pointed out the following issues; we fixed them as follows.
Site navigation proved to be confusing. The tester did not know what page they were on in the website, e.g. Resources, Stories, or About. This was fixed by adding a navigation bar with accent colors to highlight the current page.
Categorization of our resources: the tester did not understand what the different categories of resources were attempting to highlight, e.g. the term “The Political Landscape” was confusing. Thus, we changed the category names to better reflect the issue of privilege. For instance, we changed “The Political Landscape” to “Absence of Participation in Today’s Political Landscape.”
Too much text on the story page: the tester found the extensive narratives on the stories page. We thus decided to just showcase one important quote for each persona.
Too many numbers on the resources page: Rather than merely presenting numbers/statistics, we presented them in context of the articles they were drawn from, as demonstrated here:
Round 2
In this round, the site tester raised the following issues which we fixed as follows.
Characters on story page did not have names: The site tester felt like they connected well with Karen, but not with the other characters. To fix this, we gave all the characters names; the following demonstrates this.
Confused about Resource page: The tester did not know there were different categories of resources until they scrolled down. They also did not understand what resources the page was providing. Finally, they did not click the links because they felt they got what they needed out of the article with the highlights. To fix this, we decided to add introductory text that explains what the resources page contains and encourages the user to click on the links; the following demonstrates this:
Ambiguous highlights: The tester found some highlights in the text on the website were misleading or ambiguous. We thus added more clarity to the highlights.
Round 3
In this round, the site tester provided the following pieces of feedback, which we plan to address in future iterations on the website.
Confusion on content in “stories” section: The tester was not aware that the “stories” section was based on the narratives of real people and thought they were made up.
Appreciated color scheme and images: The tester enjoyed the aesthetic of the site.
Confusion on purpose of “Resources” section: The tester thought at first that the resources section were articles; rather, she was expecting people or offices to contact.
Usability Testing on P1
We were able to revisit P1 in class and get feedback on our explorable explainer that was implemented in Twine. Since this was an in-class activity, the profiles of all 3 testers are upperclassmen Stanford students, with two of them being male and one female. At a high level, this is the feedback that we received, which is divided into feedback on aesthetics and content.
On the content side, one of the largest complaints from all three testers was that Kate’s storyline felt unnecessary. The participants were intimidated by the large chunks of text to read, which were made even worse by the fact that users had no autonomy of choices in Kate’s storyline. In the words of one of our subjects, “we have no real choice… it’s just linear… will I control anything?” Additionally, the subjects were confused by what they should have taken out of Kate’s story after reading through it.
Once the subjects moved onto the main storyline, that of Karen, the users noticed that the Karen’s problems in the storyline felt extremely unbalanced and rather forced/random. Our subjects always picked to focus on their friendship with Kate rather than exploring any of the other problems. During one of the choices on which problem to focus on, one of our subjects said “why would I click to vote? It seems rather random after I only recall seeing this information on the start.”
Furthermore, regarding Karen’s storyline, two of our three testers felt that Kate’s character was far too extreme — especially with her stout unwillingness to try to understand Karen. This seemed to distract the playtesters from the storyline, and it made two of our testers feel “disconnected” from the story since they could not imagine such hard-headedness in a friend.
Finally, the least piece of feedback on the content was that the overall message of the storylines were confusing. Users got immersed in Karen’s friendship problems with Kate but failed to feel a strong connection to a political message, and they instead found it random like when those problems were presented.
Moving onto aesthetics, the overwhelming feedback we got were around inconsistency in image types (hand-drawn vs realistic photos), an overwhelming amount of text colors, and the large chunks of text in the storylines. The users wanted the aesthetics to be simple and consistent so that they could focus on the content, but they instead found themselves distracted by these aesthetic factors.
Although we felt overwhelmed by all the feedback from the usability testing, we embraced the feedback as an opportunity to improve our explorable explainer to deliver two projects that we were proud of.
Revisions to the Explorable Explainer
Since there were a lot of issues with the content (essentially our storylines) in our explorable explainer, we knew that there would have to a big overhaul to fix everything.
We began by deciding to remove Kate’s storyline. We took the feedback from our testers very seriously, and we saw no need to waste people’s time with a linear story that lacked choices. Instead of having this storyline, we simply decided to present some more context in the start of Karen’s story to better understand the relationship between Karen and Kate (mainly that it is in a rough state).
After this decision, we knew that we had to create a storyline that had better balanced issues and that had a more prominent political message about apathy being a disguise for entities like guilt, shame, and lack of privilege. Since our storyline was not achieving this for an abundance of reasons, we decided it would be best to create a new storyline using ideas from our original for inspiration.
This new storyline incorporated balanced problems for Karen by exploring a day that contains many important events: an advocacy meeting, an interview, and a voting deadline. Due to the urgency of all three events with regards to time (day-of in the story), we feel that we adequately created a storyline where politics was just as relevant as all the other problems.
Furthermore, with regards to the storyline, we decided to make Sam (previously Kate’s character) a much less extreme character based on the feedback. We have her try her best to understand Karen and don’t have her come off as immediately aggressive.
On a high-level, the new storyline better stresses self-guilt and loathing in not being politically active, which is a result of more self-reflection. Our hope was to hopefully instill this self-reflection on the readers by having Karen do so.
Lastly, on the aesthetics side, we decided to leverage our P2 Style Tile to create a uniform experience across both projects. This was particularly important for us since our P1 is directly embedded into our P2. This solved our issue of too many colors and created cohesion across our resources. Moreover, we solved the problem of inconsistent images by using flat icons for all of our graphics. Lastly, we solved our issue with big text by placing more visuals in between bodies of text.
After making all these changes, we felt extremely proud of the explainer since it was more simple, streamlined, and focused.
