Watchbox

Movie app for macOS

Watchbox is a simple, all-in-one movie application for Mac OS. An ongoing passion project, the product is intended to make watching and browsing movies on a computer a user-friendly experience.

Recognizing the Problem

There were two main issues I'd constantly have when browsing and watching movies. The first was that all my digitally downloaded movies weren't accessible or viewable from a single location, and multiple apps, websites, and players were needed just to own them. The second, was that information, ratings, and reviews were separate from the movies. I didn't understand why browsing and watching movies needed to be so arbitrary, so I tasked myself with creating a solution through an all-in-one movie application.

Multiple services with convoluted interfaces needed to experience a single movie.

App and Website Research

The research for this project was realtively straightforward and more fun than I care to admit. I browsed, studied, and watched many movies on various websites and apps, and took note of the experience and interface of each product. After all, I am a target user so I used these apps and websites in a true sense to gain more knowledge of what works, and what doesn't.

I also conducted interviews, and surveys to learn about what other users like and don't like about their own movie watching experiences. All of the research and feedback came to be extremely valuable in determining the true use of this product.

Goals and Requirements

The big takeaway from my research was that in addition to wanting a simple, all-in-one experience, users want movie watching to be tailored directly to them. For instance, when browsing titles, they would only like to see the types of movies they know they would enjoy. This product was already on the right track as it solely contains movies the user already owns. However, that doesn't entirely solve the issue. I own plenty of movies I don't like. It was this that made me realize the product should give the user complete control over categorization.

After establishing what users want and what the goal of this app should be, the three main product requirements were:

  1. Necessary content - show only what average movie watchers need to see.
  2. User-friendly - offer a simple, easy-to-navigate interface and experience.
  3. Complete control - let the user drive content organization.

User Flow and Wireframes

The user flow for this product follows the traditional movie browsing narrative. Once a user signs into their account, they are brought to a grid layout of recently added movies. They can then explore there, or toggle the page by navigating to a different browse page. The default browse pages are recently added, all titles, favorites, and watch later. The custom, user-created browse pages are called 'boxes'. The user will have the ability to create their own box, and add titles specific to their custom category. For instance, a user may create a box called "Space Movies" where they can organize all their movies that take place in outer space. From a browse screen the user will have the option to sort and filter titles using various values.

The next stage in the flow is a title screen. When the user clicks on a movie, they'll be brought to a screen specific to that title featuring the synopsis, top-billed cast, rating, and other general information. They can then view the full cast or crew, play the trailer, play the full movie, or further explore by navigating to another category screen.

The user flowchart and symbol reference key.
Low-fidelity wireframe sketches for each page.
High-fidelity wireframe of the browse page.

The Final Design

The user interface features a dark theme and a single accent color to keep things simple. Purple was the color of choice as red and gold are played out for movie apps and websites, and other colors didn't really speak to cinema culture. I wanted the product to feel like an all-in-one movie experience, as well as function like one.

The login screen and start of the user flow.
The interface design for browse pages.
The interface design for title pages.
The interface design for a paused player state.

Establishing the Identity

It took me some time to brainstorm a name suitable for the product, but I knew I wanted it to be one word encapsulating exactly what the product was. I used the all-in-one concept (box), along with the main user-action in the app (watch) and landed on Watchbox.

To match the overall product experience, I wanted to create a simple logo using the same purple used in the interface design. I also wanted it to double as the dock icon. I designed both a primary and alternate for different use cases.

From left to right, the primary and alternate logos and app icons for Watchbox.
Prev Next