IMDb - App Redesign
Context: Ironhack UX/UI Bootcamp
Timeline: 4 days
Team: Célia Boureau, Javier Quiroga
Tools: Figma, Figjam
brief
For our third project for the Ironhack UX/UI Bootcamp, the goal is to take an existing native app and redesign it. This is not about UX, this is all about visual design, the UI part of our course.
This time around I team up with my fellow film nerd Célia.
We choose IMDb, a film database that collects all the information there is about show business, with every single TV show, and every person that worked on it.
analysis
We start our journey by analysing the current design. The IMDb app is vast and contains lots of data, with loooong pages full of information, so we decide to focus on three screens that create a path: A film page, then the page where it shows the whole cast of the film, and finally, an actor page.
cloning imdb
To best get an idea of what the current design is all about, we create clones of the existing screens. This way, we get a better look at the usage of colour, typography, and other design trends.
We quickly spot inconsistencies. The general aspect of the app is very flat and sharp. There are no shadows or gradients, therefore no volume, and only lightly rounded corners on buttons. Film posters, actor photos, and thumbnails have sharp edges.
This doesn’t add up when we find a couple of instances where film posters and critic reviews are put into cards and given rounded borders and a shadow. On top of that, we notice that the margin between the section’s titles and its contents varies wildly throughout the pages.
competitor analysis
We have a look at what the competitors are doing by analysing three sites and apps: Allociné, CGR, and SensCritique. They are all about film, but the one true competition for IMDb is Allociné, which also has a similar structure.
We believe that SensCritique’s black and white design is too minimal and cold. While we like CGR’s colours, we don’t think they have combined them correctly. Some of their texts are not very legible and they wouldn’t pass an accessibility test.
Allociné is the most professional one, but we find that the excessive roundness of every corner makes the design look almost childish, and putting the pictures of the actors into circles results in sometimes missing half of their faces. This might make sense for an app like theirs, but IMDb is an app used by both film lovers and industry professionals.
ideation
It is now that we define the direction we want to take with our redesign. We want to give IMDb a friendlier look while staying professional and information-centred.
We create a mood board with images inspired by the essence of cinema, with some cut-outs of articles and film press, as well as an Amazon logo (who purchased IMDb in 1998).
From the mood board, we extract our colour palette.
We choose red as our main colour. It is the colour of a red carpet and the colour of a classic cinema seat. We pick two different tones to create volume. We pick blue as an accent colour. It is its complementary, and it also represents Amazon. Additionally, we choose lighter and darker shades of the same red to use as neutrals.
When choosing our typography, we go for Lato. It is very legible, both in letters and numbers, and we find it friendlier and more approachable than the current Roboto.
We decide to go for a more material-design approach, with light shadows and more volume all around.
the result
We redesign the header and navbar with a light red gradient that reminds us of the edges of a cinema seat.
We replace the yellow stripe that identifies the start of each section with a red stroke on top. This way, when users scroll the long pages, their eye quickly catches each of the sections.
We put most elements into cards with lightly round borders and slight shadows. This makes the content more swipeable and clickable.
We put everything together and then we have some fun.
We design more fun placeholders for films and crew members. And we think of micro-interactions that we could animate to make the experience of browsing this app a little more fun.
I hope you enjoy our redesign as much as we liked working on it. Thank you for reading me, and feel free to leave a comment. See you at the movies!