UX / Visual Design / Front-end Development
You want to watch a movie.
Fine.
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 ;)
The Movie Card
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.
THE MOVIE CARD. UPON POPPING UP, THE REST OF THE SCREEN IS DARKENED AND THE FOCUS IS ON MOVIE INFORMATION— INCLUDING, MOST NOTICEABLY, A LIST OF PROVIDERS FROM WHICH YOU CAN STREAM, RENT, OR BUY THE FILM.
“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.
MOVIES LISTED BY PROVIDER (LEFT). ULTIMATELY PASSED OVER. THIS DESIGN PRESUMES PROVIDER IS THE MOST IMPORTANT FACTOR— IN REALITY, THE SITE IS PREMISED ON THE IDEA THAT IT’S NOT PROVIDER THAT MATTERS, BUT COST AND CONVENIENCE.
MOVIES LISTED BY VIEWING OPTION (MIDDLE). BETTER. MORE FOCUSED ON HOW THE USER MIGHT SORT VIEWING OPTIONS IN THEIR MIND. PRICE IS HIGHLIGHTED OVER PROVIDERS. EASY TO SCAN. TAKES A LOT OF SPACE— ESPECIALLY WHEN STREAMING OPTIONS ARE ADDED.
“PROVIDER DISC” (RIGHT). TRYING NON-TABULAR WAYS OF DISPLAYING THE DATA. ULTIMATELY PASSED OVER (DIFFICULT TO SCAN; UNNECESSARILY COMPLEX), BUT WORTH SKETCHING OUT.
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:
> Playing trailers, rating movies, and creating channels were all possible post-alpha features
> The look and feel were too dirty, too plain-- sandy, almost. The content needed to be displayed in a really appealing way.
> The look and feel were too dirty, too plain-- sandy, almost. The content needed to be displayed in a really appealing way.
So we continued to play with new ideas, both visual and interactive.
INTERACTION TWEAKING. ALTHOUGH ALL PARTIES INVOLVED LIKED THE CARD METAPHOR, WE ALSO CONSIDERED AN EVEN MORE LIGHT-WEIGHT SOLUTION—WHEN BROWSING MOVIES, CLICKING ON ONE WOULD CAUSE AN SLIDEOUT TO APPEAR WITH MOVIE INFO AND VIEWING OPTIONS. NO MODAL CARD NECESSARY.
VISUAL TWEAKING. A MORE COMPACT LOOK WITH A DARKER THEME. SIMILAR TO OUR FINAL IDEA. WHY DID WE CHANGE? BECAUSE THE TAB INTERACTION HERE IS LESS CLEAR AND THE ICON LIST IS HARDER TO SCAN.
Channels
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.
A CHANNEL PAGE (INITIAL DESIGN) ON HUBSTER
AN RDIO PLAYLIST.
A SPOTIFY PLAYLIST.
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?
A NEW CHANNEL CONCEPT. I FOCUSED ON CREATING SOMETHING TEMPTING TO CLICK ON. WOULD YOU SCROLL THROUGH THESE MOVIES? WOULD YOUR ORGANIZATION PAY TO HOST ONE?
A SCROLLED DOWN VIEW OF THE CHANNEL REDESIGN.
A CHANNEL-BASED HOMEPAGE. A NICE SIDE EFFECT OF MAKING A CHANNEL REALLY APPEALING IS THEY ARE ALSO FUN AND INTERESTING TO BROWSE. HERE IS A HOMEPAGE CONCEPT BASED ON DISPLAYING BEAUTIFUL CHANNELS. COMPARE THIS LIST OF CHANNELS TO THE NEXT IMAGE, WHICH WAS THE OLD CHANNEL LIST DISPLAY.
THE OLD CHANNEL LIST DISPLAY. IT DOESN'T SELL THE CHANNELS. THE REDESIGN (PREVIOUS IMAGE) OUTPERFORMS.
My Role
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).
I also worked with the CTO on the design hand-off. Instead of handing off redlines to a development team, I did the front-end development myself, handing over thousands of lines of HTML, CSS, and JavaScript. The developers praised my code’s readability, structure, and commenting.
* * * * *
Please see my full portfolio here.
