Parley

Background

Image: It's April 2020; you're fresh out of UX boot camp, and you quit your job in January to pursue a career in UX design. Your fresh out of UX bootcamp and again, it’s 2020, so my fellow UX friends made our own project to showcase our skills.

Now it’s 2024, and you have sharper skills, so you take a few weekends to redesign a passion project. You make it a collectible card game that aims to teach people how to conduct civil discourse and have fun while doing it.

Timeline
6 week sprint
Team
3 UX Designers
My role
Project Manager
Business Plan
UX Research
Conceptual Design
UI Design
Sales Strategy
Copywriter
UX Design
Tools
Sketch
Figma
Jira
Google Suite
Photoshop
Miro

Civil Discourse Game

I created Parley to address the decline in civil discourse by fostering respectful and informed conversations. By transforming serious topics into an engaging card game, Parley encourages empathy, critical thinking, and the use of vetted facts, making it easier for people to engage in meaningful discussions and counter misinformation.

2020 Mockups
2024 Mockups

Project Summary

Purpose

I designed Parley’s card game mechanics to encourage empathy and critical thinking. Each card supports structured discussions where players earn points for both factual accuracy and empathetic responses.

Gameplay

I crafted Parley to transform divisive topics into a fun, educational experience, promoting civil engagement. Players practice meaningful dialogue, using vetted facts to counter misinformation and foster constructive conversations.

Impact

Parley is a safe environment for players to explore diverse perspectives, promoting respectful discourse. The game’s structured approach helps users navigate serious topics while encouraging learning and mutual understanding.

2024 Redesign

Pivot

In 2024, I decided to evolve and gamify the experience into one that relied on facts and would be more accessible to users. The game would resemble collectible playing card games like Pokemon and Magic: the Gathering, prompting players to pick a topic for a debate — for example, climate change — and they would receive a pack of corresponding cards. The cards would consist of peer-reviewed facts relating to their chosen topic. Players would state an argument about the subject and share the cards supporting it. The opposing player would do the same. Then, both players would be responsible for rewarding their opponents with points based on the strength of their arguments. The points would be added to each player’s tally, and more points would lead to a higher rating in their profiles.

The reciprocal nature of the points system would encourage each player to consider their opponent’s arguments carefully and act with empathy to award an appropriate amount of points. Players who attack their opponents with low points risk being lowballed in return. Because Parley requires players to use the provided peer-reviewed information to support their arguments, it also highlights facts and promotes the truth.

Challenges

Balancing Engagement and Education

Creating a game that is both engaging and educational was challenging. Ensuring players remained interested while learning about civil discourse and using vetted facts required careful design and iteration.

Cultural Inclusivity

Adapting the game to be culturally inclusive and sensitive to diverse perspectives posed a significant challenge. Extensive research was needed to ensure the game appealed to a wide audience.

Protecting Participants

Designing mechanisms to shield players from negative comments and ensure a safe discussion environment was crucial. This involved creating practical moderation tools and setting clear community guidelines.

User Acceptance

Convincing users to embrace a game focused on civil discourse took time and effort. Many potential users were skeptical about the entertainment value of such a game, requiring extensive testing and feedback to refine the concept.

UI Mobile

I revisited and pivoted Parley into a mobile game inspired by popular collectible card games and titles like "Cards Against Humanity." I began by outlining the requirements and documentation, then designed the wireframes in Figma. With input from a designer friend, I evolved the UI into high-fidelity screens, creating a fully functional prototype. This new iteration brought the concept to life, blending engaging gameplay with Parley's original focus on fostering meaningful discourse.

2020 Case Study

Problem Statement

Politically engaged individuals online need a way to learn and discuss current issues with those holding opposing views in an environment that is civil, honest, and nuanced, and information is reliably sourced because users are frustrated and saddened by the divisiveness of social media.

Our Impact

My team and I designed a platform for users to upload debate content and conduct civil discourse. Our research concluded that people view debates as aggressive and competitive. Our study also revealed that long-form debates are too much to watch for most users. We focused on designing for three user problems: empathy, efficiency, and resolution.

