TweetDay: a better visualization for your Twitter timeline

On Twitter, individuals and outlets frequently use the acronym ICYMI (In Case You Missed It) to bring links to the attention of others who may not have seen them. The never ending stream of tweets makes it easy to miss out on information just because you did not check in throughout the day. To a lot of people this ‘missing out’ and the associated experience of exclusion can be agonizing, hence the term FOMO (Fear of Missing Out). Even if you do have time at the end of the day to check your Twitter timeline, the manner in which the tweets are presented to you makes it cognitively difficult and time consuming to identify what was happening in moments throughout the day. Twitter has tried to surface tweets that you may have missed with their “While you were away…” section, but we believe there is a better way.

Instead of enforcing a rigid reverse chronological timeline, we believe in giving people control over how to view the tweets from the people they follow. This is what we came up with.


Exploration

Our exploration into creating a new visualization started with sketches of what I thought were interesting aspects about the content created in Twitter. Here you can see some of my thoughts on how to visualize tweets across a two-dimensional space instead of a linear timeline. These explorations focused on how to show relationships between tweets in order to surface more context for each user’s feed. Along with thinking about the default interactions provided by Twitter (re-tweet, favorite, direct message, etc.), I also did explorations into the different types of content that people post to Twitter by thinking about videos, photos, and location information.


Challenges and Research

One of the main challenges in creating a new visualization for the timeline is the huge amount of content that is created on a daily basis. Twitter tries to sidestep this problem by creating an infinite scroll and letting the user jump down the rabbit hole. When we conducted initial user interviews, we consistently got the same response that people quit using Twitter because of this unwieldy stream of information. That collective annoyance with the timeline gave us direction in doing a competitive analysis to find examples of how others have dealt with displaying massive amounts of information.

Treemap from Finviz.com. Cells can display extra layers of information by color, size, and text.

One example we found was using treemaps to display stock market data. This enforced the earlier exploration into using a two-dimensional space and showed how further information could be stored in each cell of the treemap.

Color, hue, and length of line can be used as indicators of data.

We also did research into effective methods for displaying vast amounts of text. One interesting solution is Seesoft. It was proposed by Eick et al in 1992, originally as a way to visualize thousands of lines of computer code at once. Each line of code was represented as a thin row with the color indicating some statistic. Selecting a portion of this overview presented the text at that location in readable form in a separate window

Our last piece of inspiration came from TwitArcs. The arcs show a representation of the relationships between tweets. In this example, the left hand side shows connections between users and the right displays matches on subject matter. This was a much better execution than my previous brainstorming of how to show relationships between tweets.


Sketches and Mockups

After discussing the research with the team, I made a quick sketch of how we could combine some of the best aspects from our findings. The sketch was used to help the team visualize the design direction and to form consensus going forward. It also harkened back on early desires to show different types of content by separating out text, photos, and videos.

Putting everything together from our research

Once we agreed on the types of features we wanted in our design. I proceeded to create some mockups and wireframes for how these interactions would work.

This mockup helped to give us a feel for how the hierarchy in the size of cells would work across media types. I placed the larger cells at top with decreases in size signifying metrics for the tweet such as number of favorites or retweets. The higher the number of retweets/favorites, the larger the cell.

I also played around with the color and line lengths of our Seesoft implementation. The thought here is that the length of the line could represent the length of the tweet. We also wanted to improve on Seesoft by adding an extra layer of context by splitting each line into two colors. The intensity of each color would serve to reflect the the relative number of favorites and retweets. This allows the user to quickly scan the tweets in a way that is analogous to the original Twitter timeline while providing the eye an easier method to absorb a ton of data.

The following screen shows how you could interact with the cells in the treemap. The user can hover over each cell and the corresponding tweet will be maximized with the ability to play video and also display more information about the tweet.

Here is a more focused look at how the Seesoft and treemap sides can interact with each other. When a cell is maximized, the corresponding tweets related to that cell would also be highlighted in the Seesoft panel.


Putting it all together

With the basic building blocks in place, and tight project deadlines, we decided to move to designing in the browser to rapidly iterate on the work.

Here, I’m exploring how we can use color effectively. Favorites and retweets don’t lend themselves to obvious color choices, and I wanted to have them elicit the emotions of warmth and enjoyment. I also switched to a dark theme so that the color intensity could range to white for most retweeted and favorited. This would show high contrast and signify that something was “white hot”.

This is our initial screen of everything working together. Immediate issues were shown in the scannability of the Seesoft lines and how the treemap algorithm might overweight cells and create too much distortion in the visualization.


Polishing the design

Hovering over a cell in the treemap shows a maximized version of the tweet along with more information.
Hovering over a TwitArc shows the conversation occurring in those tweets.
Filtering the treemap to show images only
Changing the range of selection in Seesoft is reflected with cells resizing on the treemap.

Results and Reflection

We had great reactions from our users:

“This is making me want to read Twitter more!”
“This is definitely something that I would want to use.”
“I don’t think anything like this exists and I would like to use it when it comes out.”

Overall, I felt like we had achieved our primary goals of creating a new and useful visualization, but this project has been a lesson in how the design is never finished. Each challenge brought about new opportunities to improve the design and functionality of the product. The project was also a great example of how a small team could move quickly by working asynchronously while also coming together to solve tough issues. It was clear that we all cared deeply about creating value with this project.

Despite a great start to the work, there are definitely issues that we want to improve on. This is a work in progress and I believe the TweetDay experience will only get better as we work on known issues and continue to iterate on the designs going forward.

To-do’s for improvement:

  • Allow for more interactions with the tweet, especially replying and retweeting
  • Re-sizing of the cells and transitioning the placement of the cells in the treemap to allow for better readability and scannability
  • Fix the sizing of cells when hovering at the edge of the screen
  • Introductory tooltips for new users to highlight the key interactions

Try out the app at tweetday.co and let us know what we can improve.

I want to thank Daniel, Vijay, and Nikhil for working together to create something better than we could have imagined.