The Tugboat Group website is a fully re-imagined website, replacing an aging website with one that has all the bells and whistles we would showcase on client’s websites. Built on the Drupal platform, the website goes deep on the back-end, including a robust email newsletter that keeps visitors coming back to see all the latest projects and news.
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.
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.
About us page
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.
Expertise page and detailed web design & development expertise page
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
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.
Staff pages – overview and individual staff pages
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.
UI design and detailed graphics
DISCLOSURE | I was tasked with finishing the design of the Tugboat website after a few rough starts. I was involved at the very beginning of this job with a web designer who laid some of the original groundwork, working closely with him establishing the goals of the new website. He developed a rough framework that formed the base of the site, and a lot of that framework is in place today, albeit more refined. A couple of other junior web designers took stabs at the design, with almost none of that work moving onto the final site. After the site sitting stagnant for several months, I took on the challenge to carry the website through to the finish line.
At Tugboat, the design department works closely with each other, and with the web development team, so I want to be clear that while I’m confident in showing this website in my portfolio as the majority of the work is mine, there is some design and graphics shown in the screen captures above that is not my work. That’s another reason why I’m showing my original design work as much as possible that might not be live on the site because it may have lost out to other concepts in A/B split testing, or just been updated as part of the website’s progression.
All work copyright Tugboat Group and their respective owners.