Tugboat Group Website Redesign

PROJECT DETAILS

Client: Tugboat Group
Strategy: Tugboat / Chris Young
Creative Direction: Tugboat / Chris Young

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 Homepage

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.

tugboat-website-01-front-page-all-hg — Tugboat Group front page features an interactive video portal in the header, the latest portfolio work, featured blog posts, news, newsletter sign-up form, and the footer features Tweets (with room for other social media channels).

The interactive video portal on the front page shows some of the latest work done in video format. (top left) The featured video expands from the slim header area, bouncing slightly to let the user know to click to view. (top middle) Once toggled, the header expands, becoming a billboard taking over the screen to put all the videos front and centre. (top right and bottom) Bringing focus to the video portal, it greys out the rest of the website (just like when toggling the navigation hamburger) to bring clear focus to the video presentation.

tugboat-website-01-front-page-footer-detail-hg — The footer includes a full-width newsletter sign-up form because it was deemed the most important call-to-action site. The latest news, tweets and contact info, association links and repeat of the social channel icons finish it off.

Portfolio pages

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.

tugboat-website-02-portfolio-page-overview-hg — **Overview of the Portfolio page** displays all the featured work in a masonry layout at once. As the user rolls over/taps a project, a brief description flies out of the header area with a nice javascript bounce action. Users can drill down what kind of work they’d like to see, such as packaging or collateral.

tugboat-website-02-portfolio-page-collateral-hg — **Portfolio navigation shows indicators** when users drill down to focus on a particular discipline. We’ve chosen to look at only the collateral section, marked with the dot indicators to reinforce what you’ve chosen.

tugboat-website-02-portfolio-page-rollover-details-hg — Javascript rollover effect on the portfolio and sidebar items.

tugboat-website-02-portfolio-page-details-hg — **Portfolio page details**; clicking on the images scales them up to the full width of the centre column (floating on top of the text description), so you can see the portfolio pieces in a high-quality view. Users can view all the projects for just that client, by discipline or by Industry. Related work follows so users can see more current projects; all are customizable on the back-end.

tugboat-website-02-portfolio-page-large-photo-hg — Clicking on the portfolio images makes them fill the page to see the details in the work.

tugboat-website-02-portfolio-page-more-graphics-hg — When it comes to the portfolio pages presentation, projects deserving of showcasing pieces in-depth, we can get as in-depth as we’d like. For instance, on the Windset Grade Standards Guide, we feature many pages to encompass the project’s scope, including additional components that were shipped in the guide’s pocket; this tomato meter showcases just how relevant the grade standards guide is in the hands of a produce purchaser.

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.

tugboat-website-03-about-page-hg — **About Us page** graphically showcases some of the web design prowess while getting the message out. We push the typography to a higher level to showcase what clients could do themselves when they don’t buy the cheapest website template off the shelf. Lower down on the page, the **years of experience** are added up using the live information on the individual staff pages. If you were to ‘unpublish’ a staff member’s page who had 20 years of experience, that orange number you see there would immediately be reduced from 226 years to 206 years of experience.

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.

tugboat-website-04-expertise-pages-x2-grey-hg — The **expertise page** on the left is a broad overview of the collective skills and a more detailed Web Design & Development Expertise page on the right. Each of the main expertise pages had this same treatment.

tugboat-website-04-expertise-creative-design-detail-hg — **Detail of the Creative & Design section of Expertise page**; features an overview description and links to both relevant portfolio projects and blog/news posts associated with the Creative & Design discipline. The ‘learn more’ button takes you to a page that goes much deeper in knowledge for this discipline – intended for a potential client that isn’t as well versed in our line of work.

On the more detailed Expertise pages, we walk the less experienced user through the Tugboat process in detail, bringing light to some of the subtleties that they could expect.

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.

tugboat-website-05-featured-blog-post-info-top-detail-hg — **Full-width hero graphic or video;** Longform posts get a little more polish put into them than a basic news update, for instance, a custom hero graphic or a full-size video.
**Share like crazy;** The sharing buttons are positioned to be where people will use them. Not at the top (where the user just blew by), and not buried at the bottom where some people never get to.
**Always lots of original content to click;** Recent news posts, featured content tiles, and links to social channels populate the sidebar to keep bounce rates down.

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.

tugboat-website-08-crew-page-overview-hg — **The Crew (staff) overview page**; the previous version of the staff page was quite weak compared to this latest version which includes staff to a much deeper level and features more robust content generated by the crew. The overview page shows the whole team and a few chosen snapshots of the team around the studio to showcase Tugboat’s culture. After the introduction to the team featured news stories/getting to know the crew and behind-the-scenes stories of projects with input from the staff member(s) that worked on it. Things stay casual with the Instagram feed, Tumblr posts, and favourite tweets on the sidebar. Not only do staff feel more included, but it gives clients (current and potential) more insight into the people who work on their projects.

tugboat-website-08-crew-page-chris-hg — **Staff page**; the individual staff pages are very personalized – going well beyond standard bio’s. We included a lifestyle photo gallery; LinkedIn business card; ‘Tug Stats’ (to get to know the crew member’s background a little better); personal lists of favourites, customizable to be whatever they’d like to share. For instance, my page shows my top five books, movies, bands, websites, mobile apps and my Twitter feed. In the sidebar, playing off of the ‘related work’ idea from the portfolio section, we have ‘related people’, people from each department, with more casual Tumblr posts appearing below. Social media accounts are linked to the page so that you can catch up with staff members via their different channels.

tugboat-website-08-crew-page-chris-video-hg — Videos were produced in-house based on Tugboat’s five brand pillars; the videos are presented in lightbox mode to bring focus to the video.

tugboat-website-08-crew-page-chris-tugstats-hg — In the Tug Stats, the ‘Years in the Industry’ add up to give you a live total of years of experience on the ‘About Us’ page; so if a staff member is added with 12 years of experience, that number automatically jumps up by 12 years.

Careers page

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

tugboat-website-07-UI-header-navigation-hg — **UI Details**: (top left) Transparent teal header bar is consistent throughout the entire site; (top right) Search field disappears when not in use; (bottom left) Navigation hamburger in normal state, and; (bottom right) hamburger navigation when activated – greys out the rest of the site to put the focus on the navigation and gives the user some visual feedback.

tugboat-website-07-UI-relevance-banner-hg — Mail list sign-up graphic – users receive a print version of Relevance magazine for signing up via the footer link.

tugboat-website-07-UI-web-projects-banner-hg — Web projects banner graphic.

tugboat-website-11-error-404-page-hg — **If users are presented with an error page**, it’s not the end of the conversation; it’s just the beginning. There’s no shortage of directions they’re pointed to figure out where they were trying to go or what new direction they’ll go from here. The latest news articles and a handful of selected portfolio projects (not shown here) would prompt users to continue and not bounce away from the website.

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.