Doug Roche
Get In Touch

Twitter Map Application

UX Design | Code
twitter app in browser
My Contribution

I helped design the interaction for exploring Google Maps using the radar-like display, I implemented the Express web server (Node.JS) and socket server using Socket.IO, and integrated the Twitter API functionality.

Node.js, Socket.IO, Twitter API, Google Maps API

Team: Charles Aweida, KeVon Ticer

Explore Twitter Using Google Maps

A web application created to survey recent and popular tweets by geographic location.

I created a web application that allows people explore the world as Tweets are continuously pulled from the geographic region defined by the radar-like display. While incoming tweets can be filtered by keyword, users can also look at trending topics in major cities. This provides a simple way to curate and explore Twitter by keyword and geographic location.

This application was created with the help of Charles Aweida and KeVon Ticer originally as part of a class assignment while at Carnegie Mellon University. We worked on this project outside of class, exploring new ways to integrate more of the varied data Twitter has to offer and refining the UI.

Concept

Satisfying a curiousity to see what people are tweeting about around the world.

There are several applications and sites for seeing what is trending on Twitter and offer access agregated Twitter data. Out application is an interactive data visualization where you can zoom around the world and see what people are actually saying in the form of a tweet stream. There is something earily futuristic in that you really can see what people are saying all over and we tried to capture this mood in the technical looking UI.

Currently we are testing what data offers the most engaging user experience. While we may eventually shift towards storing our own Twitter data, allowing us to parse and store the data as we see fit, currently we are combining calls to the search and streaming APIs. This offers a combination of current tweets, recently popular tweets (< 7 day old), and currently trending topics. We are testing our application in person at the moment, but plan to collect analytics once the application is made live soon.

Some other ideas that we’ve considered include: tracing retweets geographically, exploring changes in trending tweets over time, having pre-defined keyword fitlers (for news, sports, etc.), and displaying more information in the tweet stream itself (number of retweets, time of tweet, number of followers, etc).

close up of tweet strem

Feedback & Iterations

Sharing our application with friends led to some excellent feedback:

  • Not everyone realized they could pan and zoom since we had removed the interactors in our initial design.
  • Tweets were best received in the stream in blocks of 5 or more (instead of a constant stream of 1 or 2 tweets every few seconds).
  • The circle defining the geographic region was too large.
  • More information should be availble in the tweet stream.
early radar design

Early version of the radar display. Radar was too large and did not offer feedback about when new tweets were being pulled.

radar redesign

Redesigned radar display. In addition to making it smaller, the crosshairs animate outwards to offer feedback for when tweets are being pulled from the search API on pan, zoom, and idle events.

Fisrt iteration

twitter app world
twitter app zoomed in

Second iteration with refined UI and integrated streaming data

twitter app redesign full world
twitter app redesign over India

Back Home To View Other Work