THE CHALLENGE

TruthSift is a social debate platform that allows users to debate by refuting or supporting claims with documented sources. 

 

The site was very complex and many spent multiple days understanding the interface. 

APPROACH & KEY INSIGHTS

Approach 

  • Heuristic review

  • Comparative analysis

  • Interviews with past and prospective users

  • Iterative usability tests of multiple designs

 

Insights

  • A directory of arguments was needed in orienting users within an argument

  • The infinite indentation of responses posed a design challenge. We could bypass the challenge by designing displaying individual statements.

THE SOLUTION

RESULTS
Increased SUS from 34 to 74.5

Increased NPS from -100% to 38%

 

We integrated two widely divergent designs one as designed by the founder, another that followed a more conventional discussion layout.

We later found a way to integrate the two interfaces which produced a much more positive response as shown by our usability testing results.

CONTEXT & CHALLENGES

TruthSift is a platform that allows individuals to intelligently debate subjects. The premise was highly complex and difficult for users to learn and navigate through arguments. Therefore there were very few users.

 

Another challenge was the format of the discussion threads. Because this is a debate platform, an infinite number of replies are allowed, creating the problem of infinite indented replies. It became our challenge to determine how to best accommodate infinite levels of replies without losing the user in the discussion thread.

problem statement

How might we help users understand and contribute to controversial topics through rational debate? 

 

 

initial metrics

SUS    34  (better usability

                   than 4% of sites)

NPS  -100% 

 

 

original design

Our Design Process*

*Or perhaps I should say "our rough design process" since NOTHING about UX is linear... lol

DISCOVER

Exploration of the current site included

  • A heuristic/expert review

  • Created a current sitemap to map out the complexity of the pages and interactions

  • Conduct a comparative analysis by reviewing the discussion structure of various messaging and discussion boards to determine how they solved for the infinite indentation of threaded discussions

  • Interviews with past and prospective users to gain a firm understand of user needs and to narrow down the core functionalities

  • Measuring the original site's SUS and KPI

Our research was guided by interview and user goals:

Interview Goals

  • Understand the core needs TruthSift satisfies for past members

  • Gather user experiences about using the site

  • Understand how users complete specific tasks and their success rate

User Goals

  • Understand value TruthSift gives to users

  • Quickly learn the functionalities of the site

  • Quickly gain understanding of the topic of research 

The original site map

I mapped out the sitemap to get a handle on what we were up against. It was complicated with tons of functionalities. Awesome, but confusing and overwhelming.

Comparative Analysis

We knew that one of the biggest design challenges facing us was the discussion board replay formatting. How do we solve for the dreaded "infinite indent" (shown below). This is a problem for Truthsift since controversial topics can easily have many levels of replies.

We compared various discussion board formats to gain ideas on how sites solved for the "infinite indent" challenge. Some simply indented forever, trusting that the replies would stop at some point. Other simply limited the number of indentations displayed. Others had different solutions. None felt quite right for the purpose of the site.

Interviews

There were no current users so we found 6 past users as well as those in the demographics the founder was targeting (5 research-oriented students). 

 

Past users: we wanted to know their experience on the site and their thoughts

Prospective users: we performed a usability test on the site and gained insights about who they are and their habits and needs

USER Quotes 
 

"I have a difficult time weeding out information on TruthSift."

 

"The chart fills up the screen and I cannot tell if the discussion is complete or not."

 

"The chart becomes like spaghetti and unmanageable."

 

"Having a systematic way where user experience can enhance dialogue would be tremendously valuable."

 

"It's very hard to understand the different kinds of statements and connectors."

 

"Very annoying. Impossible to read. The big graphs are very hard to dig deeper into."

 

"There should be a way when you come in, it should lead you through with questions...whether for or against."

 

"Site feels overwhelming to use."

 

"I don't know what I just clicked on." 

 

SYNTHESIS

