SpeakOut - Protest Speech App

SpeakOut amplifies protest speeches using smartphones. One person speaks into their phone. Other people amplify that live audio over a wider space with their own phones. 
 

  • Just a few people can create their own sound system.

  • SpeakOut runs in the browser. No need to download a native app.

  • The app supports data rights. Groups can build their own version with added protections.

Role: Concept development, research, design, coding, and testing.
 

Tools: User research, PeerJS, socket.io, Javascript, HTML, and CSS.
 

Context: Used at a rally with 50 people in Queens; subject of graduate thesis at NYU’s ITP program.
 

Timeline: 6 months.

Listen to SpeakOut being used at a rally in Queens.

My Role

​​I researched, designed and coded SpeakOut in collaboration with Transportation Alternatives, an advocacy group for safer streets in New York City. We successfully used SpeakOut at a rally in Queens.

Thank You...

  • Thank you to Transportation Alternatives!

  • Special thank you to Shawn Van Every, professor, and Kathleen Wilson, advisor, at NYU.

The rally where the idea for SpeakOut originated.

What Problem Did We Want to Solve?

I thought of the idea for SpeakOut at a rally in Brooklyn, pictured above. Many of us couldn’t hear the speeches, which was typical for rallies and protests like this. 

I had a feeling I could do something about it. Many people have smartphones with audio. Could I find a solution using phones to help people hear better?

 

From this starting point, I designed SpeakOut as my graduate thesis at NYU ITP for Transportation Alternatives, an advocacy group for safer streets in New York City.

How It Works

Here’s how SpeakOut worked at one of Transportation Alternatives' rallies. With a few changes, the app can be used at different types of events.

While hard to see, the phone on top of the mic stand is capturing the speech. Phones in the crowd are amplifying the audio.

​Advance Set Up

  • Printed fliers with a unique URL to the rally's Listen page on SpeakOut.

  • Smartphone dedicated to broadcasting speeches (and not other event purposes) with SpeakOut's Speak page loaded in the browser.

  • Mic stand to hold phone so that people's hands could be free.

  • Wifi hotspot to provide reliable connectivity for the broadcasting phone.

Broadcasting Speeches

  • Speaker taps “Speak” button on Speaker page on dedicated phone to start broadcasting.

Amplifying Speeches

  • Attendees tap “Join Broadcast” button on the Listen page on their phones.

  • Live audio of speech begins.  Attendees can adjust volume as needed.

Printed fliers and tweet with event link to the Listen page. The link wasn't shared beforehand to meet the organizer's goal to get people to attend in person rather than stay at home and listen.

Creative Process

STAGE 1 - RESEARCH

After I came up with the concept, I researched existing solutions and identified a specific use case.

Existing Solutions

  • I compared SpeakOut to other methods that amplify speeches, including megaphones, sound systems, Occupy Wall Street's Human Microphone, and recent apps like Amplify the Voice and Inhuman Microphone.
     

  • SpeakOut is unique because the audio is immediate with no delay, and while it requires a connected device, cell phones are common. The app is also free, requires no account in order to not identify protesters, with room to add more data protections.

Specific Use Case

  • I made sure to design SpeakOut for real users by partnering with Transportation Alternatives (TA), an advocacy organization for safer streets for pedestrians and cyclists. TA has many rallies with speeches that take place outdoors.
     

  • Once I designed for TA, I could extend SpeakOut to meet other group’s needs. 

STAGE 2 - SYNTHESIS

Here are a couple conclusions from my extensive research to identify TA’s needs and understand the needs of activists who face more risks when protesting.

 

TA’s Needs

 

  • I found that some of TA’s needs went against typical expectations. As one example, TA didn’t want to share the link to their SpeakOut event page beforehand. 

One organizer said "We want people to show up, not stay at home and listen remotely."

  • At first, I was surprised. I thought they would want to publicize the link to help make sure people knew what to expect.
     

  • Yet their goal was to make sure people attended the rally. They thought people might not attend if they could listen from home. 
     

  • As a solution, we waited until the event to pass out fliers with the URL printed on it.

