Heather Finn

Movie Night

Movie Night was born from a desire to learn more about developing in Ruby on Rails while solving a real world problem.

Movie Night homepage

My family loves movies of all kinds. Long before streaming services, we had accumulated a large DVD collection of our favorites, along with entire series of TV shows. Hundreds of DVDs turns out to be a challenge to organize and while we devised a way to cut down on the space using binders sorted by genre, we had to remember where we had placed a particular movie in order to watch it.

This presented a great opportunity to use the power of a database to help us not only find a DVD when we want to watch a movie but also help us rediscover movies we had not watched in a long time and prune our collection based on data around our personal ratings and usage.

My Contribution

As a personal project where I’m one of the primary users, I focused solely on design and development.

Design

I defined a design system and templates that met our needs. I also broke the project down into individual features that made up a Minimum Viable Product that we could start using right away, with plans for incorporating more advanced features later.

Development

With the primary goal of this project centered around learning Ruby on Rails, I focused on harnessing as much of the server-side functionality as possible, limiting the amount of JavaScript used in the initial version.

Setting a Vision

I needed a solution to solve our immediate problem of organization and I wanted to set us up to use the technology to learn something about our viewing habits as well.

Simple

View of filter menu, showing rating, runtime, last watched, and language

Easy access right into the content, with a variety of ways to filter the content depending on our mood.

Fun

View of 'Adventure' category of videos, featuring large movie posters for browsing visually

The browsing and data entry experiences needed to be a joy to use so it would become our go-to when deciding what to watch.

Personal

View of movie data entry where we enter our personal rating

We have opinions about these movies and wanted the app to reflect our thoughts rather than pulling it from an online service.

Evolving

Trello board showing backlog of ideas

I have lots of ideas on how to expand this app to meet new needs and enhance the experience through sounds animation, and data.

Crafting the Structure

Like most families, we have a variety of devices ranging from phones to desktop computers. It was important to us to be able to easily access our library of movies from any of these devices and have consistent experiences.

Our needs for the content was pretty simple: One template for listings and another for the details of a particular movie. For managing our content, we needed a way to enter movies and genres efficiently.

Wireframe of video listings

Creating a Design System

Movie posters play a central role in the design as they make it easy to identify themes, actors, and more. Because of the wide variety in colors and styles, the design needed to be based in neutral colors. I often think of going to the theater, with lights dimmed and the red curtains drawn and decided to reflect that in this design.

The system provides light and dark versions of many elements in order to accommodate the different backgrounds used depending on context.

Example of one of the personas created for this project, featuring a family of travelers

Example of pages from user research report

Building the Site

CSS

Sample CSS for the movie night site

I built a system of grid, elements, and components with CSS. Beause CSS can perform much better for animation than JavaScript, I leveraged it whenever an effect was needed.

JavaScript

Sample JavaScript for the movie night site

JavaScript was limited to simple click handlers for menus in this version. As I incorporate other features, I may explore using libraries and frameworks if there are clear benefits.

Ruby on Rails

Sample Rails model

Most of the functionality and views are driven by Ruby on Rails. I focused on understanding how the different parts work together to create an app.

Completing the Design

The first version of the library perfectly met our core needs and leaves plenty of room for growth and enhancement.