Since WatchThis launched, I made a lot of changes to the movie page.

I like to keep the number of pages to a minimum. When we discuss new features with Kevin we always evaluate the impact on the site in terms of interface: how many pages will have to be changed and how many pages will have to be added. It’s often too many.

The small number of pages means 2 things:

• All pages are of great importance, which encourages me to pay a lot of attention to details,
• The site is very simple. I think it’s hard for someone to get lost on the site. What I hate seeing is my parents¹ getting angry at a site because they don’t know where there are anymore, and they just close the tab.

The movie page is one of those pages. When we launched the site, it didn’t have any social feature. So the page only had to:

• Give basic information about the movie (we’re not IMDb)
• Allow the user to add the movie to their list / mark it as seen
• Show comments and allow to post a comment
• Show how many people have seen it
• Show related movies

But with the social features, and other features added later, the page also had to allow users to:

• Add the movie to their favorites
• Recommend the movie to a friend
• Watch the trailer

One of the biggest challenges in designing this page is that I don’t always have all the information. Some movie just have a title and a year. That’s it. No poster, no plot, no actors, no trailer, and often… no related movies! So the design has to be flexible enough for a movie filled with information, and a russian existentialist tale in black and white stop motion. This is the main reason behind the vertical design. If an info is missing, the div is absent but it doesn’t leave this whitespace that makes it feel like something is missing. This is a lot harder to do with an horizontal design².

Okay, let’s look at what the page used to look like.

As you can see, at the time, the button to add the movie to your list wasn’t on the poster yet (go anywhere on the site and hover on a poster).

A major problem with this design was that the page was totally unbalanced. I wanted to keep all the user interaction on the right side of the page, and the info on the left side, betting that we’d have a lot of comments everywhere to even things out. But, we’re not IMDb, so we had (and still have) many movies with no comment.

So I started by moving the related movies up on the right, because after a few months of using the site,³ we realized these were a great way to both discover new movies and tell you if you’ll like this one (if you hate all the related movies, chances are you won’t like this one).

I tried kept the idea of separating the info and the interaction, so I put the recommend box on the right, and the trailer on the left, right below the plot.

When designing the right of the page, I imagined the way you discover a movie. First the title and year and poster. Then you want to know what it’s about, and if that sounds good you’ll watch the trailer. Now if you’re interested in watching it, you can quickly see who amongst your friends (and the world) has seen it and calls it a favorite. Next, the people category shows director, writers and actors together. Finally the genres, that I consider less important since often a bit vague (e.g.: “drama”).

It comes down to what the movie is, and who likes it. This is how you discover a movie in real life, through a conversation.

The recommend box is right above the comments, as to encourage you to at least recommend the movie to a friend, if not sharing your opinion with everyone. We’ve found that people use this feature a lot. Once again we’re mimicking real life interactions here. Yes nowadays, when you see a movie you like you’ll tweet it, but above all you’ll recommend it to specific people that you know will like it.

I’d love to get any kind of feedback on this first post. I welcome the criticism. What do you want to read on this blog? What needs to be explained in greater details, etc? Thanks for reading.