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
Interviews with past and prospective users
Iterative usability tests of multiple designs
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.
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.
How might we help users understand and contribute to controversial topics through rational debate?
SUS 34 (better usability
than 4% of sites)
Our Design Process*
*Or perhaps I should say "our rough design process" since NOTHING about UX is linear... lol
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:
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
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.
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.
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
"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."
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.
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
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.
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.
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.
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.
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.
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.