Adding More Protections

  • I went beyond TA’s needs to design for people more likely to be profiled and unfairly treated by the police. 
     

  • For example, one activist, not with TA, explained that while the constitution protects protesters, in reality, factors like the police and one's identity can endanger those rights:

One activist said “When we become protesters, we are a constitutionally protected group, yet we are also vulnerable depending on many factors such as disempowered contexts or one's identity. 

  • To that end, SpeakOut itself can make protesters more vulnerable because it asks people to use their phones in public. Phones can be used to identify people. For example, some police use Stingray Towers to identify people in public.
     

  • I designed SpeakOut with features to mitigate these risks, with room for more:
     

    • SpeakOut doesn’t ask for a phone number, email address, or account to log in. 
       

    • SpeakOut explains the pros and cons of using the app on its Broadcast, Listen and Data Decision Rights pages.
       

    • Anyone can add more protections by spinning up their own version of SpeakOut. The code is on Github

STAGE 3 - DESIGN

Brand
 

  • SpeakOut looks trustworthy with its clean design and simple color palette of blue, black, gray and white. 
     

  • The typography calls to mind handmade protest signs and the DIY nature of rallies and protests.

SpeakOut aims to be easy to use and match the energy of demonstrations.

User Experience
 

  • SpeakOut needs to be easy to use at outdoor events. A listener or taps only once to start listening, as long as they have the unique link to the event.
     

  • Everyone can see how many people are listening, which gives a sense of the crowd even while online.
     

  • Currently, there is no directory of upcoming or current events. This is intentional. TA didn’t want their rally’s broadcast to be easily found. However, other organizations could choose to promote their events on SpeakOut.

User interaction flow: Homepage, Speak page, Listen page, Data Decision Rights page.

Code to Allow Live Audio in the Browser
 

  • I coded SpeakOut myself. I used two tools to send live audio through the browser:
     

    • PeerJS is an API that allows live media streams in the browser.
       

    • Socket.io is a library that takes care of interactions between users with a javascript server called node.js.
       

  • Other than that, SpeakOut uses HTML, CSS and JavaScript.

Code using PeerJS to send live audio through the browser.

STAGE 4 - TESTING

I met with TA staff several times to identify needs for a upcoming rally.

  • Initial Kickoff - We identified a rally, the roles people would play, and how those translated to the user roles and design of SpeakOut.
     

  • Subject Matter Experts - I spoke with more than a dozen people with related experience.
     

  • Design Decisions - Since I had volunteered for TA in the past, I could fill in the blanks regarding some design decisions. But I still needed to make sure it worked for the specific event they chose.
     

  • User Testing - Two highlights include:
     

1. I ran a user testing session with the rally’s lead organizer to get feedback on wireframes and interaction design.

Paper wireframes to test assumptions with staff at Transportation Alternatives.

2. I gave a demo of SpeakOut at a volunteer meeting to gather more feedback and get buy in from the people who would be at the rally

Giving a demo of SpeakOut to TA volunteers who planned to be at the rally.

STAGE 5 - HANDOFF

It was exciting to hear SpeakOut outdoors at a rally for the first time. A crowd of about 50 people were surrounded by the sound of about five to ten phones amplifying the speech. The members of the crowd determined how loud or quiet to make the overall sound.

Two attendees listening to the broadcast at different volumes: louder and further away, or quieter and closer to one's ear.

Attendee Feedback
 

  • One attendee said “SpeakOut made the event feel special. Like something was happening.” 
     

  • Another said “I can definitely remember not being able to hear at protests, and this helps.”

One attendee said “SpeakOut made the event feel special. Like something was happening.”

What Happens Next?

I’m exploring testing SpeakOut at another TA event. Looking ahead, SpeakOut might include:

  • Speech to text for people who are deaf or hard of hearing.
     

  • Features to facilitate group chants or guest speakers who can’t be at a rally or protest.
     

  • Privacy protected method for listeners to sign up for future events.