Select Page

Habethy Film Productions

  1. Overview
The Client

Habethy Film Productions

The Project:

Design a website for the web series “The Quiet Canadians”

This project was completed while I was in school at BCIT as part of the Human Interface class. I had been put in touch with Anthony and Helena, the husband/wife team of directors at Habethy by Warren Thompson, author of the Quiet Canadians book. I had previously worked with them on logo design and motion graphics for their movie intros, and this project was a great intro to UX research and wireframing.

Role: Web/UX Designer

  1. Research

Research Goals:

  1. Determine what is most important for users of the Quiet Canadians website; who is going there? why? what information are they looking for?
  2. Analize high budget movie websites and learn what makes them interesting or pleasing to the user
  3. Create a site that is primarily visual in nature, there won’t be much content for a while since the show is still in start-up mode


Researching current movie websites was very eye opening for me. Movie websites don’t operate like business websites – they tend to be more visual and creative, with ‘unorthodox’ navigation. At the time of this project I found that most movie websites fit to the screen size, with little to no scrolling. Given that my project wasn’t a completed movie, we would have large gaps of information so the content would need to be mostly visual, with lots of areas for production photographs.


Website users: who are they?

Industry contacts and people interested in the Quiet Canadians webseries, likely would have found the website through social media or StoryHive


Why are they here? 

To learn more about the upcoming web series, follow along with the production journey, connect with local film producers


What are they looking for?

Information on the casting, author, producers, and story. Release date, teaser videos.

  1. Design

Based on client information, I created a site map which laid out the structure and organization of the content on the site.

Low-Fidelity Wireframes

I began the process of wireframing with sketches of variations of the website landing page. The sketch I chose served as a guide for my digital wireframes.

Mid-Fidelity Wireframes

I created a quick medium-fidelity prototype of the homepage in Balsamiq, which I then took into InDesign to polish.

The client would be creating the finished product in WordPress by themselves, so we went through some revisions to simplify it. The final mockups were presented to the client so that they could start development and update the content as the project went on.



After some revisions to the wireframes to simplify things based on the research of other film websites, I fleshed out the mockups with colours associated with Canada and the branding of the book, in a dark theme that fit the “espionage” category.