UX Design

Branding

Civic Tech

Debate Bot
Learn about candidate stances through gamified debates
Project Overview
In 2024, Human Rights First held a hackathon called Code The Vote. The winning team created DebateBot, a web application that helps users learn about candidate stances through gamified debate.

I worked with the winning team on a tight deadline to enhance the UX and launch the application before the November election.
Jump To Solution
This is the default text value
Platform
Web Application
This is the default text value
Organization
Human Rights First
This is the default text value
Sector
Civic Tech
This is the default text value
Timeline
Q3 2024 - Q4 2024
This is the default text value
Role
UX Designer
This is the default text value
Tools Used
Figma
Miro
Monday
This is the default text value
Responsibilities
Redesign the UX
Rapid Prototyping
Feature Elicitation
Requirements Definition
Hackathon
In 2024, Human Rights First held a hackathon called Code The Vote. Teams were tasked to create a gamified experience to combat voter suppression and get more people involved in the election.
The winning team created DebateBot and were brought onto the Innovation Lab team as fellows to launch the app.
Early Concepts
Hackathon participants rapidly iterated on how the application would work, and created rapid functioning prototypes leveraging GPT 4.0.
Version 1 of the tool was target at the presidential election and allowed users to select the candidate they wanted to hear from. This ultimately was decided against because it would allow users to further any biases they had against candidates.
The UX was re-structured for Version 2 to be a blind debate. Users would write their own questions, then vote on the response they preferred the most.
Final Hackathon UI
The final GUI from the hackathon concluded instructions for users, debate topic ideas, 'badges' for participating, and incorporated more color.

However, there was sill a lot of improvement for both the UI and the UX. The Innovation lab knew if the tool was to be adopted by users it needed to have more 'fun appeal'.
Redesign Process
We took were on a tight deadline to redesign and launch DebateBot before the November election. I led UX design efforts
I planned and facilitated two workshops with the DebateBot team to rethink through project objectives, offerings of the current design, explore new feature ideas, and the implications that each design decision had on the user experience.

Ultimately, we wanted the application to be FUN! So, we began to think through some ways in which we could do that. The current design was optimized for desktop experiences, but we knew more people would use the app if it was available on mobile devices. We started thinking through how we could redesign the experience for mobile and what user flows could look like.
After we had a rough idea for the user flows, I took the team through story boarding exercises. Most of the DebateBot team were solely engineers, and had never experienced a design session before. We had a lot of fun playing into our imaginations for what feeling the application to evoke for users given different game approaches.

We floated the idea making it feel like a classic Zynga game (think Farmville), but ultimately landed on making it feel like the user was watching a primetime debate on television. The stakes would feel higher, people would be more engaged, and also take it more seriously.
Final Solution
Tonight, we're handing you the mic!
Feel like you're moderating a primetime debate with DebateBot. Have fun while you learn about your candidates and their stances to your questions.
Are you ready for the DebateBot Washington Governor debate? It's Dave Reichert vs Bob Ferguson.
How to play: You ask the questions and you pick the winner. The debate is blinded, so you won't know which candidate said what until after you've voted.
Before you get started, learn about the candidates.
Now it's time to choose a moderator and start asking your questions. If you can't think of any, there are pre-generated questions for you to choose from.
Remember, it's a blind debate, so you read the candidates' responses, and vote for your favorite. See who said what and who won at the end when you choose to end the debate.
Next Project