You turn on the XBox, open up Netflix, and search. It's not there. OK, time for Plan B. Maybe it's on Hulu. Nope. Crackle? Not there either. Well, maybe you could rent it from Amazon. Unless you get it for free from Amazon Prime Instant Video. No, it's not there either. OK, well before renting it from Amazon, you should check iTunes to see if it's cheaper there.
And 20 minutes later, you start watching a movie.
Hubster.tv solves this problem.
Search all movies, everywhere. See where they are and for how much. Watch it, then find your next favorite by browsing other channels— or create your own.
In the spring of 2013, Hubster.tv hired me to design the user experience for the alpha version of their service. I'd like to show you a bit of that process. I'll focus on the decision-making process over the final product and the critical interactions rather than go over all the work I did.
I'm particularly good at talking about myself, so if you want to hear more, just drop me a line ;)
One of the critical interactions in Hubster is the movie card. The card is a light-weight visual display of movie information to help users figure out if they want to watch a movie in question, and if so, where. It pops up when a user clicks any movie on the whole site.
“Help a user decide to watch a particular movie” is a fairly common goal of already-existing interfaces. It's been done. Helping a user find where to watch a movie is something newer and less solved. I wanted that experience to take center stage, so I started sketching that first.
For each movie, there can be potentially dozens of places to watch it. They have different prices, video definition, and terms of purchase/rental.
The challenge is displaying all of these in a way that allows the user to efficiently make the decision of where to watch.
A tab-based way of displaying results was the best for space, scannability, and giving focus to a user’s priorities.
And it fit nicely into the movie card.
The rest of this card sketch is ordered towards helping a user decide if they want to watch a given movie. Displaying things like a trailer, plot summary, and star actors/directors are well-established ways of answering this question.
The first card mockups solidified our ideas about how to display the movie information, but left some things to be desired:
So we continued to play with new ideas, both visual and interactive.
Another feature of Hubster is channels— user-created lists of movies that can be subscribed to. Channels are still a developing concept at Hubster, but I want to highlight a couple of things about the feature discussions that have gone on so far.
My initial wireframe was rather plain and standard.
As is visible from this wireframe, user-created channels were initially not something which were very appealing on their own. My design here was very lazy— I basically treated a user-created list of movies exactly as one might create a user-created list of songs.
Compare the photoshop mockup to playlists on rdio or Spotify.
The problem is that a list of movies is, in some ways, much richer than a list of songs. A TV channel has so much more visual identity and brand than a broadcast radio station that it is senseless to display their internet analogs exactly the same.
With that in mind, I redesigned channels to be beautiful containers for their content. During this process, I asked myself again and again: is this something users would want to subscribe to?
I worked closely with the CEO to design all interactions for the site, going from ideation and sketches to looks-like mockups.
The CEO of Hubster is very concerned with the interaction and visual design of the site, which is great. As opposed to some teams, where good design is sort of viewed as the “only negotiable requirement”, the CEO and I discussed the interactions here at length. He is quite good with Photoshop, and we had a few jam sessions with each other’s PSDs (that being said, the pictures here are, with the exception of a button or element now and again, things I’ve made).
As of the time of posting, I’m still doing work with Hubster. Check back for more updates.
Next: read about designing an app that makes you good at giving gifts.