A tool to help you visualize your gchat history with your contacts.

Jumping In: The Situation

students up late in library

BeingHeard is a tool that helps reflective individuals to visualize their chat history with their instant messaging contacts, and see patterns in conversation as well as changes in their chat relationship5

When I jumped in, the featureset was already established-- users were able to see chat info with one of their contacts at a time. With this contact's chat record, they could:

  • see trending words current to their most current conversation
  • see trending words from their total chat history
  • see the amount of words contributed by both the user and the contact into a conversation aggregated by time (by year, month, week, time-of-day, and hour)
  • focus on and search for specific trending words, and see when and how many times they occurred in conversation

BeingHeard, which was under the guidance of Professor Dan Cosley and led by one of his PhD students, was my first project that stressed a user-centered design process. The design shown on the left is a mock of what the project looked like when I first joined the team.

The Process

The BeingHeard team was split up into designers and developers, with Professor Cosley and Victoria as the main liaisons between the two groups. I decided to take on a major role in the designing of the tool, and a lesser role as a developer. As a developer, I was mainly in charge of working on making a light-weight word cloud; as a designer, there were two main issues I contended with: the app's word cloud and history of trending words visualization designs.

Trending Word Cloud

new word cloud concept

When I first joined, the team was struggling to design a visualization that efficiently showed users their own word clouds versus the word clouds of their contact. The original design at the time was for each word to be a separate color, and using two separate color pools to denote whether the words were in the current or aggregate word cloud; there was no way to tell if one was using a particular word more than the other. After spearheading two brainstorming and design iterations, we settled on only using two colors: one color to represent the user's words, the other to represent the contact's. Each word would show up twice in a word cloud if both the user and the contact used it a lot. When the user mouses over one word, everything that does not match that word dims.

Word History Bar Graph

world history bar graph

The other main design challenge was getting the History of Trending Words graph to play nice with the rest of the interface. Because it was a miniature applet of a pre-existing application built by Professor Cosley's lab, the original standalone app supported slightly different user goals. Thus, in addition to making it feel like a part of the same app here, we also had to strip down unrelated features, and add relevant ones.

After two or three iterations, we decided to make each time block into a composite time graph, with one block of color representing the amount that the user spoke during that time interval; the other, the amount the contact spoke during that interval. Colors would match the ones in the word clouds.

However, with that settled, user testing results showed that we still lacked an intuitive way to highlight specific words in the bar graphs, when the user is looking to examine a specific word. So, the design team brainstormed several alternatives to use

alternative search word visualizations for the bar graph

After testing a handful of users with word counts from real conversations, we discovered, to my surprise, that the dots alternative, the semi-serious suggestion, was the one that resonated with users the most.

The Result

BeingHeard v3 mock

As my first design-oriented project, BeingHeard has given me a lot of insight into the world of design. The final version of BeingHeard that I worked on can be seen on the left. These were printed out, and tested as paper prototypes as with every iteration I designed. User responses to this version of the tool were much more positive than those of previous paper prototypes tested. Users were easily able to deduce the way we portrayed current and all trending words, as well as make good use of the history of all trending words graph portion.

Also, a mock-up of the javascript behind the word cloud functionality, which was done in javascript, php, css, and html, is seen below:

< Back to Portfolio