Parley logo artifact2.gif
 
Parley Mockup 6.png

Debate platform web design

Passion project

  • 2 week sprint

Team

  • 3 UX Designers

My role

  • Project manager, designer, copywriter, researcher, interviewer

 
 

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, nuanced, and information is reliably sourced because users are frustrated and saddened by the divisiveness of social media.

 
long logo.png
 

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

For empathy, we thought about the user's interaction abilities and determined they can show support by clicking a button, writing a comment, and declaring upfront which viewpoint the user sides 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.

 
Screen Shot 2021-04-12 at 6.33.11 PM.png
 

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 support upfront before watching the debate content, it allowed the users to see the backend data when users from one standpoint showed empathy.

 
 
Screen Shot 2021-04-12 at 9.52.24 PM.png
Screen Shot 2021-04-12 at 5.24.30 PM.png
 
 

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 are 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.

 
 
Screen Shot 2021-04-12 at 5.24.13 PM.png
 
 
 
 

The resolution was a challenging aspect for us to design solutions. We tried various designs that ultimately didn't feel like they worked in the user flow or didn't solve any user problems. We did add an ability to view the data from the content and share any particular comment on their social media platforms.

Screen Shot 2021-04-12 at 5.51.59 PM.png
 
 
 

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 Insights

“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.”

Parley Mockup 5.png
 

Affinity Mapping

Parley (19).jpg
 
 

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

Higher Community Standards

Moderators will be removing comments that do not meet the following:

  • Cannot be discourteous or hostile towards others

  • Must provide sources

  • Cannot address a person and not an argument

  • Must contain substantive content

 
long logo.png
 

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.

 
 

Proto-persona: Miguel, 28

 

Behaviors

  • 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

Scenario

  • Admittedly spends time in what they would call an “echo chamber”

  • Wants to find a discussion platform that offers a space that does not glorify Polarization and dissent, and sanitizes agreement

Pain Points

  • Feels hostility from opposing side arguments

  • Lacking forward movement in conversation

  • Feels opposing side lacks understanding, empathy, rationality

 
 

User Flow

 
Parley - New frame.jpg
 

Sketches

 
IMG_0533.jpg
IMG_0534.jpg
 

Design Guide & Components

 
Artboard – 9.png
 

Hi-Fi Mockups

 
Hifi Home cast vote – 1.png
Hifi (blue) Add comment text.png
 
Next
Next

Chatbowl