As a pretty regular movie-watcher, IMDB’s a site I’m on pretty often, like at-least-once-a-day-often, but their current site (as of 2015) leaves a lot to be desired. The style feels dated and from a user experience perspective there’s way too much going on, making it hard to focus on what’s really important. So, as a fun side-project I decided to develop a new design system for their site, update their logo, and redesign a couple key pages.
I kicked things off with some basic wireframe sketching. For the purposes of my redesign I chose to focus on the homepage and an individual movie page. I started by taking an inventory of the different content that currently existed on those pages, ranking that content by importance, and removing that which I felt either superfluous or would be better suited on a different and more dedicated page. Once I had a clear sense of the content I wanted to include and its hierarchy, I began sketching out the pages.
I started with the homepage by planning out my main header navigation. I wanted the focus to be on search (as a majority of the time I visit the site, I’m there to search for a specific movie or actor) and on IMDB’s Watchlist feature (which was something I hadn’t really even noticed on the previous site, but allows users to add movies that they’re interested in to a favourites list). I then planned out the hero section, which I wanted to focus on trailer watching and movie discovery and grouped it into a couple key categories like “In Theatres” and “Coming Soon”. I also wanted to make it really easy to find movie ratings wherever possible across the site as IMDB is a very trusted source when it comes to movie ratings and a huge reason why many users visit their website. Moving down the page I sketched out a section for popular lists (like IMDB’s top 250 movies of all time) and another for featured news (again, grouped into segmented categories) before finishing with calls to download IMDB’s apps and visit their social feeds.
Here are some of my homepage sketches:
I then planned out an individual movie page, following a similar method. My main focus for the movie page was organization and grouping content appropriately so that a user would be able to find whatever information they were looking for really easily. I also wanted to give a lot more prominence to imagery than what’s on their current site. There’s a ton of really amazing imagery available for pretty much every movie (unsurprisingly), so I wanted to be sure to highlight that as much as possible.
Here are a couple sketches for my single movie page:
Strategy
Logo Update & Style Tile
Next, I dove into style and started by redesigning IMDB’s logo. I kept things simple and clean and stuck with their trademark yellow and black combo, but updated things to feel a lot more modern. Aside from the updating the type, I took the wordmark out of the yellow box and added in a very simple play button in yellow beside it. My reasoning here was twofold: the box felt very rigid and dated with the gradient that it has, and the logo didn’t really convey anything overly “movie-like” to me. That’s where the play button comes in. If there’s any symbol that quintessentially says “movie”, especially with the rise of online streaming, it’s a play button.
Here’s the updated logo:
After the logo refresh, I developed a full style tile to help me plan out typography, iconography, colour, and so forth. I started with type and went with a combination of the bold weight of Brandon Text for headlines and the very readable and airy Open Sans for my longer-form copy. Next, I explored colour and added a green and a blue to help liven up their existing yellow, black, and grey palette and opted to dedicate these new colours to actionable items on the site, whether it be a simple text link or a play button. I also fleshed out imagery style and iconography. For my icons, I wanted something that would feel modern and sleek, but also classic, to reference the golden age of Hollywood and capture some of that nostalgia associated with movies. Once I’d fleshed out some of the basics for my style tile I started designing some of the key elements I knew that I’d need for my pages.
Here are some key parts from my style tile:
Design
Homepage Redesign
For the homepage design, it was all about engagement and giving users quick access to the content they’d want the most. So, for the hero section of the page, regardless of what category a user has filtered by, there’s quick access to the trailer (in the “Featured Trailers” section), the movie’s rating, it’s box office sales, it’s popularity, showtimes, and the ability to add the movie to your Watchlist. For the search, I also added in the movie ratings right in the type ahead results, as I know from personal experience that a lot of the time I’m just searching for a movie to see it’s rating anyway. The rest of the page follows in the same fashion. Whether it’s getting into some popular lists, the latest in movie, TV, and celebrity news, or movie trivia – it’s all there to be explored without feeling overwhelmed by your options.
Here’s a look at the homepage:
Single Movie Page Redesign
For the single movie page, as I mentioned above, it was all about organizing content in a logical manner. From basic movie information, to ratings and awards, to image and video galleries – everything is really easy to find. For some of the secondary content (like cast information, reviews, news, and so forth) that’s organized into bite-sized chunks. On the existing IMDB site, the movie pages seem almost endless as all the information is just listed out, making it hard to find the specific information you’re looking for right away. For my redesign, I’ve grouped all of that secondary content in one section that a user can toggle between using some additional sidebar navigation. I also made sure to highlight related movies at the bottom so users interested in a specific type of movie or a director’s work for instance, can find other movies they might be interested in really easily.
Here’s a look at an individual movie page:
This project was worked on solely as a design exercise / personal project and was not completed for IMDB.com
