Queued: Visualizing the Queue

By on March 27, 2009 12:02 am

Visual Translation

As with every SitePen project, we started out Queued with a set of written requirements that defined what the app should do. From that set of requirements, the design team began to define common user goals and create wireframes that detailed how the user would achieve these goals.

Visual Translation

We created a set of wireframes for every screen in the app and then the visual fun began. What should it look like?

The Red Envelope

Queued Icon Working from an established brand, we had a leg up in designing Queued. Netflix is known for its fast DVD shipments and of course the iconic red envelope. We wanted to make an interface that didn’t just look like the Netflix site, but one that actually “felt” like Netflix. An interface that captured the feeling of opening up your mailbox and tearing open the red envelope to see what would be on the small screen next!

Prototype Time

We created an initial, visual design followed by a quick visual prototype demo in Flash to see if the visuals and the interaction of clicking on a movie worked the way we had imagined. Sometimes a good idea is just that.. good, not great. The initial, visual design was without many boxes or hard lines. It was shaped and colored similarly to the Netflix envelope. Our search box was styled after the open panel on the front of the Netflix envelopes (although moved to the top right rather than the left).

In the early stages we love to try things out with prototypes. Some things look great in Photoshop, but just don’t work well when implemented. In this case, we determined that the slide-out movie info didn’t feel right. It also felt like our menu items were floating alone and didn’t really stand out as the primary navigation tool that was intended. So, we set out to fix this and started iterating on our original idea as we moved into the Alpha phase.

Queued Alpha

For Alpha, we gave the menu items a more defined area to live in and styled the sub-menu to stand out a bit more. We were generally happy with the design and we cut our Alpha release. After Alpha, we had a design meeting to take a step back and look at where we were. We identified a number of areas where things weren’t quite right. The grid of movies felt flat and boring and everything blended together. Nothing really popped.

One Last Change

On the way to our final release we decided that the red content area was still very overpowering. The idea for the red was to remind people of the Netflix envelope, but because the red was used everywhere it didn’t feel special—just red. We made a change and went with a lighter background and gave the box art more depth.

Queued Beta

Because of the great job done with the CSS, these updates required very few changes other than exporting new images. Changes like this could impact your schedule if you don’t plan ahead for them. Through years of experience, we’ve learned that great design requires iteration and that hitting a home run on the first at-bat is rare and not the way you want to schedule your project.

Get the Source

Be sure to check out Queued and if you’re interested check out the PSD for one of the Queued screens.

Comments

  • Bill

    Hi, I love this program! I can see it being of great use to anyone who has a dedicated media computer or HTPC (home theater PC). This way I have a beautifully constructed interface for my Netflix account with the click of a button!

    I have a request for your next revision though, if it can be done that is. It would be great if when I click the play button that the movie would start playing in the Queue window instead of opening the default browser. Which on my pc is Firefox and cannot play the movie, the movie seems to need Internet Explorer.

  • Thanks for the kind words Bill. Unfortunately at the moment Netflix uses Microsoft Silverlight to stream their movies and there isn’t a way to embed Silverlight inside of Adobe Flash. It also violates the Netflix API agreement to play movies from inside your application.

    We have no knowledge of the future plans of Netflix but if they switch to Flash streaming and allow us to embed movies in our app we would definitely love to add that ability into Queued.

  • Uh… Is that ComicSans I see being used in the wireframes?

  • @Ed Shin

    Yes! It’s the default font used in Balsamiq (http://www.balsamiq.com/) which is what we use to do a lot of our wireframing in. It’s a great tool… ComicSans and all.