Design Club

To provide more experience practicing design in team settings, I started the HCI/d Design Club. For the first year, the club took on design projects with the goal of finishing in one hour.  Students would take turns presenting a design problem for the club to solve.  The following is a 1 hour design project I worked on in design club.

Twitter Redesign

Our 20 minute Concept

At first we discussed how to distinguish between read and unread tweets. We decided that the best way to show differences in tweets was with color or differences in border similar to the differences shown in Google reader.

Additionally, we were concerned with the way that Twitter opens on the web. It goes automatically to the most recently posted tweet, rather than showing you what you last read, which differs from the way it opens on a smart phone. This opening is a problem, because many tweets and tweet conversations require context of timing as well as other tweets. Reading tweets in chronological order is necessary to understand conversations as well as to gain context of the messages.

To address this we redesigned the web version of Twitter to open to the last read tweet. However, we added a button that would take you to the top of the page if the reader should so choose to start at the top. When taken to the top, the reader could also be brought back to their last read tweet with the same button, depicted inversely. We also color-coded the tweets to visually show whether the reader had read the tweet or not. Read tweets were shown in red and unread tweets were shown in yellow. The color change would occur as a result of scrolling the page, similar to Google reader.

To further allow the reader to navigate through their tweets, we allow them to select all tweets, unread tweets, or read tweets. Our intention was to allow the reader to quickly scan or find tweets that they had missed or wanted to refer back to.

We changed these things about Twitter to allow it to sync up with a smart phone Twitter application. If the two devices could keep track of the tweet last read by the user, the user wouldn’t have to navigate through the site or the phone to find their current reading place. Thus, we intended this redesign to act much like a bookmark for the user.

Our 15 minute usability test

During usability testing it became apparent that it wasn’t obvious to the user that Twitter was now opening to the last read tweet rather than to the latest tweet, which is how Twitter is currently set up.

Our 10 minute iteration

After talking to our user about our changes to Twitter, we decided it was essential that we make it obvious that Twitter is now starting at a different location than it has previously started. To do this we incorporated a demo-like beginning in which the screen would begin at the most recent post; however, the button to take the user to their last read tweet would depress and the page would move downward to that last read tweet. Additionally we wanted to ensure that the user would be clear on the functions of the buttons. To address this we incorporated mouse-over text explaining the functions of the button.

Lessons Learned

Even in a simple application, there are many things to consider. So one must be careful when designing even the smallest of interactions.