FilmPro is a movie streaming service who’s goal is to make high quality movies available outside of the theater or film festivals. On the website, producers can upload their projects and set their own ticket prices, and audiences can watch and download high-definition films at home or on their favorite movie device.
Fewer than 800 motion pictures are released to movie theaters every year. Given the thousands of pictures submitted to film festivals, not to mention the tens of thousands that don’t make the festival cut, there is a huge underserved market of filmmakers who want to distribute their projects but have few options available to them.
iTunes has a lengthy and expensive approval process, and rarely clears independent projects. Netflix purchases some projects, but their algorithm often creates a higher approval bar than iTunes. And YouTube allows for monetization only after the channel has gained thousands of followers and hundreds of watch hours.
FilmPro is the solution for independent filmmakers to distribute and monetize their projects their way. Producers can set their own ticket price and distribution areas, get feedback from viewers and supporters, and control whether their film is downloadable.
My challenge was to design a service that could visually compete with iTunes and YouTube and have an intuitive interface that draws users to discover and support independent films.
The branding was just as important to get right on this project as the UI. The logo had to convey “films” and “streaming” or “downloading” at first glance to get noticed in the crowded app market. I played with the play button inside the “O” before noticing the “F” and “P” could fit together nicely as a mark. After several revisions, I settled on the version with the best “FP” mark that would look nice in any app market.
The Wireframes and Functional Specifications document were developed as a collaboration tool between me as a designer and the development team building the backend to ensure we were on the same page with the UX.
Producers and Members are two of the five user cases I created to establish the user flow. Since the service was primarily designed for these two user types, I refined these flows to reduce the number of clicks to an action. Producers need to quickly upload their projects and acquire an embed code, while Members need to quickly select and view videos.
When your content is colorful film still shots and vibrant movie posters, the UI should fall into the background. The two services that I used as a visual comparison were iTunes and YouTube. iTunes had excellent project pages and an intuitive video player, while YouTube had a more user friendly upload process and a more robust search function. I wanted to incorporate the best from both services and make sure the content led the design in every aspect.
The first two versions of the UI were on white and grey backgrounds. During testing, users noted that the white was distracting while watching video. I also experimented with including and not including pricing on the home page. Users reported that they assumed the videos were free if the price was not listed, but the different prices were confusing for some. Finally, nearly every user tested preferred the large movie poster thumbnails to the smaller images with more information.
In the final version, I used a white header to visually separate the Search function and reinforce the branding along with a black background to make the videos easier to watch. I made the menu bar thinner to bring more of the content above the fold. I combined the price into the Watch Film button to eliminate the confusion over pricing. And I used larger thumbnails with rollover details to make the homepage more visually appealing.
In order to maintain visual integrity, I included pixel-perfect layout notes in each page mockup.
The FilmPro video player on iPad.