Politicasa is a hypothetical new web-based desktop and native mobile app that helps people dive deeper into politics by providing a dedicated, clear-headed space to document and examine the arguments and counterarguments (and counter-counterarguments, and so on) in the political process.
The Pain Point
In my undergraduate studies, I concentrated in political science. Nevertheless, whenever election time rolls around, I find it unreasonably time-intensive to develop truly informed opinions on both local and national issues. I find myself tongue-tied when attempting to offer similarly sophisticated opinions during serious political discussions with friends and family. I knew that if someone with my educational background couldn't even make sense of the political playing field, then I was probably in good company. This side project aims to solve this series of problems:
- the difficulty of quickly forming educated opinions on various political issues
- the difficulty in engaging in politics meaningfully in your spheres of influence
Understanding politics is not a simple task. People live in an increasingly divided America; people of similar political beliefs gravitate geographically towards similar parts of the country, and similar parts of town. In the press, biased and polarized media tend to dominate the journalistic landscape. And op-eds, tweets, blogs, and news articles are all one-off pieces of the bigger picture, disjointed from the greater conversation. Televised debates and interviews are heavy on one-liners, zingers, and half-truths, and are rarely at all about actual listening or responding, to the other opinions or sometimes even to the question. As a result, many pundits and politicians of all political stripes appear to live on separate islands, more concerned with expertise and credit than empathy, inquiry, and synergy.
The political media ecosystem has made it stunningly difficult for the average person to understand an issue holistically or the many perspectives thoroughly, and then develop a substantive opinion. Consequently, people can easily grow more confused, jaded, apathetic, miseducated, or close-minded the more they are exposed to the well-intentioned political media.
What if there were a crowdsourced platform that documented political issues objectively, taking in every viewpoint, argument, and proof, and allowing for intelligent and civil discourse? What if there were one place you could access to easily explore either a high-level, impartial take on the issues, or scrutinize all the particular nuances of the issues? With such a resource at our disposal, I envision a world that becomes less disoriented, more inspired, less entrenched, and more thoughtful in our approach to becoming engaged citizens of this country and the world.
Proto-Personas and Storyboarding
I spent the first phase of my design imagining the lives and stories and motivations of fictional people that could possibly represent the type of users Politicasa would serve. I sketched their portraits on the Paper app with the Pencil stylus and wrote their stories on the native iPhone Notes app. I used these stories to guide my decision making throughout the overall design process.
Along with the persona storyboards, I used several design hierarchy of needs diagrams to approach my design of Politicasa.
In both diagrams (found here and here, respectively), the more business practical attributes of functionality or reliability or speed precedes the more traditionally creative disciplines of aesthetics and interaction. First and foremost, users must need the product, trust the product, and use the product. These are foundational to the experience, and incorporating aesthetic special effects, visual magic, and animation cannot cover up a dysfunctional, unreliable, and slow product.
I began drafting preliminary site designs on Illustrator, but realized that Illustrator was so precise that it naturally pushed me to finalize visual concepts in my mind before exploring enough concepts first.
I switched to FiftyThree’s Paper app, with the Pencil stylus, and sketched both desktop versions and mobile versions of the Politicasa app, with multiple iterations of each page.
Using these sketches, I went back to Illustrator and drafted a more finalized prototype.
Building a whole new ecosystem was the most challenging aspect of this design project. After significant design thinking (in the most literal way possible), I realized that Politicasa is not the X of anything. It is a conglomeration of almost a dozen different websites, borrowing elements from each to create a completely brand new product experience for the age-old problem of figuring out solutions to age-old – and age-new – problems. I first gathered inspiration from a variety of sources, including StackOverflow (its impressively solid moderator network), Rap Genius – now Genius (its clever annotation feature that can give background information on everything on the Internet), Reddit (its effective commenting cascading and hiding through social votes), Wikipedia (its brilliant, expansive author network), Facebook (its ability to engage users on an unprecedented scale), Twitter (follower/following dynamic and its pioneering feed), Quora (its use of real-life identities to add legitimacy to opinions), The New Yorker and The New York Times (their text-oriented design aesthetics), ProCon.org (its detailed, bipartisan research on popular political topics), and DebateGraph (the cascading, rabbit-hole-esque explorations of different topics).
See below for the clickable prototype. For a full-screen and mobile-friendly version, click here.
The Different Pages
One of the major principles I wanted to rally behind was an emphasis on dialogue, not declaration, leading naturally to the ability for users to post rebuttals, but also inspired the ability for users to concede an argument, when he realizes he’s wrong. Politicasa is not about winning arguments, it is about finding solutions, and not letting our individual egos get in the way. The focus on solutions was built on the frustration that many Americans experience discovering that their federal government is at yet another political standstill. I envisioned an app focused on consensus-building, with a particular emphasis on collaborative solutions that the majority can support. Thus, the Politicasa ecosystem also includes pages to create, debate about, and vote on ideas, whether grassroots or official. And because our popularly elected representatives often vote on bills in our stead, a page on candidates (to debate about and vote on) has also been included. There are also pages for notifications, a home feed, and user profiles, all necessary building-block pages for engagement in social networks. The Explore page allows users to survey a menu of trending issues, legislation, candidates, other users, and ideas.
On the prototyped Issue page, the topic of abortion is broken down into multiple categories, divided into two opposing sides (pro and con). Different principles are voted up and down based on users' opinions. Clicking on "see more" on any one principle takes you to its one-sided argument map. Every side has supporting arguments, each of which can have rebuttals. Every rebuttal can be rebutted as well, and so on until kingdom come. People can comment on, upvote, and downvote on all the different posts, and each post is credited to a particular author. In due time, famous thought leaders and politicians will contribute to the site, but in the meantime, normal citizens can attribute certain quotes to famous thought leaders. Users can upvote posts to send arguments and counterarguments into the visibility orbit. Downvotes exist to foster civil discussion, a critical piece to making this site function; anything degrading or personally antagonistic can be downvoted to oblivion.
User Profiles & Identities
One of the major quandaries in the early stages of the design process was whether to have users post anonymously (to reduce ego, as seen on Wikipedia and Reddit), or post with real identities (to encourage honest, civil discourse and discourage trolls, as seen on Facebook). The latter seemed more critical, and what tipped the scale was the case study of Quora vs. Yahoo! Answers in the use of real identities, and the resultant higher quality of the former’s content. Users are also identified by their party affiliation (or lack thereof), in addition to the traditional social media attributes of a portrait, location, and personal website. Users can follow other users, and read what new things they posted, upvoted, or commented on. It's built for engagement like Twitter, but enhanced for the field of politics with issue diagrams.
The Argument Map
Although I imagined the argument map on my own, I recognize that nothing is invented in a vacuum, and I was likely indirectly inspired by the work of Robert E. Horn (and his argumentation mapping projects at Stanford), through various journalistic infographics I’ve long since viewed and forgotten. For the user experience to be fundamentally useful, for the product to fulfill the need of understanding issues holistically, I felt that a series of connected arguments and counterarguments needed to be visually displayed in a logical fashion. All the info graphs or visual analytics I had seen insofar had featured terminal points and boundaries, separating author, designer and researcher from eyeballs and readers. I envisioned a diagram that could hypothetically never end, so that mankind could explore the fringes and unchartered territories of human argumentation, in hopes of finding solutions in these novel places, and prevent society from dwelling on the same cliched tropes and overplayed opinions.
The Argument Structure
To design the argument structure, I first listed all the critical elements that must be included in the different versions of the argument (map-desktop, list-mobile, full view-desktop, and full view-mobile). I then took that list and drafted several permutations for each argument version. Below is a list of the elements of an argument, and the reasons for including each:
- Full arguments have a 1000 character limit because life is short and no one has time to read a tome.
- User portraits humanize the interface, and discourage (even if just a bit) the Internet-specific phenomenon/plague of trolling.
- User names add authenticity and vulnerability to the opinions presented.
- User titles add authority and social proof, where applicable.
- User handles provide a specific address to engage a user, making the interface more friendly and interactive.
- Date, and date edited - this was actually deleted, after realizing that good, principled arguments should be timeless. We didn’t want to bias users into dismissing arguments because of how old they were, or alternating approving arguments because of how new they are either.
- Edit allows argument authors to change their argument, although the history of edits will be preserved for the sake of the argument’s logical flow.
- Supporting evidence serves to validate the opinions and principles in the argument.
- Disputing evidence serves to invalidate the opinions and principles in the argument.
- Comments allow users to casually engage in the discussion, whether positively, neutrally, or negatively, without submitting a formal, polished rebuttal.
- The already open comment input window allows users to post quick, even reflexive responses to a particular argument. Inspired by Facebook, this is meant to spur engagement.
- The list of sources helps give readers resources to explore any topic, assertion, or argument further.
- Add rebuttal button encourages users to respond to a particular argument that they believe portrays the reality inaccurately or incompletely.
- The follow button allows users to receive updates on this argument, so that they could stay in the loop on any interesting attachments, edits or responses.
- The flag for abuse button allows users to nip troll-like or otherwise abusive behavior in the bud before it plagues the system (and tanks it, like it almost has Twitter, and Reddit). As discussions around politics often has the tendency to lean towards emotionally volatile, immature behavior, the culture of the community is especially critical to figure out. Inspired by the effective moderator approach found at StackOverflow, a similar moderator system (replete with an empathy score) will grant higher scoring individuals greater authorities to quickly hide and delete content that does not fit the user policies of the network (or even submit great posts to be featured). The empathy score can be calculated based on a number of factors, such as the user’s historic ratio of upvoting vs. down voting, or the number of up votes minus number of down votes, plus the spread of votes between arguments/rebuttals of the two different sides.
- Share allows users to share this argument on Facebook or Twitter or other social networks, to expand the reach of a particularly eloquent and stirring argument.
A recent foray into Google’s Material Design guidelines revealed this gem of a principle: visual continuity. The transition from clicking on an argument starts right where the argument is located, not randomly popping into view from the top or bottom of the screen, or out of nowhere in the middle, or from the sides. And, as it collapses, the argument folds back into its original location, preserving the context and mental map of where the user thinks she is.
The only unfortunate issue with applying the principle of visual continuity for this example is that there are actually no shared elements between the two states, at least any that could be transitioned using the relatively new, state-of-the-art, yet somewhat limited prototyping technology available in the Principle app for Mac (e.g. text can’t yet be animated). The reason for the absence of shared elements is that the sizes and proportions and line lengths on any individual argument on the argument map is slightly different than those of the argument in the argument full view mode. In the argument full view mode, the font size was boosted, the score and voting elements were pumped up even more, and footnote numbers were added to infuse the argument with greater reliability and trustworthiness. So the transition isn’t totally seamless. Nevertheless, there is still visual continuity by the origin and return of the opening and closing animation.
Shades of gray are used to symbolize how very few things in politics are so black and white, while the patriotic American colors of red, white, and blue were used throughout the rest of the text-heavy layout.
The Mobile Version
One of the challenges of designing the visual display of the debate structure is how it would translate to a number of different screen sizes. At first, I wondered if Politicasa were more at home on the big screen, and should stay that way, in the same fashion that Reddit, Craigslist, Twitter, Facebook and other desktop-centric apps were for their first few years of development. Nevertheless, I wanted to see if I could come up with a viable solution for the increasingly mobile-oriented world.
The challenge was to design the horizontal splaying of hierarchical arguments and counterarguments. It was tempting to resort to a horizontal scrolling window for such a potentially wide diagram. From my experience with horizontal scrolling in timelines on my Antho project, I knew that horizontal scrolling often came with a number of jarring and counterintuitive user experiences, none of which I wanted to repeat again. Nevertheless, being able to see the overall context of the argument structure, I considered, was vital to the overall user experience. Users can look to the overall context to map their location within a multi-tier logical argument structure. Considering this was the most challenging feature to shrink to mobile size, I decided to design only this feature for this challenge, and left the simpler layouts out of the final prototype.
See below for a clickable prototype. For a larger or mobile-friendly version, click here.
The mobile transitions were chosen intentionally to help users build the mental map of the multi-level argument structure. The rationale behind this approach is eloquently put forth in this essay on meaningful motion from A List Apart. Different transitions were chosen to highlight movement between different tiers of the argument structure. Clicking on a particular argument will open up the full view of the argument, along with comments, evidence, sources, images, and a chance to add rebuttals. Diving deeper into an argument cascade has the screen slide left, and climbing the argument ladder causes the screen to slide right. Moving up and down the arguments in the same tier has the screen slide down and up respectively. All of these transitions are meant to infuse animation in the app with more meaning, and make the overall experience more semantic, understandable, discoverable, and memorable.
And on the page that lists arguments, you can also upvote or downvote the first argument. When voting up, the number increases by one and turns blue, and when voting down, the number decreases by one and turns red, to signify to the user that she already voted on that particular argument, and which vote she cast. As with any experimental user interface, this prototype needs to be fleshed out with more working links and tested in the wild before actual development.
Prototype & User Testing
For the in-person design research, I would first compile a diagram of one issue, such as abortion, studying and recording every argument I could find for or against the issue. I would study historic legislations around the issue and the reasons supporting them, and supplement those arguments with perspectives from politicians, journalists, and other thought leaders.
I would then approach students on university campuses, as the inquisitive environment lends itself to both political agnosticism, political self-exploration, and political engagement. I would ask them if we could observe them while they research a political issue for the first time. I would watch where they surfed online, what they searched for, what articles or multimedia they consumed, and what answers they were able to find. I would follow up with questions on their level of understanding about the issue, how much they understood of the different perspectives, and whether they were able to formulate a tenable opinion. I would then ask them, “If you had a magic wand, what would you create to make the process easier?” I would then present them with our one diagram on abortion, and ask them to review the diagram, thinking out loud. I would then ask a similar list of questions as earlier, determining whether such an impartial and exhaustive record of the issues was in fact a much better (10x) solution to the problem.
I would, alternatively, approach a local city government, and work with politicians, bureaucrats, volunteers, and bystanders to diagram a particularly divisive local political issue. We would then present the diagram to decision makers on different sides of the issue and observe whether the diagram was beneficial, perhaps in helping them to be more empathetic and collaborative. We would ask them if the diagram was helpful in framing the issue, and what they could see as roadblocks in adopting such an issue-organizing system in the future.
Once returning to the office, I would map out the insights, and start activating our creativity to think of all sorts of new designs to solve any concerns encountered in the design research. With those ideas, I would plan product roadmaps and decide the best course of action based on financial, technological, and social considerations. I would then build out a minimum viable prototype, and launch it in both colleges and local city governments, while constantly getting out of the building and meeting with users or potential users, fostering an online community.
Conclusion: The Greater Purpose
Americans currently live in a divided country – divided from one another, and often even divided from their government. This doesn't have to be the case. By breaking down the disconnect between the government and the governed, by simplifying and structuring the issues, we can truly hold our representatives accountable, foster civil debate and educated two-way dialogue, and quash private agendas and public corruption.
Asset Credits: Dan Benyishay (White House logo), Suzanne Clements via Stocksy (elephant and donkey landing page photo), Simon Child (gun control gun icon), Joanna Giansanti (joined clock icon), Jardson Almeida (supporting evidence check mark), Pham Thi Dieu Linh (comment icon, desktop argument full view mode navigation arrow icons), NAS (sharing icon), Darren Wilson (arrow icon), Juan Pablo Bravo (notification bell icon), Creative Stall (image icon & abuse flag icon, slightly adapted), Matheus Oliveira de Fraga (sources book icon), Austin Andrews (location icon), Remy Medard (party flag icon), Adam Zubin (abortion icon), Aurelien Lemesre (wide nav arrow), Max Josino (mobile navigation arrow), Milky - Digital Innovation (empathy score icon), and AP and Time (news pictures on explore page)