November – December 2018

Gabble is a concept for a product that brings disparate voices together through a fluid and transparent network of ideas.

team project / role: UX, UI, INTERACTION design

Introduction

There is a lack of transparency in social media networks, allowing for shady sources and fake news to become rampant. Opinion bubbles are commonplace, and polarization of ideologies is believed to be a symptom. People are listening to each other less, leading to a decline in civil dialogue. My colleague Tyler and I set out to combat this trend by conceptualizing a space where a multitude of diverse dialogues can be explored and participated in.

Our research began with a question:  

How might we assist in the effective communication between groups with diverse opinions?

Key Elements

After some brainstorming and ideating, we decided that there were a few key features we wanted to include in the product:

  • instant, realtime communications between members
  • an encyclopedia-like feature which enables examination of topics
  • use of AI to comb and sort entries, allowing for the presentation of dialogues by topic and by opinion

We felt that with these features, we could create something that tackles some of the issues with transparency in social media online. We knew that these were bold desires, so we got to work using some tools to establish how this product might look, work, and feel.

Sketches

We started by sketching out a basic idea of how the interface might look. We knew that we wanted to sort ideas by topic, and that each topic should expand to reveal both individual posts and further nested topics. This nesting of posts and topics was our way of making sure that topics were transparent at any given point.

Experience Blueprint

After that, we mapped out some processes in order to better grasp the user's path through different features in the system. This helped us identify the functionality needed and provided some context to consider when designing.

Below is the experience blueprint for a question-asking flow.

System Map

After getting a solid understanding of the core features, we created a top-level system map to help us build out the interface. At this point we also established a lo-fi wireframe of the main screen in the app, as well as a list of functional elements we needed.

Wireframing

Next, we created a batch of wireframes to start developing the interface. We focused on highlighting the key elements, and we kept usability and accessibility a major priority. One outcome of this attention to accessibility was the Ask feature, highlighted in the last two screens below, which enables the user to ask a question semantically and be presented with multiple diverse points of view as response.

Visual Design

The visual language we developed for the product is light and friendly. We wanted to avoid feeling like a news app and opted for a look that was fresh and open, communicating the transparency that the app offers.

We also used icons from Feather Icons and some of the great illustrations from humaaans.com for the onboarding process—their simple, friendly style aligned well with our desired feel.

Solution

The solution we came to is Gabble, a concept for a social platform used to engage in more transparent dialogue. The app allows users to post their thoughts, and then groups related content for users to explore.

Link to Figma prototype

Posts and Collections

As part of its main functionality, the app uses AI to parse through all the posts made on the platform and groups together posts with similar subject matter into semantically-worded, headline-like Collections.

From any given Collection, you can explore more related Collections, or you can view the post threads that were grouped to create the Collection. This functionality allows for a transparency in in the information that’s reaching you—if you see a topic in your All News feed, you can see every conversation people are having about the topic, positive or negative.  

Write your thoughts

Gabble allows you to post and engage in conversations about any topic you’d like, similar to social media platforms we’re already used to. Your posts will be grouped into Collections along with other posts on similar topics.

Ask a question

Gabble allows you to ask questions semantically and points you in the direction of 3 collections in response, each representing a different point of view on the subject in question. This feature allows for a well-rounded and unbiased understanding of the conversations occurring around any given topic, avoiding the formation of opinion bubbles.

Reflection

This project ended up being an exercise in reducing complexity. We attempted to turn the abstract idea of transparency in dialogue into a simple, usable, and desirable product.

There were many challenges we encountered in this process, and with the solution we came to, I think that we only scratched the surface of what a product providing this transparency could become. While we made a strong effort to solve the issues of social media echo chambers, our biggest takeaway was that a problem this big is difficult to solve.

That being said, the project has plenty of aspects to be happy with. Our ideation and planning process was pretty robust, involving a lot of research, mapping, sketching, and iterating. The way we boiled down conversations into digestible headline-like Collections was effective; being able to stay updated on popular topics while having the ability to view how the topics are spoken about breaks down some of the opaqueness that has become widespread online.

There are many opportunities for improvement in the project. Up until now, we only managed to conduct a few casual user testing sessions, and they revealed the confusing nature of the interface in its current form. Frequent, thorough user testing would have been a great way to identify issues throughout the process and would have allowed us to iterate further.

Conclusion

This project allowed us to explore an idea we had about making the internet more transparent. As much as there is left to do, I'm glad we could begin to tackle an issue as relevant and important as this one. If nothing else, I hope that this project can serve as a part of the greater discussion around online transparency and a jump-off point for further research.


Back to top
DribbbleLinkedin

Feel free to contact me! I’m always available to bounce thoughts around and I'd love to collaborate.

Email