Postano Social Media Visualizations and Event Displays

Postano's social media event display at the Superdome in New Orleans during Essence Festival
Postano's social media event display at the Superdome in New Orleans during Essence Festival.

I worked for Postano from October 2013 through November 2014 as a developer and UX designer. Postano allows brands to curate fan content via social media campaigns and then display that fan content on websites and custom-built event displays running on the web browser. I worked both on the Postano web application and on developing custom event displays and dashboards. Here are some highlights:

Essence Festival 2014

The 20th annual Essence Festival happened in July 2014, and Postano partnered with the festival to provide all the social displays for events and talks in the New Orleans Convention Center as well as nighttime concerts at the Superdome. I worked extensively on developing multiple custom visualizations for the festival, working closely with both Postano’s design team and the crew working at the festival to put all the screens and technology together.

At the convention center, I headed up creating a custom data visualization application to be shown on a huge LED screen. The app rotated through a graph of total posts aggregated over the weekend relating to the festival, a word cloud of hashtag terms, and a dynamic collage of social images. We also had event displays running on smaller screens throughout the convention center, and were able to provide social screens on stage that flanked speakers during the festival. I worked with Postano’s existing event display library to customize the visualizations to match the Essence Festival branding.

A data visualization showing post trends running on a huge LED screen at the New Orleans Convention Center
A data visualization showing post trends running on a huge LED screen at the New Orleans Convention Center.
A view of the web browser running the Superdome event display and the display on the 100-foot screens on stage
A view of the web browser running the Superdome event display and the display on the 100-foot screens on stage.

At the Superdome, I created a custom display that served as the backdrop to the stage there. In between artist performances and sometimes during, the display ran continuously, highlighting fan’s social posts in real time. I wrote the JavaScript to rotate though the posts and rendered the display in the web browser using HTML and CSS animations. I worked closely with the AV crew to get the display to fit onto their custom raster, which they projected onto 100-foot screens. The end product was a cohesive, dynamic social presence at the festival.

Another view of Postano's social media event display at the Superdome in New Orleans during Essence Festival, where fans could see their Tweets on stage during and in between concerts
Another view of Postano's social media event display at the Superdome in New Orleans during Essence Festival, where fans could see their Tweets on stage during and in between concerts.

Customized Social-Powered Displays

I worked with a lot of great brands, companies, and sports teams to help them build their displays. Two examples of great designs and interesting events were Buzzfeed’s Bowties and Burgers party during the White House Correspondent’s Dinner in 2014 and the Boston Red Sox’s stadium installation.

Bowties and Burgers

During the White House Correspondent’s Dinner in 2014, Buzzfeed and Facebook sponsored a party called Bowties and Burgers. Postano provided social data aggregation for the event, and I was in charge of developing a custom event visualization for them using aggregated social posts.

Screenshot of the Bowties and Burgers event display running in a web browser
The event visualization running in a web browser.

The display was projected onto a wall to look like picture frames. The technical problem was not just exactly fitting the app into those frames, but also one of randomly and dynamically going through all the social posts and also displaying sponsor images in a repeating pattern. I worked off of an existing event framework we have, and wrote JavaScript to handle sorting and shuffling the posts. Not only was the order random, I also designed it so that the timing was also random. The end result was a subtly switching display of seven different pieces of content.

The event display projected on the wall during the Bowties and Burgers event
The display ran continuously throughout the event, updating with user's images as the night went on.
A closeup of the event display that was projected on the wall during the event
A closeup of the event display that was projected on the wall during the event.

Boston Red Sox

The Red Sox needed an event display to feature social fan content. At the beginning of their 2014 season, I headed up the design and development of those displays for them.

An example of the typographic poster social media visualization, using the Red Sox's team colors
One treatment Tweets got in the typographic poster visualization.
An example of the typographic poster social media visualization, using the Red Sox's team colors
This typographic poster visualization was used in multiple event displays throughout Fenway Park.

Working within our existing library of event visualizations, I built out a typographic poster visualization for fan tweets. I used the team’s home and away colors as well as the classic Red Sox font to highlight certain hashtags inside of fan Tweets. This display was set up in Fenway Park as part of a social wall display called “The Social Monster.”

Image of the Social Monster event display inside of Fenway Park
A variety of social media posts were shown at a time, dynamically animating in and out, at Fenway's Social Monster wall.

I also designed and developed a collage-style visualization for the team. The collage featured social posts from multiple sources in a dynamic, changing grid. The Red Sox put this display up on their “Social Monster” wall, but also partnered with Sapient to put the display on the back of Fenway’s Green Monster, the left field wall of their iconic stadium.

Social Media Dashboards

A new feature I helped prototype and develop was a social media dashboard. Postano was asked to make a social dashboard for the University of Pittsburgh Medical Center that would serve as a place to highlight social stats and social posts from UPMC’s official accounts. The application needed to work on a 1920 x 1080 monitor, as it was being put on display in the hospital, but also on desktop computers and mobile devices, so anyone could go to the site to see the content.

I developed the dashboard using designs provided by UPMC. I used AngularJS to get and refresh the social data and display it on a single page. I made sure the site fit perfectly on both the hospital display but was also responsive down to mobile devices. I incorporated the desired social feeds as well as social analytics data, which were displayed in custom graph widgets.

A screenshot of the UPMC social dashboard
This dashboard was displayed on TV screens at the hospital, and served to show both social media posts from all of UPMC's feeds and data about those posts and local information to visitors.
Previous

Leap Year Calculator

 
Next

Choose Your Own Portland Adventure