Reinventing IMDb Design

The brief : redesigning a mobile App

Timeline : 3 Days

Tools : Figma, Figjam

Team Javier Quiroga and Myself (Célia Boureau)

Ironhack UX / UI Bootcamp asks us to choose an app and reimagined the UI of the app without changing the UX part. As two huge fans of movies and series, it was natural for Javier my teammate, and I, to choose a critic movies/ series app.

In this era when we have so many choices that we don’t know which movie or series we want to watch. But here’s IMDb critic website for helping us to choose and have a great moment in front of the screen. IMDb provides for your trailer, options like adding a movie to a watchlist and also a section about the cast of the movie, actor and their filmography.

- The Brief

Who doesn’t appreciate a good movie? The app IMDb provides you trailer and gives options like adding a movie, actor and filmography

- Cloning IMDb

We first analyze pages from the IMDb app by cloning their atomic design. With this particular step, we notice some inconsistencies :

Old Atomic Design

  • The colors used for some colors buttons don’t match the rest of the aesthetic of the page

  • Many blank spaces instead of some pictures.

  • Typography inconsistencies

  • The navigation bar who’s with just like the rest of the entire page

By cloning those pages we were able to already see and ideate what we wanted to remove or keep in our new atomic design.

For the competitor Analysis we start to ideate with some notes on what was disturbing for us and what was more relevant, but also what we need to think about. We came up with some ideas like :

Good way of presenting the movie’s review; this card is clear and doesn’t take up too much space on the screen. The user can quickly understand what the section is about.

- Market Finding

Probably the most fun part for the two of us was when we just let ourselves dive into the vintage aesthetic cinema. We really wanted to bring people back to their cinema experience memories: the big old celebrity poster, the red cinema armchair, popcorn …

- Moodboard

For the style tile, we redesign the colors because will believed this dark red is immediately related to cinema in people’s minds. We enjoyed ourselves also to create an actor’s chair for the missing picture of actors and a popcorn cup for the missing picture of movies as you can see below.

- Style Tile

- IMDb Redesigned

It was time for us to redesign our app. Our goal here was to make the app clear, fun, and with a cinematographic aesthetic.

- Interactive High-Fi Prototype

Précédent

Holos at Work
Suivant

Ghiott