Overview
The history section on Dramafever allows users to track what they have been watching on the site.

Before
One of the biggest issues with the original history section was that users were unable to remove any of the videos from their history. This caused a backlog of information for most users as seen below.

The original history section in a user's profile page

Other problems that existed were the equal visual weights in the three call-to-actions: Resume Episode, Play from Beginning, and Watch Next Episode. The three buttons didn't align with the fact that users' mostly resumed an episode rather than playing from the beginning or watching the next episode. There was also confusion in the language used in some of these buttons such as "Play from Beginning". What beginning were we playing from exactly? Was it the drama itself? Or the episode?

Other key information such as the episode and the time when a user stopped watching were hidden under the title of the drama. This specific feature in conjunction with the "Resume Episode" button were mentioned by a majority of DramaFever users as being one of the most 'delighful' features and yet it is neglected in the hierarchical sense on the history page.

Process
Prior to mocking up the history page, I had some of the DramaFever staff join in on some participatory design. Inspired by the folks at Frog, I created elements and components of the history listing using Post-Its and had participants create what they thought should have been the way the information was to be displayed for each listing. The following process took only about 10 minutes and it opened up new ways in visualizing the data. It also gave me a general direction as to how to lay out this portion of the site.

The original history listing in Post-It form

1st Pass through Participatory Design

2nd Pass - Reduced the data ink used in the time data

After this phase, I moved onto the design. In the initial, rough mockups, the three call-to-actions still had the same visual weight. I did some quick research on Google Analytics to see which buttons were most often clicked on and according to Google, it was the "Resume Episode" button, which matched up with my original assumption. This resulted in making the "Resume Episode" button more prominent than the others.

Call-to-actions with equal visual weight

Resume Episode link now has more weight

During this phase of the design, I quickly created a rough working prototype using Adobe Fireworks' linking feature to get a feel as to how everything would work. After some playing around, I noticed that clicking on the trash icon was a bit wonky. If I was to have 20 videos in my history section, I would have to click on the trash can 20 times and maybe even have to click on some sort of confirmation for each one. With this sneaking suspicion on my mind, I contacted some friends I knew that watched dramas on a regular basis and had them tell me about their viewing habits.

Several quick interviews later (all done over instant message), I found out that most of my friends would frequently "preview" dramas and move onto the next if they didn't like the current one they were previewing. Based on this finding, the assumption was that the history section had to be able to provide users with the ability to manage a large range of videos at a time.

Final Design
Wrapping all of the findings up into a final mockup, here's the final design.

The final design for the history section of the user profile

The mockup displays the possible cases in which each of the data objects might show up as. In the third row, White Lies, the user has finished the final episode. In the fourth row, the user finishes up to the latest available episode in which then they are asked if they would like to be alerted when the next episode was available.

And last, but not least, here's the comparison between the before and after.

Before and After

Post a Note
Name:
Email:	do not notifynotify
Website:
Title:

Powered by !JoomlaComment 3.12

Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved.