Rob Huddleston

Educator

Project Details

Design for Usability

In most cases, the site will need to be accessed via a mobile device, as most data entry will be done in the theater waiting for the movie to start. So, I took a mobile-first approach to the project, designing for the small screen and touch.

Using Adobe XD, I build and refined a prototype, which I shared with several trusted collegues for feedback, which lead to several further revisions. While several design decisions still needed to be made—the logo and some of the type decisions—I decided I had enough to start coding.

What's Next

The primary focus on the next phase of work is in designing the data dashboard. I have a lot of data points I want to display: number of movies seen per year and month, but also the number of visits to a particular theater, the average rating per month, and more. Designing the charts and graphs that will display this information in an easy-to-read format will take some time but be worth it in the end.

API Functionality

I wanted the main screen of the site to provide a quick, highly visual overview of the movies seen in a particular year, and a grid of posters seemed the obvious choice. However, the posters had to be there automatically, since downloading, editing, and uploading posters manually was impractical from a mobile device.

The Movie Database is a site that provides a host of APIs, including a poster search. Some experimention lead me to solving how to get the site to query the API, pull the poster, and then insert the URL for the poster into my database.

In order for the poster search to work, however, the movie title had to exactly match the entry in TMDB. Even a slight variance would cause it to fail. So the next issue was solving that problem, and again, an API to the rescue: using an AJAX call, I can autocomplete the title from TMDB's own data, thus ensuring a perfect title match.