Client: Tugboat Group
Strategy: Tugboat / Chris Young
Creative Direction: Tugboat / Chris Young
Tugboat Group Website Redesign
Client: Tugboat Group
Art Direction: Tugboat / Chris Young
Design: Tugboat / Chris Young
UX/UI: Chris Young
Work completed while employed as Art Director/Senior Graphic Designer at Tugboat Group.
The Tugboat Group website is entirely re-imagined, replacing an ageing website with all the bells and whistles we would showcase on clients’ websites.
Built on the Drupal platform, the website goes deep on the back-end, including a robust email newsletter that keeps visitors returning to see all the latest projects and news.
A significant 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. These things will happen at a studio that’s too busy with client work to find time for its own needs. The site had been roughed into place by a few junior designers, but I was put on task to take the website to the finish line. The site needed a UX/UI overhaul – particularly in the portfolio and expertise sections. You can see detailed examples of the work as you scroll down.
Reviewing the site statistics from the last couple of years, we understood what people came to the website to see. From examining the statistics, visitors wanted to (a) see the work in the portfolio section and (b) learn more about the company. I made a conscious effort to put our energy into these sections, mainly 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 the more interesting parts of the website design below. If you visit the live website, you will see some discrepancies from what I have here. I’ve chosen to show the site as I originally designed it even though it may be different on the live site because it has been updated as part of its progression.
The website’s homepage 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 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 focus on the area. You can best see that presentation a couple of images down.
According to the analytics, nothing is more important than the portfolio. It’s what everybody judges you on and compares you against your competition– so it better look good. We wanted to make sure that 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 on the categories they want to concentrate on. The showcased work is presented with large imagery to 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 its 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 the 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.
Long-form and 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.
Featured Blog posts have a few features to help make them stand out more than the stripped-down news posts (see also detail close-up below). The long-form posts get a little more polish with a full-width custom hero graphic or video. Keeping the text column at a friendly width really helps with legibility, especially with the longer articles. Minimize outgoing links in the story; rather than have visitors leave the article, links of interest are featured at the end of the story, which keeps 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. Both potential and current clients want to know who’s working on their projects more than ever. This warms them up to the people in those all-too-important face-to-face meetings. A design company is nothing without its staff, and the individual crew pages are customizable so that the employee can share as much or as little as they’d like of their life.
The careers page showcases Tugboat’s convenient studio location and culture as reasons why you’d want to join the Tugboat team. We built a Google map that featured many craft breweries, food trucks, restaurants, and amenities such as MEC that reinforce 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 to establish 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 developers, so I want to be clear that while I’m confident in showing this website in my portfolio as the majority of the UX/UI work shown is mine, there is some design elements and graphics shown in the images above that is not my work. That’s why I’m showing my original design work as much as possible that may no longer be live on the site because it has been updated as part of the website’s progression.
All work copyright Tugboat Group and their respective owners.