FilmPro

January – July 2014

Brand Strategy / Visual Design / UX

Project Vision

FilmPro is a movie streaming service whose goal is to make high-quality independent 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.

Challenge

A service that allows users to easily upload movie files and can visually compete with Netflix, iTunes and YouTube with an intuitive interface that draws users to discover and support independent films.

Solution

FilmPro allows 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.

Why FilmPro?

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 under-served 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.

User Cases

I conducted both remote and in-person interviews and created empathy maps to understand the needs of the users I’m designing for. The primary user group was independent producers who wanted to post their films for sale. A secondary user group identified was members who want to watch independent films. 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.

Steve Film Producer, 43 Steve is an independent filmmaker who just completed a new film. He wants his passion project to be seen by the world, but he doesn’t want to show it for free on YouTube and he doesn’t have the budget to get approval by iTunes.

Tina Office Assistant, 26 Tina is a young wife and movie fan that works in an office. She loves independent films and would enjoy watching them on her lunch break, but she doesn’t know where to find them.

Pain Points

Competitive Audit

	Netflix	iTunes	YouTube
Upload on demand	○	○	●
Custom pricing	○	○	○
Independent films	○	○	●
Instant monetization	●	●	○

Design Approach

When your content is colorful film still shots and vibrant movie posters, the visual design of the app 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.

Ideation

I had a pretty good idea of how I wanted FilmPro to flow after the initial meeting with the developers on their capabilities. I built some quick wireframes in Illustrator and refined them into a Functional Specifications document that I created so the owners, the development team, and I would all be on the same page.

Digital wireframes

Usability Study Findings 

I conducted two rounds of usability studies with a small group of film producers and movie fans. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

Round 1

• Users thought light background was distracting
• Users think videos are free if price not listed
• Users said the upload process is awkward

Round 2

• Users prefer larger movie poster thumbnails

Brand Guidelines

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. 

Design Handoff

Good designer-developer communication and collaboration is key to a successful handoff and deployment. The developers on this project worked best with image references, and since I needed pixel-perfect layouts without feedback loops I created overlay mockups.

Solution

Watch films instantly anywhere

HTML5 video player allows users to watch films on their computer, mobile device, or any peripheral that has a browser.

Quick and easy uploading 

Streamlined browser uploading allows users to post HD videos up to 4GB.

Distribute your film on your terms

Users can set pricing, see viewer statistics, and even host live premiere screenings.

Customized film recommendations

Users who may be unfamiliar with independent filmmakers can get recommendations based on their viewing preferences.

---

Takeaways

As an avid movie fan, I really enjoyed working on FilmPro. It was a big project and as the lead designer I interfaced with executives, developers, users, and other stakeholders directly. Looking back on this project, I’m glad that today we have better prototyping tools to handoff assets to developers more efficiently. I can’t say that I miss the days of Photoshopping pixel measurements, but it did teach me to be more precise when designing high-fi mockups. And working with bright executives showed me how ambitious business objectives can push technology forward.