Tools used

  • Affinity diagram

  • Personas

  • Journey Map

  • Storyboard

  • Information Architecture (user flow and sitemap)

 

We organized interview findings and created two primary personas: the academic and the student. "Academic" meaning anyone academically minded and not just those in academia. 

 

Findings included

  • It was hard to get started and learn how to use the interface. It routinely took previous members 2 days to learn the interface)

  • Functionalities are too complex and confusing to use. Too many features with various types of statements, connectors, colors, arrows, and boxes.

  • Navigation is unintuitive

  • It was difficult to read graph/map and view its content 

  • It was challenging to follow a topic and the debates that surround it. Users could not gauge if topic was proven or disproven

 

Organizing findings via virtual affinity diagramming post-its based on user interview feedback

INFORMATION ARCHITECTURE 
 
Site Map
The information architecture was simplified based on card sorting results and validated via tree testing. The most used pages/interactive features were kept and eliminated the others to lessen confusion. 
User Flows
were created to gain an understanding of the steps the user would need to accomplish their tasks. 

IDEATION & ITERATION

We started with sketches of

  • potential graph/map design

  • potential threaded discussion design

 

We worked on two parallel ideas, one that was map-centric that would have responsive design restrictions and another that was more akin to a traditional layout that could be viewed on a mobile device. Through A/B testing of the designs, we discovered that users preferred the traditional layout but saw the benefit of a map. We used card sorting and tree testing to refine the navigation.

Sketching/Ideation 
Our first sketch was to find a way to allow users to comment on individual ideas and not just the overall argument. It was a cool idea but disposed of due to technical limitations.
We began testing two different layouts, a mapped layout (below) and a tabbed layout that had elements of a more traditional comment thread (right). A/B tests showed that the tabbed version was more easily understood by users though they also felt a map/diagram of the argument of some sort was useful.
We continued to develop both designs in parallel. We tried integrating a map of sorts into the tabbed layout (right) and tried giving more information to users in the mapped layout (below). Users generally responded positively, though some still wanted an overall diagram of the arguments.

SOLUTION

We combined elements of both designs. A simplified map at the top and the discussion content of each discussion node below. This design yielded the best usability results. The map situated the user as to where they were in the overall argument and allowed for a broad view. The detail of each argument was displayed without the traditional challenges of the "infinite indentation" of a threaded comment.

 

The check marks and X's represented whether or not that statement/post was (tentatively) refuted or (tentatively) "proven." This allowed the user to quickly decide if that was a thread worth pursuing. 

final metrics

SUS    74.5  (from 34)

NPS   38% (from -100%) 

 

 

The content final design was a combination of the two initial designs which resulted in the most satisfactory user experience. 
 
The map served as a directory and clicking on each node brought up the details of that node's statement. Users could see at a glance the direction of the arguments for or against that node. 
 
The statement text can be collapsed so users can easily access attachments and pro/con section in case of lengthy arguments.
 
 
The pro/con section was brought in from the tabbed format due to the positive user feedback; they wanted to see the pro/con statements without having to click on each node.
 
 
 
 
The topic page was designed to give users an at-a-glance understanding of the various arguments underway. Users could tell from the icons if the main topic has been tentatively refuted or established. They also see a small summary of the topic and some metrics.

LEARNINGS

We had to scale back some functionalities to simplify the interactions. The simplest way of gaining stakeholder buy-in was to show clips of users struggling while interacting with the site.

 

I was initially a big proponent of the threaded discussion (unmapped) design but was delighted to learn that it was a combination of both designs that yielded the best usability scores. 

 

 

 

 

 

 

© 2016-8 by LJY Studios Design Reasoning

  • Grey LinkedIn Icon

INTERESTED?

LET'S GET IN TOUCH!

I live in the beautiful San Francisco Bay Area in  Northern California. Feel free to contact me via the form or social media.

This site was designed with the
.com
website builder. Create your website today.
Start Now