Sqabl - Turning online arguments into structured, two-sided debates

Sqabl is a mobile web app for structured discussion. People join arenas (topic communities), then take part in three kinds of posts: debates with a supporting and an opposing side, polls, and open questions.

I designed the mobile app in Figma (sign-up, the feed, posting, debates, arenas, profiles and notifications, in light and dark mode), then built every journey into a working prototype so people can use the flows instead of just reading about them.

Comment threads are a poor shape for disagreement.

In a long comment thread, the actual disagreement gets buried. Replies pile up, it’s hard to tell who is on which side, and nobody can see where the argument stands overall. I wanted a format where every argument belongs to a side and the split is visible at a glance.

The decisions I built the product around:

• Every debate is two-sided: it shows a supporting and an opposing count, a percentage split, and arguments filed under a side.
• Everything lives in arenas. You choose an arena when you post, and you accept its guidelines when you join.
• Three post types (debate, poll, question) share one feed, ordered as Trending (most flames), New, or Your feed.
• Moderation is built in: you can flag posts and people against a set of policy categories, block users, and, as an arena owner, appoint moderators.

I didn’t run user research for this project, so these rest on assumptions I still need to test: that people engage more thoughtfully when they pick a side first, that topic arenas cut down off-topic noise, and that visible guidelines plus flagging keep debates civil.

The same product at night, without losing the two sides.

I designed dark versions of the mobile screens on near-black grounds (#0D0D0D and #171717). In the prototype you switch to dark mode from the side menu, and every component uses the same colour tokens as light mode, with a dark value for each.

Copying light-mode colours onto black doesn’t work, so I rebalanced them for contrast. Sqabl blue (#003298) almost disappears on black, so buttons and the supporting side use a brighter blue (#3768F0) that keeps white labels at 4.8:1. Text on tinted badges switches to light tints of the same hue (#A9BFFF for blue, #FF8A8A for red), so “Supporting” and “Opposing” stay readable. Surfaces step up in lightness, from ground to card to control to line, instead of relying on borders, and the selected tab sits on a raised grey. Initial avatars and the empty-state illustration have their own dark versions, so nothing glares.

I built every screen above into the prototype, in a phone frame with a guided tour of each journey. Try signing up (the code is 4720), joining an arena, picking a side, posting a poll, or creating and deactivating your own arena. There’s no backend: it runs in your browser with sample data, keeps your changes on your device, and you can restart it at any time.

I ended up with a complete mobile design and a prototype where every journey can be finished: no dead buttons, real validation, and consistent feedback for every action.

Building the prototype taught me the most. My static frames covered the happy path, but the prototype forced me to decide what happens with a duplicate poll option, a closed debate, a blocked user’s posts, or an arena with no posts yet. Those answers are now part of the design.

I haven’t measured outcomes, and no testing has been done yet. Next, I would test the core assumption (that picking a side first leads to better discussion) with a small group, check whether people understand flames without explanation, and look at how arena owners moderate in practice.