Summary
Hoojah is a polling platform that focuses on the arguments and debates behind the votes. It's a platform for meaningful discussions, where users can vote on polls, add arguments, and engage in one-on-one debates. The main challenge was to design a platform that encourages meaningful discussions rather than just collecting votes. We needed to create a user experience that makes it easy for users to express their opinions and engage in debates. This project taught me the value of constraint-driven design—by limiting poll options to just three choices, I discovered how constraints can actually enhance clarity and user engagement. As someone who values thoughtful discourse, I created this platform to address the noise and polarization I often saw in online discussions.
1. Background
The Inefficiency of Online Discussion Platforms
Today Malaysians use social media platforms and online forums to discuss important matters. However, it's hard to track specific topics as different groups discuss the same topics separately, failing to provide structural opinions and results. As someone who values thoughtful discourse, I found this fragmentation particularly frustrating when trying to follow important discussions.
Subjective discussions make decision-making difficult and eventually become noise. Open polls provide objective questions that deter subjective discussions.
System Architecture
Hoojah was built with a modern tech stack designed for scalability and real-time interactions. The architecture balances performance needs with development efficiency, allowing for rapid iteration while maintaining a responsive user experience.
flowchart TD
subgraph Client["Client Layer"]
React["React Components"]
SCSS["SCSS Styling"]
API["API Clients"]
end
subgraph Server["Server Layer"]
Rails["Ruby on Rails"]
REST["RESTful API"]
Auth["Authentication"]
end
subgraph Data["Data Layer"]
DB[("PostgreSQL")]
Redis[("Redis Cache")]
S3[("S3 Storage")]
end
subgraph Services["External Services"]
Discourse["Discourse Forum"]
Analytics["Analytics"]
end
Client --> Server
Server --> Data
Server --> Services
class Client,Server,Data,Services headerClass
classDef headerClass fill:#f8f9fa,stroke:#495057,stroke-width:1px
classDef default fill:#fff,stroke:#6c757d
Rationale for a 3-Options Voting System
One of the defining design choices in Hoojah is to restrict poll responses to three options: Agree, Neutral, and Disagree. This wasn't just a simplification—it was a deliberate strategy born from my frustration with the noise in online discussions. After observing countless debates on social media platforms, I realized that too many choices often led to decision paralysis and diluted the core issues.
Benefits
Clarity & Interpretability
Results are easy to understand at a glance. Users immediately see how the community leans: for, against, or neutral. This simplicity was something I craved as both a developer and a user of online platforms.
Lower Barrier to Entry
Many people hesitate to join polls with too many nuanced options. Three simple choices feel intuitive, encouraging wider participation. I saw this firsthand when testing early versions with friends - they were more willing to engage when the choices were clear-cut.
Reduced Decision Fatigue
Users don't waste time splitting hairs between "slightly agree" vs "mostly agree." This makes contributing fast and lightweight. As someone who values efficient communication, this was a core principle I wanted to embody in Hoojah.
Natural Grouping for Arguments
Supporting arguments automatically fall under one of three categories. This helps discussions stay structured and prevents option overload. During development, this structure became my north star for organizing content.
Balanced Representation
Including a "Neutral" choice avoids false polarization and captures the voices of those who are undecided or nuanced. This was particularly important to me as it reflects my belief that not every issue has just two sides.
Considerations
While limiting options reduces noise, it does flatten some complexity. Hoojah's design addresses this by allowing supporting arguments under each stance, so nuance still surfaces through text and debate. This balance was something I refined over years of iteration, learning from user feedback and my own experiences as a participant in the platform.
erDiagram
POLL ||--o{ OPTION : has
POLL ||--o{ ARGUMENT : contains
POLL ||--o{ DEBATE : hosts
POLL ||--o{ VOTE : receives
POLL ||--|| USER : created_by
OPTION ||--o{ VOTE : selected_in
OPTION ||--o{ ARGUMENT : supports
ARGUMENT ||--|| USER : authored_by
DEBATE ||--|| USER : participant_1
DEBATE ||--|| USER : participant_2
DEBATE ||--o{ DEBATE_POST : contains
DEBATE_POST ||--|| USER : written_by
VOTE ||--|| USER : cast_by
UI/UX Study: Solving the Convenience Problem
One of the biggest barriers to online debate platforms is convenience—users often struggle to skim polls, understand arguments, and participate without friction. Hoojah's UI/UX design aimed to solve this through structured flows and visual hierarchy. This focus on usability came from my background in user-centered design and my personal frustration with cluttered interfaces.
1. Poll-First Experience
- Problem: Users want to see the poll outcome quickly without scrolling through long threads.
- Solution: The poll sits at the top of the page, followed immediately by grouped arguments. This lets users vote, then dive deeper if they choose.
➡ Design pattern: "Decision at the top, discussion below." This philosophy guided many of my design choices and became a mantra during development.
2. Grouped Arguments for Readability
- Problem: Long, mixed comment threads are hard to follow.
- Solution: Arguments are grouped under the option they support (Agree / Neutral / Disagree). Users skim within the stance they care about.
➡ Design pattern: "Categorical clustering" for quick scanning. This organization method was inspired by my academic background in information architecture.
3. One-on-One Debate Flow
- Problem: Open comment sections often devolve into noise and trolling.
- Solution: Hoojah introduced debate view, where two users exchange structured arguments. This reduces clutter and highlights meaningful back-and-forth.
➡ Design pattern: "Focused debate lens" to isolate quality interactions. This feature was particularly challenging to implement but became one of the most praised aspects of the platform.
sequenceDiagram autonumber participant U1 as User 1 participant H as Hoojah participant U2 as User 2 U1->>H: Challenge to debate H->>U2: Notify of challenge U2->>H: Accept challenge H->>U1: Debate initiated Note over U1,U2: Structured Debate Begins U1->>H: Opening statement H->>U2: Display statement U2->>H: Counter argument H->>U1: Display counter loop Debate Exchange U1->>H: Response H->>U2: Display response U2->>H: Response H->>U1: Display response end U1->>H: Closing statement H->>U2: Display closing U2->>H: Closing statement H->>U1: Display closing Note over U1,U2: Debate Concluded H->>U1: Archive debate H->>U2: Archive debate H->>H: Make debate public
4. Participation Made Simple
- Problem: Many platforms hide contribution behind too many steps.
- Solution: Clear calls-to-action: vote in one tap, add a supporting argument in two, start a debate in three. Minimal cognitive load.
➡ Design pattern: "Progressive participation" where each step feels natural. This approach reflects my belief that technology should adapt to humans, not the other way around.
5. Mobile vs Desktop Consistency
- Problem: Debate platforms often break on smaller screens.
- Solution: On desktop, sidebars show trending arguments and user profiles. On mobile, non-essential elements collapse, leaving poll + arguments as the core flow.
➡ Design pattern: "Responsive hierarchy" that prioritizes core actions. This solution was born from my own frustration with trying to debate on mobile devices while commuting.
User Journey Snapshot
- See poll at a glance → choose Agree / Neutral / Disagree.
- Read grouped arguments under the chosen stance.
- Join discussion by adding a supporting argument.
- Escalate to debate if deeper engagement is needed.
- Track contributions through personal profile and timelines.
This journey map represents the culmination of years of iteration. I remember the excitement of seeing users naturally follow this flow during our first successful beta test - it validated countless design decisions.
flowchart TD
A["User Visits Hoojah"] --> B["View Poll Question"]
B --> C{"Choose Stance"}
C -->|"Agree"| D1["View Agree Arguments"]
C -->|"Neutral"| D2["View Neutral Arguments"]
C -->|"Disagree"| D3["View Disagree Arguments"]
D1 --> E["Read Supporting Arguments"]
D2 --> E
D3 --> E
E --> F{"Engage Further?"}
F -->|"Yes"| G["Add Supporting Argument"]
F -->|"No"| H["Continue Browsing"]
G --> I{"Start Debate?"}
I -->|"Yes"| J["Initiate One-on-One Debate"]
I -->|"No"| H
J --> K["Exchange Structured Arguments"]
K --> L["Debate Concludes"]
L --> M["Track via Personal Profile"]
style A fill:#f9f9f9,stroke:#6c757d
style B fill:#e3f2fd,stroke:#0d6efd
style C fill:#fff3cd,stroke:#ffc107,stroke-width:2px
style D1 fill:#d1e7dd,stroke:#198754
style D2 fill:#cff4fc,stroke:#0dcaf0
style D3 fill:#f8d7da,stroke:#dc3545
style F fill:#fff3cd,stroke:#ffc107,stroke-width:2px
style I fill:#fff3cd,stroke:#ffc107,stroke-width:2px
style J fill:#e2e3e5,stroke:#6c757d,stroke-width:2px
style K fill:#e2e3e5,stroke:#6c757d
style L fill:#e2e3e5,stroke:#6c757d
style M fill:#f8f9fa,stroke:#6c757d
Key Takeaways
- Restricting to three voting options balances simplicity with expressive debate - a lesson in constraint breeding creativity.
- Convenience is achieved by prioritizing readability, structured flows, and responsive design - principles that have become central to my design philosophy.
- Hoojah reduces friction by guiding users smoothly from poll → arguments → debate, ensuring every stage is intuitive. Building this platform taught me more about human-computer interaction than any course or book ever could.
Looking back on the Hoojah journey, I'm struck by how much I grew as both a designer and developer. What began as a side project became a masterclass in user-centered design, teaching me to listen, iterate, and above all, solve real problems for real people.
2. Hoojah's Objectives
- Create a platform for structured objective discussions where arguments are tied to polls with three options: agree, neutral, or disagree.
- Encourage users to respond objectively to promote quality discussions and ethical online engagement.
- Establish a trustworthy space by verifying user identities to eliminate noise in online discussions.
3. Moving Forward
The domain hoojah.my has been taken down, but Hoojah remains alive without recent updates. The next milestone is to convert features into plugins for Discourse or WordPress. The countless hours spent refining this UI taught me patience and the importance of iterative design based on real user feedback—a lesson I carry into every project I undertake.
External Resources
4. Showcase
