In this article I talk about the WatchThis navigation bar – its current state and what I’ve been working on.

The new design is a draft. Feedback is encouraged, as always.

Today

If you go to WatchThis right now you’ll see this at the top of your browser window (if you’re logged in):

Not much is wrong with this design when you first look at it. It’s pretty straightforward, or so I thought when I first designed it.

But after many months of use, I realized there were some problems with it.

No hierarchy

There’s the logo which is bigger, but then everything is the same size. “Discover Movies”, “My Movies”, “My Profile” and the search bar. There’s also a prominent logout button (button you use only when someone else is using your computer and you don’t know that private browsing exists).

This is bad because there are definitely things you do more often than others.

Let’s assume you start from the homepage. So you’ve just arrived on the site, there are 4 things people can do, in this order of importance:

• Search for a movie
• Look at your to-watch list
• Discover new movies
• Look at your profile (mostly to check your activity and remember what you recently watched/added to your list)

The rest (look at your friends’ activity, see the most important movies in your list) is on the homepage.

And that’s only if they start from the homepage. If they land on a movie page. They probably don’t care about “Discover Movies” since it’s what they’re already doing.

Visuals

I love the WatchThis red but we get complain from users that the bar hurts their eyes. That’s not good.

Search!

We realized that what most people do (including us) when they go on our site, just like when they go on YouTube or IMDB or Rotten Tomatoes etc. is search. They search for a movie they just saw to tick it, they search for a movie they heard of to add it to their list, they search for a director to see what movie s/he also made, etc.

We love to search, we need to make this more prominent.

Tomorrow

I had 2 main inspirations for the new navigation bar: Facebook and Google. Google’s new search bar, which they’re currently rolling out, is great (although I’m not a fan of anything that needs hovering – we’re getting rid of that in WatchThis soon btw).

I like how Facebook displays the link to your profile on their homepage:

I chose to display the avatar (link to your profile), but I changed the text link for the to-watch link, being very explicit about it:

I like writing a lot in my designs. I don’t mean big chunks of text, but I mean using sometimes a full sentence instead of an icon or a few words.

I love the copy on Louis CK’s website for instance. He details everything. You always know what you’re clicking on. Take “Already bought it? Login” instead of just “Login” for instance: one could think “Login” is enough since you received a password and login via email when you bought it, but you shouldn’t assume everyone will make the connection (watch your parents browse the web and you’ll see what I mean).

So yeah, I’m happy about the “View your to-watch list.” The avatar will probably be bigger in the final version.

Now. Search. Well, first off, let’s make this search bar bigger, shall we?

And let’s make it front and center while we’re at it:

That’s it actually!

Okay let’s look back at what we can do with the current navigation bar and how it’ll change with the next one:

• Search for a movie: Easier! It’s right in front of you. You can’t miss it.
• Look at your to-watch list: “View your to-watch list.” Enough said. No more vague “My Movies” (what does that even mean anyway?)
• Discover new movies: Uh huh. This will be a link on the homepage. Like we saw, people so rarely use it from a movie page that it’s not worth the screen estate.
• Look at your profile (mostly to check your activity and remember what you recently watched/added to your list): just click on your fancy face.

There’s a reason the new navigation bar is not live yet. It’s not the final version, and I’m hoping to get some feedback from this article. It’s also part of a massive overhaul. More on that later.

I’m going to “live blog” some work. I want to redesign a page. Here it is:

I designed it. It is bad for many reasons, which I’m too lazy to list here.

I was sitting on the couch half watching a movie and had my legal pad with me. I sketched this:

My sketches are always ugly and I’m often the only one who can understand them. I don’t know how the cool kids do it with their clean drawings in their pretty moleskine notebooks. Mine are always shitty.

I’m going to try to do it in Balsamiq now. A step I usually skip to code it in HTML+CSS right away.

Alright. Balsamiq was a good move I think. I have a little problem as you can see:

Everything fitted perfectly when I sketched it, obviously, but with real proportions it’s different. The price tag and number of beds are completely lost… Let’s see what I can do. I forgot to add the property name so I’ll use that.

Now that’s better:

Everything seems to fit together. I integrated the price in the “rent it” button, and added the beds and price above the map, so now this area is a nice ID card of the property, next to the photos, and below are more details.

But I think I’d like to make the photos even bigger. Remember the post about the WatchThis movie page? How it’s about telling a story. The story of how you discover a movie in real life. Well here it’s a home. And the first thing you want to know about a home is what it looks like. Then, very basic details: number of people it can host and price. Then a quick pitch, and the amenities. The photos are definitely the most important thing. Alright, let’s go.

I think this is it!

The photos are huge, and as you discover them you can’t miss the price or the number of people the place can accommodate (note that I changed that from the number of beds, which wasn’t very clear).

Next to the title is the exact address, which is actually a button you can click to reveal a bigger map than before:

Below is the rest. That is, if you’re a westerner, in this order: description, amenities, and booking! There’s a reason the rent button is down there in the bottom right hand corner. For the same reason logos on billboard are there. We read from left to right, top to bottom. So you’ve discovered the place, you like it, and the last thing you see is what you want to see: how you can spend some time there.

So, lesson of the day: use Balsamiq, it’s way more useful than it seems. I’ll probably tweet the implemented design when it’s done.

Thoughts? Reactions? As usual, I welcome the criticism.

One of my classes at Stevens is called “Integrating IS Technologies.” It’s actually a class about design. We learn how to design elegant solutions to problems. The first assignment was to design a Personal Information Management system. This one was to solve a problem in a company.

Now, my company is the university lab, and there aren’t that many problems, so I picked the insurance company my dad works at, a company I know well since I spent many summers working there after high school. My work consisted of assisting the employees in charge of handling client requests for indemnities. These employees are all skilled – you need a college degree to join the team, and most of them have a Law degree.

But the employees spent a lot of time answering clients on the phone who are wondering what’s going on with their request. Most communication with clients happens through regular mail, so the line I heard the most was “the check’s in the mail.” This wastes the customer’s precious time and induces great frustration, while paying highly skilled employees (which means they get paid well) to do the work of a machine.

My solution

Once the company has received a request, a link is sent via email to the customer. This link sends them to a page where they can refer to know what’s going on with their request. It contains all the documents the company has sent or received from the customer, so if a document is missing, both parties know it right away.

There are 2 parts. The first one is the header of the page if you will. There the customer can see the current status of their request:

Or, when it’s closed:

The second part of the design is a history of the request:

The beauty of it lies in its simplicity. One link, no login or signup. You click on it, you have the info. No need to click anywhere on the page to find what you’re looking for. It’s all there, yet it’s not cluttered.

Here’s the presentation I gave in class:

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.