Responsive Social Template: Image Poll
Client: Mass Relevance
Role: UX, UI, Interaction Design
1. Created a responsive "mobile-first," templated product out of a previous one-off visualization
2. Designed this product as a white-label template to accommodate multiple client branding while remaining true to the branding guidelines of Twitter and Facebook
3. Saved countless hours of design time for our clients by creating these templates with a simple and elegantly designed starting point that allows for limitless client creativity in the Mass Relevance Platform
Mass Relevance was a social platform capable of finding, curating, and redisplaying social content, but the real value was the experiences we could create with that data. P3 was the third evolution of our platform, and we were determined to make simplified templates out of many of the products we had created. Not only were we trying to make white-label templates out of proven social experiences, but we were pursuing a mobile first, responsive design approach.
Since starting at Mass Relevance, I had created several proven products that we wanted to make into customizable templates for our clients. In this example I am going to focus on the image poll template because I was responsible for the original image poll for ABC Family and the mobile template that became a "Mass Relevance Product." I designed the Suspect Tracker to enable viewers to vote on which character from the show Pretty Little Liars was the guiltiest. The results would display in real time and the conversation would be amplified since it would take place on Twitter and Facebook. The finale of the show became the #1 “most social” TV series episode in history, breaking records with over 1.6 million comments according to SocialGuide, and the visualization went on to win a Shorty Award for best use of social media for television. Because of the popularity of this campaign and other image polls, it was picked as one of the visualizations to become productized for the P3 Launch.
As a first step to updating our platform, I was tasked with creating some wires in Illustrator to flesh out various elements that would be need to be addressed in the P3 update. I ran into a problem initially with the Twitter guidelines forbidding Tweet buttons to be combined with Facebook buttons, but I found an elegant solution in a colored Facebook/Twitter combo button that animated to reveal the functionality. The client-facing UI for poll configuration also had to be completely redesigned. I created a Poll Answer Wizard that simplified the once-complicated process of setting up social content to power poll answers. Some of the other improved functionality I was responsible for in P3 were: drag-and-drop poll answers, input hints, and a color picker that didn't require knowledge of hex codes. I also simplified the header into a Title + Subtitle format which allowed the content to be at the forefront. By separating advanced options from simplified defaults, we were able to accommodate the branding of multiple clients which ranged from Pepsi to Victoria's Secret without complicating the UI. Because we started with mobile first, we ended up with a design solution that was very lightweight with subtle hints of branding through colored fonts, buttons, and custom background options.