The Team

Melissa Gabriele:

Primary UI Designer & Back-End Coder

Secondary Front-End Coder

Devin Taylor:

Primary Front-End Coder

Secondary Data Architect

Chelsea James:

Primary Data Architect

Secondary UI Designer

Wynn O’Donnell:

Primary Project Manager

Secondary UX Designer

Ahmed Nassar:

Primary UX Designer

Secondary Back-End Coder &

Assistant Project Manager

The Overview

This project focused on the redesign of IMDb’s mobile application, specifically the home, profile, and informational movie pages. The redesign strives to make IMDB’s interface more straightforward and easy to navigate and interact with. Members of the team took on different roles to design and build a new interface, working together on code, design, and user testing. A design was solidified based on user feedback and expected content that creates a trusted and straight-forward mobile application for this popular and trusted database.

The Context and Challenge

IMDb is a popular online database consisting of information related to films, television, video games, etc. IMDb is well known and trusted, but its application is frustrating and tedious to navigate. This project was chosen by the team out of a total of four options. All the options were prototypes that groups worked on in a previous class. Two of our current members were part of the group that originally redesigned the app and created the previous prototype so we found it best to choose a project that we would have the most knowledge about and wanted to work on.

This project is a team build for the IMDb app. Each member of our team took on a primary role and a secondary role to fully build the prototype that was previously designed. Along the way, we did make some design changes that would enhance the app even more.

Our goal was to fully build out the previously redesigned prototype to get a better feel of how it would work as a mobile app, using HTML, CSS, JavaScript, and PHP.

The Process and Insight

Data Architecture

As the primary Data Architect of the group, I was responsible for all the information that the group needed to successfully execute this project. My primary focus was building a database full of all the information and images needed for the IMDb build.

I initially started with collecting basic information such as movie titles, star ratings, release dates, movie summaries, etc., for over thirty movies. As the project progressed and the coding team built out our alpha and beta, more information was needed such as user reviews, cast members, directors, writers, genres, etc. I also had to find images that would be suitable for the build.  All this information was stored in an excel sheet with column names that were meaningful. I also changed many of the image file names to names that described what the image was, such as, “joker_thumbnail.jpg” which was the basic naming convention for all of the gathered photos.

I worked closely with the coding team to make sure that all the information that is needed can be updated in the database before they implement it into the build. I also worked closely with them to optimize the many images that were needed.

Outside of the IMDb build, I often cleaned up the team’s Microsoft Teams page. Once a week I would make sure every file that was uploaded to Teams had meaningful names as in the correct folders so that it was more organized and team members could easily access any file they wanted.

Final Project

With the help of all our team members, we were able to build a fully responsive web-based app that pulls information from the database we have created.

Check out our final build here: Final Build (resize to mobile device in browser)

The Solution

As the project came to an end, the team solidified one final design based on all the feedback we have received. As a group, we decided on carrying on the black and yellow aesthetic to keep it as close to the IMDb’s logo. Since the app is already so content-heavy, we decided to keep visual assets very simple to allow the users to focus more on the content that they came for. We used the accent color to draw the user’s eye to important content/buttons. We filled the home page with vertical image cards and the profile page with horizontal image cards to avoid too much similarity throughout the application. We focused on expected content vs provided content, flow, aesthetics, and readability for our last round of user tests before our final design.

The Results

Our final build was successful, and we received positive feedback. We took that feedback and tweaked a few elements here and there but overall kept the same feel of the app, resulting in a very successful project. Every new aspect the team came up with was implemented smoothly and the feedback from tested users proves that every goal was met.