FilmReel Intro v2.jpg

FILMREEL

How do you create a resource for people who want to watch and bookmark films with their friends?

FilmReel is a concept mobile app that helps users find and watch the best movies and TV shows with friends. The platform syncs with personal streaming accounts and online databases to provide a single place where you can compare show history with friends and find out where to watch them online.

Role: Product Design, UX Research, Wireframing, Prototyping, UX Design, Visual Design

 

 

 

 

 

 

 

 

Research & Site Map

  • Interviewed potential users to understand what people currently do when they want to watch something online. Doing preliminary research can help test the waters to see if the imagined problem exists, and in what ways.
  • Conducted competitive research and discovered Legit app, which aims to be a social watchlist for TV and movies across services. Due to Legit’s robust information architecture, I used its app infrastructure as the base design for FilmReel and focused on pushing the design further.
  • Created user flow map to flush out product features. Doing this chronologically (as a user would) forces the business to take a look at user needs, and present offerings in a way that makes sense.

Wireframes

  • Created low fidelity wireframes, focusing on user flow and organization of information. When more than one solution was present, I created multiple ways to display information and worked with other designers on narrow down options.

Watch with a Friend.png

Prototyping & User testing

  • Created high fidelity mockups using Sketch. I identified the benefit of displaying ratings and reviews from other trustworthy sources (in addition to a FilmReel rating). This allowed me to use real content for prototypes.

  • Built out a working prototype in Marvel to demonstrate app interactions. I focused on balancing the breadth and depth of the prototype by building a few tasks fully, and leaving the rest for display.

  • Conducted user testing via Lookback to see how users accomplished basic actions (i.e., search for a film, bookmark a film, invite a friend to watch). Testing showed me which aspects of my design made sense to users, and which were less intuitive. For example, users wanted to access the ‘Watch with a Friend’ function from Movie pages, where it was previously unavailable.

Visual Design

  • Developed a bold and modern visual identity. To pay homage to the history and art of film, I used grainy black and white photography, and golden yellow as an accent color. Sans-serif “block” typography was used to emphasize film titles, names, and app features.

 

takeaways

  • Don’t reinvent the wheel. In the beginning, I felt a lot of guilt about borrowing Legit's design, but I found myself referencing their application often because I thought it was legitimately strong. Rather than spending time on fighting my opinion, I opted to use and tweak Legit's design to save time and explore the interesting functionalities that didn't exist. I respect the design decisions that were put into this product, and wanted to spend energy inventing something new and critiquing what came before me.

  • Put it where you’d expect it. I was surprised to see one of my research interviewees having difficulty locating a certain button, but learned a lot when she said where she expected it to be. Similar to putting often-lost items in the first place you look for them, I quickly made the adjustment to my prototype and included more than one access point. Looking back, this is one of my favorite design decisions because it allows for experiences to be repeated more than once, from different starting points.