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.

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

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.

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.

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.