Shift is a new commercial and film editing agency. I was approached by the founder as he was leaving his old agency and going solo. He had a colourful portfolio of work and a logo he loved, but only had a temporary website that he had attempted to build himself. He knew he needed a professional and functioning website to attract new clients to his fledgling agency.
This was a solo freelance project where I both designed and developed the website. I worked closely with the client to further develop the branding for the agency and come up with a vision for the site.
First steps
I started with a competitor analysis. Looking through the websites of other film editors, I picked out what worked, what didn’t, and compiled a list of where the client's website could do better. I was surprised by how difficult it was to watch videos on some competitors’ websites, so this was an obvious area I could improve. I then came up with a plan for the website itself. As someone with little free time, my client needed the website to be quick and easy to update with new work.
Guiding principles
- Show, don’t tell. Clients want to see the videos, not read your life story.
- Desktop first. As this is a business-to-business industry, clients are looking for editors on their laptops (but mobile is still important).
- Down the rabbit hole. Make it as easy as possible for prospective clients to watch video after video after video.
- Make it quick and easy. So a time-starved video editor can update the website.
- Plan for growth. In time, Shift will have more videos and more editors. We will need a way to further organise the work on the site.
The design
Starting with just a logo, I began by building out a fully-formed brand identity to use on the site. Much like the commercials the website would showcase, the site needed to be slick and professional - yet not take itself too seriously.
First, I needed to decide how best to display additional information about each video on hover. After working on a few iterations, I showed a selection of these to a small focus group and the client. Using this feedback, I settled on a layout that highlighted the centre of the image as this is the central focal point of most of the stills.
I then commissioned a set of icons based on the logo. These play an integral role in unifying the design. While the website itself is fairly minimal, the icons - in conjunction with the logo - add a playful element that embodies the personality of the agency and the comedic commercials they edit.
The development
The site was built on WordPress using Oxygen Builder for ease and speed of development. WordPress also gives the flexibility to organise the videos and the option to easily add "blog" functionality in the future.
I created a custom post type to store the videos, along with a set of custom fields to hold each of the data points needed. This gave the client a simple list of fields he needed to fill out to populate the site.
There is automated image compression on every upload that allows the client to simply export a captivating still from the video and upload it. The website handles the resizing and optimisation.
I used a fullscreen video player that puts the commercial front and centre with supporting details below. Once a video ends, the next one starts playing so users can lose themselves watching video after video.
The result
The client instantly fell in love with his new website and, after a quick handover, he was able to populate the portfolio quickly. As of February 2022, the website has been live for just under a year and the client relies on it to showcase his work and promote his agency. He has fed back how valuable it is to have stand-out portfolio site.
Learnings
This project was one of the few times I have worked with a client who didn't have an existing brand identity in place. It was an opportunity to learn how to develop a new and compelling brand from a logo and build a website with a strong visual identity based on my own concepts.
