The Concept
This was a 2-person group project with the goal of creating a web application that seamlessly incorporated multimedia through a range of connected movie clips, phones and phone companies. To that end we developed a web app that could do just that, navigating through phones shown in movies and the movies seamlessly. Additionally we also added a video player plus a pop-out mini-player, the ability to go through the movie timeline for the wanted clip, and have subtitles synched to the clips. Since it was just an example, it incorporates only a few phones and movies to serve as an example and is in no way a full movie phone database. This was created as part of the Master's Degree Multimedia course.
Inspiration
We took inspiration from already existing databases such as the IMCDB (Internet Movie Cars Database) and the IMFDB (Internet Movie Firearms Database), but decided to give it a more modern look and feel. For the timelines themselves we took inspiration from SoundCloud's media player.
Design Goals
The practical goal was to give the user a choice on the videos playing, sync video elements with other features, allow for extra information while remaining in the same video/movie/phone, all while following Nielsen's heuristics for design.
Implementation
The app was created using Node.js, featuring free flowing navigation between phones, a media player showcasing their use in movies (allowing for subtitles) and vice versa. The clips themselves were just direct snippets found on youtube and not actual video files in order to simply showcase the website and not infringe on any copyrighted material. Near the end we also decided to add some extra touches such as adding information about the movie studios, and their locations on a map (we used React for it) which were clickable with information on the phones and the studios denoted by different colors on the map (by using event listeners), which were also integrated into the other pages (in a smaller form) to not make it jarring and keep the flow of the website seamless.
Availability
The web app is currently available, although some libraries used no longer work and have not been updated in the live site. The parts still working can still be accessed here (the map and the video subtitles no longer seem to work). The git repository here is private at the moment.
For a showcase video look here:
For an early design comp look here. This can still be accessed in the following link: IMPDb Mock Interface. Additionally, a full detailed report was created in Portuguese detailing the website's creation. It is not currently public, but if you want to access it simply contact me.
Conclusion
This app gave me some more experience with Node.js (which I'd previously only used in a Bachelor's Degree project), and allowed me to better understand how to design and develop a web page concept that allows for seamless navigation throughout. In typical fashion I also tried to keep part of the concept tied to my love of entertainment, and in this case, cinema.