Research

We conducted user interviews with a sample size of n=10 participants to gather in-depth insights. Additionally, we performed a comprehensive competitive analysis to understand the market landscape and identify key differentiators for Parley. The research involved understanding user needs and behaviors and informing the design and features of Parley to address identified issues.

User Interviews

  • When I say “debate",” what is the first thing that comes to your mind?
  • How would you describe the way (the opposing side) communicates?
  • What are your sources of information on political topics?
  • Have you posted, or commented on, a politically charged post this week?
  • What does a successful debate look like to you?
  • How do you feel about “debate” vs “discussion?”

User Statements

“The ‘tribalism’ of debates is awful.”
“It is valuable to have the perspective of the other side.”
Aggressive energy makes me feel aggressive in response.”
“Opposing side needs to be better educated.”
“..don’t like polarization and politicization of everything.”
“Allowing people to have the floor and not be interrupted is valuable.”

Affinity Mapping

Affinity Map: ‘I’ Statements

  • I feel sad and angry with arguments
  • I value clarity and civility
  • I value honesty and nuance
  • I value the quality of Information
  • I want us to be able to admit when we are wrong
  • I want to learn why the other side thinks what they do

Solution Statement

We believe that by designing Parley with strict comment posting guidelines, upheld by moderators, we will be able to cultivate a community around contentious issues that is focused on better understanding the differences in perspective.
We will know this to be true when our moderator intervention rate decreases over time.

Empathy

For empathy, we considered the user's interaction abilities and determined that they can show support by clicking a button, writing a comment, or declaring upfront which viewpoint they side with.

We decided not to use the standard button call-outs of "like" and "dislike" and instead designed buttons to show support and empathy with “applaud” and “agree” buttons. When testing this, users could express their agreement with a particular aspect of the opposing side's argument without claiming to agree with the views as a whole.

Users can comment on the content within the site’s guidelines, such as requiring users to cite sources, frame their opinion towards the topic and not a person, and refrain from any toxic behavior. When users declared what viewpoint they supported upfront before watching the debate content, it allowed the users to see the backend data when users from one standpoint showed empathy.

Efficiency

Having an efficient user experience was essential to us from the beginning. We noticed competitors tried to edit the debates to smaller clips as users' attention spans were short. We came up with a solution inspired by Spotify, where users can comment on the song, and their comment gets time-stamped and visually represented on a bar graph. We designed a similar bar graph to represent when users interacted with the debate content, either by clicking buttons to express support or empathy or commenting. The result was the ability to see where in the video was the most discussed and interacted with moments, allowing users to skip to that moment in the video to see what other users view as important.

Resolution

The resolution aspect challenged us to design solutions. We tried various designs that ultimately didn't work in the user flow or solve any user problems. However, we did add an ability to view the data from the content and share any particular comment on their social media platforms.

Persona

Miguel (28)

Behaviors

  • Comes across news via social media
  • Reads and listens to preferred sources (web, podcast)
  • Moderately aware of current events

Scenario

  • Comes across news via social media
  • Reads and listens to preferred sources (web, podcast)
  • Moderately aware of current events

Needs and Goals

  • Wants to learn about opposing thought processes
  • Wants honesty and nuance
  • Wants quality information based on research

Pain Points

  • Feels hostility from opposing side arguments
  • Lacking forward movement in conversation
  • Feels opposing side lacks understanding, empathy, rationality

2020 User Flow

The user flow includes joining a debate, engaging with empathy-focused interactions, and navigating through time-stamped comments for efficient discourse.

2024 User Flow

The user flow includes joining a debate, engaging with empathy-focused interactions, and navigating through time-stamped comments for efficient discourse.

Wireframes

Wireframes illustrate the layout and functionality of Parley, focusing on user interaction with debate features and navigation.

Sketches

2020 Mobile Mockup

2024 Mobile Mockup

Branding and Logo

The branding and logo reflect Parley's mission to foster civil discourse with a serious yet playful tone.

Style Guide and Typography

The style guide and typography ensure a consistent and user-friendly design across Parley's platform, enhancing readability and engagement.