brief
About PeacehackLDN
This weekend I attended #peacehackLDN, a hackathon that is part of a yearly series of events that International Alert hosts. Its aim is to bring people with different skills together to build technology that addresses real issues preventing peace around the world. This event focused on developing technology to tackle hate speech.
Solution
Our team designed and developed a Chrome browser plug-in that linked to the Hatebase API, the world’s largest and most authoritative structured repository of hate speech. The plugin identifies potential hate speech and, as people write messages on social media or news platforms for instance, it generates a pop-up that asks people to think twice before sending the potentially abusive message.
Much to our delight, out of 10 teams who presented, we won the hackathon after presenting to a judging panel that included Sue Black OBE and Peter Barron, VP of Communications EMEA at Google!
My Role
I was a UX designer in a team of six that included UXers, developer, data analyst and product manager. I contributed to creating a Kanban board; one-on-one user interviews; persona creation; research on facts about hate speech; copywriting; idea generation and concept mapping for the solution; interface design; testing; and voiceover for the prototype.
The tools we used were paper and pen, Sketch and Quicktime.
Create a Persona & Storyboard for Our Target User
While the developer and data analyst got started on testing out and coding how to link the Hatebase API to a Chrome plug-in, I interviewed a couple of the teenagers who had joined us from Marsden Heights school for the first evening. The school kids shared with the team experiences they had had of hate speech and the kind of things that motivate teenagers to say terrible things to one another online.
Based on the interviews, we developed a persona for 14-year old “Samuel” who is insecure but emboldened online to act like the Big Man on Campus so as to become popular with one group or another. Our storyboard showed Samuel using his local school library computer to go on social media and send degrading messages about Muslims.
Research and craft message content
We determined that the goal of the pop-up messages would be to ask people to quickly reflect on the message they were about to send that contained hateful words. And then for the message to educate them in some way about who the message might hurt. It wouldn’t interrupt “Samuel” wanting to send a message, but just ask him to think twice before sending it.
Design the Interface
We conducted a quick design studio to generate ideas for how the pop-up would look and then mocked it up in Sketch. The interface had to be something noticeable to the user, but not something that would stop them from posting a message if they still wanted to.
PROTOTYPE
Our eventual prototype of the Chrome Extension — called “Hate Free” — looked like this in the Chrome Web Store. I installed it and tested it by starting to write a message in Facebook using a derogatory term against women. This triggered the following pop-up, success!
At 4pm, the presentations started, and we listened as each of the 10 groups shared their work. The judging panel included Peter Barron, VP of Communications for EMEA and Dr. Sue Black OBE. There were all sorts of inspirational products that tackled hate speech from different angles.
Our product manager gave a great presentation on behalf of the team about the prototype we’d designed and built. Much to all of our excitement and surprise, our team won!
Key Learnings
- We kept the scope of the project tight and focused on something we could actually design and build in 36 hours.
- Our team worked well together, balancing inputs from developer, data analyst, UX designers and product manager.
- The presentation pulled all the elements together into a concise story that demonstrated how it would be easily used and implemented by schools and public libraries to start
Here’s to defeating hate speech — one pixel and bit of code at a time!