Workshop Film Company is a production company in Vancouver. For six years, they've made commercials, brand films and branded docs for brands and agencies like G-Shock, Moderna and Western Union.

Their homepage lists the values they work by: proactive communication, honest collaboration, making it fun. Turns out that's exactly how they work with partners too.

How it started

Workshop had a new brand and a website that no longer kept up with it, or with the work. The team talked to five studios and freelancers before choosing us.

When we asked why, the answer was simple: they felt safe and understood.

The goal was to show six years of work under the new brand, without the brand getting in the way of the films.

Tcharles, our creative director, led the visual direction from start to finish.

Working across two countries

Our team works from Brazil, Workshop's works from Vancouver, four hours apart.

So we made it a rule to act on every request the moment it came in, and the time difference never slowed a delivery. The references came in English, full of film-industry shorthand, and a big part of the job was understanding what the team meant, beyond what they wrote.

Everything happened in Figma. The Workshop team dropped references straight into the file, and three to four rounds later the design was ready to build.

Feedback came straight and fast, the best kind there is, and every round brought the site closer to how the Workshop team sees themselves.

Four decisions shaped how this website came together. Here's the thinking behind each one.

The easy part that wasn't

Workshop came to us with a full brand guide: colors, type and graphics, all decided. That sounds like the easy version of a project. The real work was deciding where the brand should step back.

On a production company's website, a page full of buttons competes with the films. So we turned the buttons into stickers that only show up when you hover over something you can click. On mobile, where there's no hover, they sit fixed in just a few places, like the work section on the home and the calls to action.

In 8 weeks, a site that carries 6 years of work.

The video that loads before you hover

A video player sounds simple, and it is. The interesting part is the logic behind it.

Embedded players, especially Vimeo, only start downloading a film once someone presses play, so a hover preview would always arrive late.

Our player runs files, YouTube and Vimeo alike and starts loading each preview a few pixels before it reaches the screen. By the time the cursor gets there, the film is ready.

The carousel that leads backstage

The last section of the home opens the door to Workshop's behind-the-scenes gallery, so we gave it a giant carousel of set photos rolling past. It's one of the Workshop team's favorite parts of the whole website.

The CMS behind the credits

Film credits. Every film has a full crew list, split by department, and the Workshop team needed to publish new ones without calling us. We modeled every credit as a role and a name, department by department, so a film goes up complete the week it wraps. Nobody will ever notice it, and that's exactly the point.

What stayed with us

The Figma stage was where it clicked for both sides. It's where the Workshop team saw their vision on screen for the first time, and from there the project moved fast.

It also changed us a little. A few decisions on this site, like leaving more white space and letting the copy stay short, are already shaping how we think about Apta's own brand.

A full brand guide, a crew with strong references and a lot of Figma comments, turned into a website the Workshop team now updates on their own.

If your website no longer keeps up with your work, let's talk.