A major upgrade to a website with lofty goals is no easy task, and this one was no different. The website had been through many iterations of concepts, but kept getting pushed to the back-burner, as these things will at a studio that’s too busy with client work to find time for it’s own needs. The site had been roughed into place by a few junior designers, but I was put to task to take the website to the finish line.

Reviewing the site statistics from the last couple of years, we were able to understand what people came to the website to see. It was clear from reviewing the statistics that visitors wanted to (a) see the work in the portfolio section, and (b) learn more about the company. A conscious effort was made to put our energy into these sections, particularly to showcase the portfolio success stories. Tugboat is a full-service agency, so the work goes beyond just the creative department. With a fully integrated brand development, strategic marketing and in-house Drupal web development team, there’s a lot of different work to highlight across the years.

I’ve broken down some of the more interesting parts of the website design in the sections below. If you visit the live website, you may see some discrepancies from what I have here; I’ve chosen to show the site as I originally designed it. As websites are living and breathing entities, the site may have changed, or lost out to A/B split testing post-launch.

Creative Direction/Design: Tugboat Group
Art Direction/Design: Chris Young

 

The front page of the website features a curated showcase of all the latest design work, case studies, featured blog posts, news stories, social media feeds and a billboard area right at the top for showcasing the very latest news or projects. The billboard area can be completely customized to be an interactive video portal that expands down (from the slim header area) to a sizable presentation, greying out the rest of the site to bringing focus to the area. You can best see that presentation a couple images down.

 

Nothing is more important than the work in the portfolio; according to the analytics, that’s what almost every visitor is looking to see. It’s what everybody is judging you on, and comparing you against your competition — so it better look good. One of the things we wanted to do was make sure than the work would be presented so that users could customize what they want to see; what’s most relevant to them. Looking at different website user demographics, potential new clients won’t want to view the same projects as a job-seeking web developer that clicked through from a job posting. The portfolio page loads with a complete overview of all the different work, and then can focus in on the categories they want to concentrate on. The showcased work is presented with large imagery so that you can really see everything.

 

The about us page keeps things simple with bold typography and customized illustrations with a simple explanation about Tugboat and it’s approach; well, it’s approach-less approach. A quick mention of the Crew (staff) page and the Expertise pages are linked to take you deeper into Tugboat way of doing things.

 

The Expertise section briefly covers Tugboat’s core competencies, with links to ‘learn more’ for less experienced users so they can see a more detailed explanation of the process and what to expect working with Tugboat. The Expertise page showcases relevant projects and blog/news posts that best highlight those particular competencies, which help establish Tugboat Group as experts in the field.

 

Featured Blog posts have a few elements to help make them stand out from a stripped down ‘news post’. Longform posts get more polish with a full-width custom hero graphic or video and pullout quotes and additional relevant imagery through the post. Keeping the text column at a friendly width really helps with legibility, especially with the longer articles. Outgoing links are kept to a minimum in these posts, instead referencing them a the end of the article under a “Mentioned in this Article” area at the end; keeping users from bouncing in the middle of the article.

 

A conscious effort was put into the staff pages because this area was quite weak in the previous version of the website. More than ever, both potential and current clients want to know who’s working on their projects. This warms them up to the people that will be in those all-too-important face-to-face meetings. A design company is nothing without it’s staff, and the individual crew pages are completely customizable so that the employee can share as much, or as little as they’d like of their life outside of the office.

 

The careers page showcases Tugboat’s convenient studio location and culture as reason’s why you’d want to join the Tugboat team. We built a Google map that featured many of the craft breweries, food trucks, restaurants and amenities such as MEC that reinforces this neighbourhood as a stronghold for creatives.