Brigade Brigade is a tech startup founded in 2014 to tackle the problem of declining citizen power and engagement in our democracy. The company, which raised a $9.5MM Series A from investors led by Sean Parker, Marc Benioff, and Ron Conway, is building easy and effective ways for people to declare their beliefs, organize with others, and take action to shape the policies affecting their lives. While there, I was a Lead Product Designer on a team of five other designers. Client: Brigade Date: 2016-07-16 Services: Lead Product Designer Brigade, among other features, has user-generated-content (UGC) which we call Debates. Debates on Brigade is different than other UGC like a Facebook status update or a Reddit post. With debates, our users have one goal in mind: State your beliefs and win over as many people. On the left (or above if you’re on mobile), you can see what a debate used to look like. A user would state their argument, a supporting reason and a link to an article. However, reasons (which is what we call comments) usually stopped after three days, thus no finite end to the debate. Also, Brigade uses upvotes to support a reason, yet there wasn’t a clear determination of who won the debate. With that, I had three problems that I wanted to address with this design. First, create some form of finality to make it feel less like a discussion and more like a debate. Second, design a winning and leading convention to gamify debates. And finally, celebrate a user winning! We want to give our users a badge that they can wear with pride. Time Limited Debates Adding a sense of finality will obviously involve time. However, how does that take shape on Brigade? Adding a time limit to a debate can be as simple as stating when the debate ends. However, we really want to capture that sense of urgency. Using an artificial sense of urgency, it should increase engagement with, not only debate creation but reasons and upvoting too. I couldn’t just use a simple calendar icon or even a time-stamp. Instead, we came up with the flip clock. Above, you can see the different clock variations I designed for web. With the flip clock, the constant turning of seconds definitely captured the urgent feeling we were looking for. Yet adding a sense of immediacy is only one part of this equation. How do we signify a debate closure? Ultimately we decided it best that we close reasons and upvoting. This way, a user will feel compelled to add their point before the discussion ends. This is especially true if no one has expressed that opinion in the debate yet. https://affank.com/wp-content/uploads/2016/12/timed-debate.mp4 Leading and Winning Reasons Coupled with the flip clock, we needed a way to incentivise our users to create reasons. Sure, having the most upvoted reason moves you to the top of the thread but we also want it to stand out. They did just win a debate so how can we make them feel celebrated? Above you can see the designs we chose to highlight leading and winning reasons. A leading reason is the most upvoted comment while a debate is still open. A winning reason is the most upvoted reason once a debate is closed. I went with the accent bar and adjacent icon to keep the design pronounced yet not an eye sore. As I mentioned before, once a debate is over then upvoting and reasons become disabled. However, we didn’t want to strip the winning reason of all it’s CTAs. We kept a share CTA staying true to the celebration sentiment we were trying to convey. Now that users have the ability to win debates, how can they keep track of their winnings? We do notify the users via email and/or push notifications that they’ve won the debate, yet there wasn’t a standalone place to keep track of their winnings. Furthermore, if we’re trying to gamify this experience, Brigade power users will be checking this religiously. With that, the Awards section was created in the user profile. Outcome and Final Thoughts Time Limited Debates was met with great success. Not only did debate creation improve, but so did the number of reasons people were leaving. When we launched the first iteration of this product we gave our users the option to choose three types of durations: 1 day, 3 days or unlimited. Unlimited was a non-time limited debate that we used as a control. We divided our users between each bucket having one of the three time options preselected. To our surprise, the people pre-selected for unlimited would often change to a 1 or 3-day option! If I were to revisit this product I would want to address click-bait. Just like a click-bait-titled article, often times click-baity reasons would be upvoted to be the leading or winning reason. These reasons do not add to the discussion yet there was no way of deprecating them. Brigade fundamentally disagreed with downvoting so I would need to design a different option. Below you can find iOS screens similar to the web counterparts above. ONGOING DEBATE LEADING REASON WINNING REASON DEBATE BADGE PROFILE