Nov 26, 2022
Design process for social news app ‘Gabble’
UX, UI, Interaction Design
Introduction
Technology has done amazing things for our ability to communicate. It lowers the barrier of entry, allowing millions more voices to contribute that may have never been heard before. Twitter, Facebook, and other social networks facilitate thousands of discussions every day, but sorting through the opinions and facts is more difficult then ever. How might we assist in the effective communication between groups with diverse opinions? My partner and I set out to explore this problem by conceptualizing a space where a multitude of diverse dialogues can be explored and participated in.
Key Elements
In development of this concept, several important elements emerged from our ideation and brainstorming
- Instant, realtime communications between members
- An encyclopedia-like feature to enable examination of topics
- Use of AI to comb and sort entries, allowing for the presentation of dialogues by topic and by opinion
Sketches
We started by sketching out a basic idea of how the interface might look and function. We knew that we wanted to group ideas by topic, and that each topic should expand to reveal both individual posts and further nested topics. It was important to establish a basic way of viewing this early in our design. We needed an easily understood interface for users to navigate these complex groupings of posts and topics.
Experience Blueprint
After that, we mapped out some processes in order to better understand the user’s journey through different features in the system. This helped to identify how the user’s experiences fit with the activity on the backend of the app.
Below is the experience map of a user asking a question.
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.
Wireframes
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 a response.
Visual Design
The visual language we developed for the product is light and welcoming. We wanted to avoid feeling like a news app and opted for a look that was fresh and open, expressing the sense of community we want to establish.
We also used icons from Feather Icons and some of the great illustrations from humaaans.com for the onboarding process.
Solution
The solution we came to is Gabble, a concept for a social platform that summarizes discussions into topics and subtopics, allowing users to better grasp the wide assortment of voices present in online discussion. Users can post their thoughts and Gabble groups them with related content for users to explore.
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 was an exploration of opinions, facts, and the structure of information for a constantly connected society. We took our thoughts on current online communities and tried our best to develop them into an app that would have a positive impact on the way we converse. After lots of sketching, ideating, and rethinking, I know our app only scratches the surface of a larger issue, but I’m happy to have achieved that much.
We tried to simplify our design for maximum understanding, but I think we could have gone further. Integrating thorough user testing throughout our process would have helped to develop a stronger interface. The current iteration requires more onboarding than similar communities, and I believe that could be addressed through proper feedback.
If there’s anything I hope others take away from this project, it’s how we think about the ways we communicate. While not a perfect solution, Gabble examines our desire to hear from large groups of people without dismissing the individuality of each member. It’s important to remember there are people attached to all those avatars, and I believe that empathy will only become more important in all our digital connections.
