The Brononymous Hotline

The site: http://savethebros.com

Partners: Humanaut, Redwood

Client: Organic Valley

Technology stack: PHP, TwitterOAuth, ReactJS, Bootstrap, Bower, Gulp, SASS, Capistrano, AWS EC2

Due to the overwhelming success of the initial Save the Bros campaign, Organic Valley decided on a reboot and a new version of the site. While the new site would share many styling and front-end features of the old one there was a good bit of trickeration going on behind the scenes and a short timeline (about 2.5 weeks) in which to make it all happen. This was the challenge.

The core concept of the campaign was that site visitors could anonymously “out” their bro friends and send them a message warning them of their ways. I’ll not delve too much into the details here…it’s way more fun to just visit the site and watch all the hilarious Youtube clips. My job was to facilitate the communication part of the equation via Twitter and create a seamless loop of user interaction. To achieve maximum virality and exposure while not being overly “spammy” or annoying was the ultimate goal and I think we pulled it off remarkably well.

Every site has social share buttons these days. This one was no exception. We gave users the “traditional” options just below the fold when they first visit the page. But we wanted a way to stand out from the pack with different sharing options that fit into the core concept of the site. The Brononymous Hotline was born.

The Brononymous Hotline in action

Users could specify their bro friend’s Twitter handle and a bro trait that best described them. After hitting submit, their friend would receive an “anonymous” tweet (not from their friend’s account, but from The Brononymous Hotline account) calling them out. Through the use of Twitter Cards we attached fun content to the tweet that also steered viewers back to savethebros.com to view more content.

The key to the Hotline system was making the form as simple and clearly laid out as possible. The hover preview design for selecting the custom video message was a clever way of communicating to the user what would happen by clicking one of the trait buttons without having to spell it out with text. Reducing friction for the user to get from point A to point B was the marching order throughout the project and we’re happy with how it turned out.