Client: Citizens League

Methods/Skills

Content Design, A/B Testing, User Interviews,
Card Sorting, Competitive Analysis, Moderated Usability Testing,
Qualitative Research, Quantitative Research, Wireframing, Rapid Prototyping

Tools

Figma, Sketch, Axure RP

Problem

Needed to create a digital debate space that could present important policy issues to everyday citizens in a way that's meaningful and free from biased arguments.

Solution

Utilized a message board (internet forum) system that allows users to hover over a debate argument to easily scan all of the essential top-level information pertinent to that argument without having to click on anything.

Envisioning the Future

For this case study, our design team created a new web application concept, called Policy Bytes, to showcase debates on significant policy issues for Citizens League. They are an organization dedicated to empowering all Minnesotans to be actively engaged in public policymaking. The new web application is going to help expand that engagement to reach a wider range of people and present important debate issues in a way that is accessible/meaningful to everyone. 

The Holy Grail

To begin formulating ideas for the layout of the new platform, our design team began by looking at current debate websites. These current models lack a connected conversation, have confusing navigation, and often devolve into biased arguments without evidence. 

Beginning the Long Journey

These initial sketches illustrate early attempts to construct a new digital layout that could be free from bias and accommodate up to four debate voices. A grid system with collapsible text containers was utilized to present information at various levels, to not overwhelm the user, and to create a clear flow of information.

Trying All the Things

Another idea was to use an argument mapping functionality, similar to debatemap.app, to make pieces of information appear and disappear entirely by clicking buttons on the subnavigation, and to give the user more control over how much content is visible at any given time. 

Feedback, Feedback, Feedback

Our team met with potential users in both groups and individually to better understand how they process and interpret information. It became apparent that they didn't want to be guided too much in navigating the interface, wanted to have the ability to scan information without having to click on it, and wanted a preview of the content before entering the debate space. Color was also hugely important, and shaped the way they perceived different argument claims. 

• Testing Participant: "Who is arguing and making these points?"

• Testing Participant: "I want to have the most control possible, that's a lot of clicks to see the whole thing."

• Testing Participant: "This is guiding me too much."

• Testing Participant: "These are my favorite colors, they aren't making a statement."

• Testing Participant: "When did I sign up for this ride?"

Refining the Concept

After meeting with users, we synthesized our findings and moved forward with a new design that encapsulated all of the feedback we received. This concept utilizes a message board system to present the debate content. By hovering on a main argument/premise on the left side of the interface, the back-and-forth conversation between the debaters appears on the right. This allows the users to easily scan and gather information without clicking on anything.

What Lies Ahead

The final design concept uses muted earth-tone colors to avoid any preconceived subjective color biases and continues to utilize the hover functionality from previous prototypes. Now the user can also click on any main premise buttons and that will anchor the back-and-forth conversation onto the page so the user can explore any piece of evidence attached to that argument. In that way, it's simple to quickly understand what is happening in a debate, while also providing flexibility for the user to click through and dive as deep as they want on any given topic. For future iterations, it would be prudent to make this model mobile-friendly so people can have access to Policy Bytes on the go, and Citizens League can continue to expand their digital footprint.