Digital
Tugboat Group Website Redesign
tugboat-website-01-responsive-presentation

The new Tugboat Group website is fully responsive, looks great on all devices and is a vast improvement from the version it replaces. Considerations such as a phone button at the top of the mobile version makes calling Tugboat a one-click operation from wherever you are.

Creative Direction/DesignTugboat Group
Art Direction/Design/UX/UI: Chris Young

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. The site needed a UX/UI overhaul – particularly the 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 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 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 even though it may be different on the live site because it been updated as part of the website’s progression.

Front page

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.

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).

Interactive video portal on the front page; the website showcases some of the latest work done in video format. The header loads slim — bouncing slightly to let the user know there’s more options than they can see. Once that option is toggled, the header becomes a billboard taking over the screen to put all the videos front and centre. Bringing focus to the video portal, it ‘greys’ out the rest of the website (just like when toggling the navigation hamburger) to bring detailed focus to the video presentation. The video portal is constantly changing, and has even been used to profile staff members with the videos made for the crew/staff pages.

Interactive video portal on the front page; the website showcases some of the latest work done in video format. (top left) The feature video expands down 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 detailed focus to the video presentation.

tugboat-website-01-front-page-footer-detail-hg

Footer includes a full-width newsletter sign-up form because it was deemed to be the most important call-to-action on the site. Latest news, tweets and contact info as well as association links and repeat of the social channel icons finish it off.

Portfolio pages

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.

tugboat-website-02-portfolio-page-overview-hg

Overview of the Portfolio page displays all the featured work at once in a masonry layout. 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. Here 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 projects related to the current one; all customizable on the back-end.

tugboat-website-02-portfolio-page-large-photo-hg

Clicking on the portfolio images makes them fill the column so that you can really see the details in the work.

tugboat-website-02-portfolio-page-more-graphics-hg

When it comes to the portfolio pages presentation, projects that are 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 the scope of the project, 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 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.

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

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.

tugboat-website-04-expertise-brand-development-detail-hg

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. 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.

tugboat-website-05-featured-blog-post-info-clean-60pct-hg

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 longform 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 use just blew by), and not buried at the bottom where some people never get.
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. 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.

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 as well as 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. On the sidebar, things stay casual with the Instagram feed, Tumblr posts and favourite tweets. 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 beyond standard bio’s to include a lifestyle photo gallery, a 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 could catch up with staff members via their different channels.

tugboat-website-08-crew-page-chris-video-hg

Videos we’re 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 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.

tugboat-website-09-careers-page-hg

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 either figure out where they were trying to go, or what new direction they’ll go from here. Latest news articles and a handful of selected portfolio projects (not shown here) would prompt users to keep going 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 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 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 been updated as part of the website’s progression.

 

Work completed while employed as Art Director/Senior Graphic Designer at Tugboat Group.

All work copyright Tugboat Group and their respective owners.

 

Related Posts
All work © 2012 Chris Young Design unless noted otherwise. All rights reserved.